/* FightChoice brand fonts + wordmark CSS for the static (Blade) SEO pages (ufc_gnn-rrzs).
   Standalone mirror of the @font-face + wordmark rules in src/assets/main.css — the SPA
   bundles those with hashed filenames Blade can't reference, so this file + /fonts/* are
   served at stable public paths and <link>ed from every seo/*.blade.php. Keep in sync with
   main.css. Also carries the static navbar styles (ufc_gnn-flsd). */

/* ── Theme tokens (ufc_gnn-a00u) ──────────────────────────────────────────────
   The static SEO pages used to hardcode either a light look (fighter/landing/404)
   or a dark look (bout/events/fighters), so they ignored the user's saved theme and
   the fighter page opened light while the dark-default app was dark. These custom
   properties give every static page ONE token set that flips on `html.dark` (added
   before first paint by seo/_theme-head.blade.php). Dark is the DEFAULT — it mirrors
   the SPA — and `:root` (no .dark) is the opt-in light palette. Blade <style> blocks
   consume these via var(); brand.css defines them, so source order doesn't matter. */
:root {
  color-scheme: light;
  --fc-bg: #f8fafc;
  --fc-text: #0f172a;
  --fc-heading: #0f172a;
  --fc-text-muted: #64748b;
  --fc-text-subtle: #94a3b8;
  --fc-card-bg: #ffffff;
  --fc-card-border: #ddd6fe; /* ufc_gnn-vsf2l: soft brand tint (was grey #e2e8f0) — matches SPA .panel-outline */
  --fc-card-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --fc-chip-bg: #f1f5f9;
  --fc-divider: #e2e8f0;
  --fc-accent: #7c3aed;
  --fc-accent-strong: #7c3aed;
  --fc-accent-hover: #6d28d9;
  --fc-cta-shadow: 0 6px 16px rgba(124, 58, 237, .25);
  --fc-win: #059669;
  --fc-loss: #dc2626;
  /* Neutral backdrop for the round-dot strip (ufc_gnn-a98ds). Product call: "have a grey pill behind the dots
     so they arent masked by the green bhind them." The strip sits INSIDE the emerald predicted-winner
     box, so a green "completed round" dot was green-on-green and its shape disappeared. The pill has
     to be NEUTRAL (no green hue) and it cannot be one colour: on the pale-mint light box it must be
     DARKER than the box, on the near-black dark box LIGHTER — so it is a token that flips, like every
     other themed value here. gray-200 light / gray-700 dark, matching the Tailwind classes the SPA
     twins use (PredictionReport.vue, PredictionCard.vue) so the pill is the same grey in both
     renderings. Deliberately NOT --fc-chip-bg: that is page-background-relative (#f1f5f9 light) and
     is nearly invisible against the emerald box it has to sit on top of. */
  --fc-dot-pill: #e5e7eb;
  --fc-hover-bg: rgba(124, 58, 237, .06);
  /* Nav bar is pinned DARK in both themes to mirror the SPA TopNav (its bg-gray-900 /
     border-gray-800 have no light variant), so the static→SPA header handoff is seamless
     even in light mode (ufc_gnn-hu7j). gray-900 / gray-800 / gray-50 / gray-300. */
  --fc-nav-bg: #111827;
  --fc-nav-border: #1f2937;
  --fc-nav-logo: #f9fafb;
  --fc-nav-link: #d1d5db;
  --fc-blue: #2563eb;
  /* AI-pick winner tiers + accents */
  --fc-emerald-bg: rgba(16, 185, 129, .12);
  --fc-emerald-border: #6ee7b7;
  --fc-emerald-fg: #047857;
  --fc-amber-bg: rgba(245, 158, 11, .14);
  --fc-amber-border: #fcd34d;
  --fc-amber-fg: #b45309;
  --fc-gray-bg: #f8fafc;
  --fc-gray-border: #e2e8f0;
  --fc-consensus-bg: rgba(99, 102, 241, .08);
  --fc-consensus-border: #c7d2fe;
  --fc-consensus-fg: #4f46e5;
}
html.dark {
  color-scheme: dark;
  --fc-bg: #030712;
  --fc-text: #e5e7eb;
  --fc-heading: #f9fafb;
  /* ufc_gnn-vtnjx: muted/subtle text was too dark on the near-black bg — lightened for legibility
     (muted #9ca3af→#cbd5e1, subtle #64748b→#9ca3af). Light-mode tokens (above) untouched. */
  --fc-text-muted: #cbd5e1;
  --fc-text-subtle: #9ca3af;
  --fc-card-bg: rgba(17, 24, 39, .6);
  --fc-card-border: rgba(139, 92, 246, .28); /* ufc_gnn-vsf2l: muted brand-500 (was grey #1f2937) — matches SPA .panel-outline */
  --fc-card-shadow: none;
  --fc-chip-bg: rgba(31, 41, 55, .6);
  --fc-divider: #1f2937;
  --fc-accent: #a78bfa;
  --fc-accent-strong: #7c3aed;
  --fc-accent-hover: #8b5cf6;
  --fc-cta-shadow: 0 6px 16px rgba(124, 58, 237, .35);
  --fc-win: #34d399;
  --fc-loss: #f87171;
  /* Round-dot pill, dark theme (ufc_gnn-a98ds): LIGHTER than the box here, where the light-theme value
     is darker. gray-700 — light enough to separate from the emerald box over the near-black page, dark
     enough that the dark theme's LIGHT dots (#34d399 / #f87171) still read against it. */
  --fc-dot-pill: #374151;
  --fc-hover-bg: rgba(31, 41, 55, .5);
  /* Same pinned-dark nav palette as :root (ufc_gnn-hu7j) — the nav never lightens. */
  --fc-nav-bg: #111827;
  --fc-nav-border: #1f2937;
  --fc-nav-logo: #f9fafb;
  --fc-nav-link: #d1d5db;
  --fc-blue: #60a5fa;
  --fc-emerald-bg: rgba(16, 185, 129, .15);
  --fc-emerald-border: #065f46;
  --fc-emerald-fg: #34d399;
  --fc-amber-bg: rgba(245, 158, 11, .15);
  --fc-amber-border: #92400e;
  --fc-amber-fg: #fbbf24;
  --fc-gray-bg: rgba(17, 24, 39, .6);
  --fc-gray-border: #1f2937;
  --fc-consensus-bg: rgba(99, 102, 241, .12);
  --fc-consensus-border: #3730a3;
  --fc-consensus-fg: #a5b4fc;
}

/* Event/section header display face: Dream MMA, patched + subset woff2 (ufc_gnn-g26z).
   The source TTF only carried an uppercase 'D' glyph; the patch script
   (fe_service/scripts/patch-dream-mma.py) cmap-remaps A-Z (except D) onto the lowercase
   outlines. Real 0-9 glyphs, so no digit unicode-range hack (ufc_gnn-da2u). */
@font-face {
  font-family: 'Dream MMA';
  src: url('/fonts/DreamMMA.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Chomsky (SIL OFL). Blackletter face for the ENTIRE "FightChoice" wordmark
   (subset to those letters). */
@font-face {
  font-family: 'Chomsky';
  src: url('/fonts/Chomsky-wordmark.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Standard heading face (ufc_gnn-z94o): Bebas Neue (SIL OFL, Dharma Type). Condensed,
   effectively all-caps display sans applied to every unclassed h1-h6 (see the bare-tag
   rule below). Single weight (Regular) — heavier heading weights are faux-bolded. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Wordmark tagline face (ufc_gnn-1pvnr): Oxanium (SIL OFL, sevmeyer). A retro-techno,
   MIXED-CASE display sans used ONLY for the "Free UFC AI Predictions" tagline under the
   nav wordmark (.fc-nav-tagline). Medium (500), upright, latin subset (~9 KB). The tagline
   stack keeps a 'sans-serif' fallback so non-Latin (CJK) locales fall back cleanly. Kept in
   lockstep with the @font-face in fe_service/src/assets/main.css. */
@font-face {
  font-family: 'Oxanium';
  src: url('/fonts/Oxanium-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bare h1-h6 (specificity 0,0,1): a font-family CLASS like .font-event-header (0,1,0) or the
   .fc-frak wordmark out-ranks this, so classed headers keep their own face. Per-page inline
   <style> blocks set heading font-SIZE/margin only (never font-family), so this rule wins the
   family on every plain static heading. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
}

/* Screen-reader-only: real text present for crawlers + assistive tech but clipped from view. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Brand wordmark: "FightChoice" is real text in the Chomsky blackletter webfont. The ".APP"
   suffix is a static SVG outline (.wordmark-tld). Real "FightChoice.app" lives in an .sr-only sibling. */
.fc-wordmark {
  white-space: nowrap;
}

.fc-frak {
  /* The whole "FightChoice" wordmark in Chomsky blackletter (one font, incl. the F).
     font-weight:400 is REQUIRED (Chomsky is single-weight; heavier weights faux-bold). */
  font-family: 'Chomsky', serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1;
}

/* ".APP" TLD suffix: a static SVG outline of Dekatron SemiBold Italic, baseline-aligned. */
.wordmark-tld {
  display: inline-block;
  height: 0.48em;
  width: auto;
  vertical-align: baseline;
  margin-left: 0.18em;
}

/* "Choice" sits tight against "Fight" — no manual gap. */
.wordmark-choice {
  margin-left: 0;
}

/* Event/section header face (ufc_gnn-jpdt; face changed ufc_gnn-b61g3.19): BEBAS NEUE.
   Used for page titles (event / matchup / section titles) — NOT body copy. Real digits.

   WAS Dream MMA (ufc_gnn-g26z). Product call, 2026-08-03: "change our H1 font to bebas neue across the
   board. dream MMA is just unreadable that big." Dream MMA is a heavily stylised MMA-poster face
   whose letterforms stop resolving at h1 size — the exact place it was being used. Bebas Neue was
   already the heading face for every UNCLASSED h1-h6 (ufc_gnn-z94o), so this collapses two
   heading faces into one rather than introducing a third.

   The old 0.2em tracking went with Dream MMA: its glyph ink overhung its advance box by ~0.17em,
   so it needed tracking just to stop letters touching. Bebas Neue has no overhang and is already
   condensed, so that much air reads as a gappy title — hence 0.02em, a hair of display spacing
   and nothing more. Do NOT restore 0.2em; it was a workaround for a font that is gone.

   text-transform stays: Bebas Neue only draws caps, but the fallbacks (Impact/Arial Narrow) do
   not, so without it a fallback render would be mixed-case. Keep it in lockstep with the SPA
   rule in fe_service/src/assets/main.css. */
.font-event-header {
  font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Poster face — Dream MMA, the display face .font-event-header used to carry before b61g3.19.
   For SHORT poster-ish lines only (the bout page's weight class), never an h1: Dream MMA is what
   was called unreadable at h1 size, and that is exactly why the h1 moved to Bebas Neue.
   Keep in lockstep with the .font-poster rule in fe_service/src/assets/main.css. */
.font-poster {
  font-family: 'Dream MMA', 'Impact', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  /* Dream MMA's glyph ink overhangs its advance box by ~0.17em — without this, letters touch. */
  letter-spacing: 0.2em;
}

/* Static navbar (ufc_gnn-flsd; chrome match ufc_gnn-hu7j): visually MIRRORS the SPA TopNav
   (fe_service/src/components/TopNav.vue) so clicking a static link into the SPA shows no header
   jump. Full-width sticky bar — h-16 (64px), px-6 (24px), gray-900 bg + gray-800 bottom border —
   Wordmark on the left (mr-auto), then gray-300 14px/500 link pills with a gray-800 hover fill,
   white hover text, and a brand-400 active state. Same font stack as the SPA. */
.fc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  /* ufc_gnn-vttdt: min-height + flex-wrap, NOT a fixed 64px row. The bar is a nowrap wordmark
     beside a row of nowrap link pills, so its width is set entirely by TRANSLATED TEXT and
     nothing in it can shrink — at 768px (the first width above the mobile stack) the desktop row
     needed 872px in es / 835px pt / 813px fr against a 768px viewport, giving the whole PAGE
     BODY 80/43/21px of horizontal scroll on every static page, the bout page included. en had
     only 28px of slack, i.e. it fitted by luck. Wrapping to a second row is the safety net that
     survives arbitrary translation length: it costs nothing when the row fits (min-height keeps
     the bar at exactly 64px, measured in all 7 locales at 768-1440) and it degrades to a taller
     two-row header instead of a sideways-scrolling page when it does not. The tablet tier below
     is what keeps realistic copy on ONE row; this is what catches the next long string. */
  flex-wrap: wrap;
  row-gap: 4px;
  height: auto;
  min-height: 64px;
  padding: 0 24px;
  background: var(--fc-nav-bg);
  border-bottom: 1px solid var(--fc-nav-border);
}
.fc-nav .fc-nav-logo {
  color: var(--fc-nav-logo);
  text-decoration: none;
  /* ufc_gnn-lfiug: stack the wordmark + tagline vertically, centered, within the 64px bar. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  margin-right: auto;        /* push the menu to the right, mirroring TopNav's mr-auto Wordmark */
  font-size: 1.125rem;       /* text-lg, so .fc-frak (2em) renders at 36px like the SPA <Wordmark/> */
}
/* Thin brand-purple divider between the wordmark and the tagline (ufc_gnn-i2l22) — ~1px, roughly
   wordmark width (100% of the centered flex column), inside the single .fc-nav-logo link. Fixed
   #8b5cf6 (brand-500) matching the tagline; the bar is always dark so no theme flip. */
.fc-nav .fc-nav-divider {
  width: 100%;
  height: 1px;
  margin: 2px 0;
  background: #8b5cf6;
  opacity: .7;
}
/* Wordmark tagline (ufc_gnn-lfiug; restyled ufc_gnn-1pvnr; resized ufc_gnn-i2l22): mirrors the SPA
   TopNav tagline. Oxanium (retro-techno, MIXED-CASE OFL display face) in BRAND PURPLE, sized a
   touch SMALLER/narrower than the "FightChoice.app" wordmark above it (13px/0.02em — reversing the
   earlier "width ≈ wordmark" 15px/0.05em intent). The nav bar is ALWAYS dark in both themes, so use
   a fixed lighter purple (#8b5cf6 = brand-500, matching the SPA text-brand-500) — NOT the
   theme-flipping var(--fc-accent), which would read too dark on the dark bar in light theme. Keep
   the 'sans-serif' fallback so CJK locales never render tofu. */
.fc-nav .fc-nav-tagline {
  margin-top: 0;
  font-family: 'Oxanium', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  color: #8b5cf6;
}
.fc-nav .fc-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;                  /* gap-1 */
  /* ufc_gnn-vttdt: second level of the same safety net as .fc-nav above — if the link row alone
     is wider than the bar, it wraps within itself rather than pushing the page body sideways.
     The mobile tier below re-pins this to nowrap, where the equal-flex icon tabs want one row. */
  flex-wrap: wrap;
}
.fc-nav .fc-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;          /* SPA .touch-target */
  padding: 0 12px;           /* px-3 */
  border-radius: 8px;        /* rounded-lg */
  color: var(--fc-nav-logo); /* whitish wordmark idle (ufc_gnn-f92ys, supersedes tuxz5 purple); active/hover override below */
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* match SPA Tailwind default font-sans */
  font-size: 14px;           /* text-sm */
  font-weight: 500;          /* font-medium */
  line-height: 1;
  white-space: nowrap;
  transition: background-color .15s, color .15s;   /* transition-colors */
}
.fc-nav .fc-nav-links a:hover {
  background: #1f2937;       /* hover:bg-gray-800 */
  color: #ffffff;            /* hover:text-white */
}
.fc-nav .fc-nav-links a.is-active {
  background: #1f2937;       /* bg-gray-800 */
  color: #a78bfa;            /* text-brand-400 active highlight */
}
/* Lock glyph on the auth-gated items (Full Reports / Wallets), mirroring TopNav's guest lock. */
.fc-nav .fc-nav-lock {
  height: 12px;              /* h-3 */
  width: 12px;               /* w-3 */
  flex-shrink: 0;
  color: #6b7280;            /* text-gray-500 */
}

/* ── Nav popout groups (ufc_gnn-3uu4z) — progressive enhancement ──
   NO JS: the trigger button is hidden and the grouped <a> links flow inline via display:contents,
   so crawlers + no-JS visitors see today's flat nav (Fight Lab / Wallets / Fighters / Atlas as real
   links). WITH JS (html.fc-js, stamped before paint by _theme-head): the trigger shows and the links
   collapse into a hover/focus popout under it, matching the SPA TopNav's Tools/Databank menus. */
.fc-nav .fc-nav-trigger { display: none; }
.fc-nav .fc-nav-group,
.fc-nav .fc-nav-pop { display: contents; }

html.fc-js .fc-nav .fc-nav-group { display: inline-flex; position: relative; align-items: center; }
html.fc-js .fc-nav .fc-nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 12px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fc-nav-logo); /* whitish wordmark idle (ufc_gnn-f92ys, supersedes tuxz5 purple); active/hover override below */
  /* ufc_gnn-hsvl8: use the SAME explicit SPA sans stack as '.fc-nav-links a' above — NOT
     'inherit'. The static SEO body font omits the leading ui-sans-serif/system-ui, so
     inheriting it made these triggers mismatch the plain nav links. Keep in sync with line ~233. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
html.fc-js .fc-nav .fc-nav-trigger:hover { background: #1f2937; color: #ffffff; }
/* Trigger highlights when one of its grouped links is the active page (mirrors the SPA). */
html.fc-js .fc-nav .fc-nav-group:has(.is-active) .fc-nav-trigger { background: #1f2937; color: #a78bfa; }
.fc-nav .fc-nav-chev { height: 14px; width: 14px; flex-shrink: 0; opacity: .7; }
/* Per-item emoji icon (ufc_gnn-yg8dy): hidden on desktop (the desktop static nav stays text-only
   like the SPA desktop TopNav); shown as a stacked icon tab on mobile (see the @media below). */
.fc-nav .fc-nav-icon { display: none; }

html.fc-js .fc-nav .fc-nav-pop {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 50;
  min-width: 12rem; flex-direction: column; padding: 4px 0;
  background: #1f2937; border: 1px solid #374151; border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}
html.fc-js .fc-nav .fc-nav-group:hover .fc-nav-pop,
html.fc-js .fc-nav .fc-nav-group:focus-within .fc-nav-pop { display: flex; }
/* Popout rows: full-width menu items, not inline nav pills. */
html.fc-js .fc-nav .fc-nav-pop a {
  width: 100%; border-radius: 0; min-height: 40px; padding: 8px 16px; justify-content: flex-start;
}
html.fc-js .fc-nav .fc-nav-pop a:hover { background: #374151; }

/* ── Mobile: stacked nav matching the SPA mobile top bar (ufc_gnn-5jhf6 → el447 → nw688 →
   matched-to-SPA ufc_gnn-7smvr) ──
   On wide screens .fc-nav is a single fixed-height flex row (wordmark left, links right) that
   mirrors the desktop SPA TopNav — unchanged. On narrow screens it now mirrors the SPA MOBILE nav
   (BottomNav.vue, which also moved to the top): a small centered wordmark on its own row, then the
   link buttons centered on the row(s) below. So .fc-nav becomes a centered COLUMN. To match the
   SPA mobile wordmark (bare mark, no tagline) we hide the divider + tagline here and scale the
   wordmark down. CSS-only — the Blade HTML + link set are untouched, so crawlability/SEO hold. */
@media (max-width: 767px) {
  .fc-nav {
    flex-direction: column;   /* wordmark row on top, links row(s) below */
    align-items: stretch;     /* rows span full width; the wordmark hugs the left */
    height: auto;
    padding: 8px 12px;
    gap: 4px;
  }
  /* Wordmark far-left with the purple tagline BESIDE it, to the right (ufc_gnn-bypu8) — a
     horizontal left-aligned lockup, overriding the base stacked column. Scaled down like the SPA
     mobile mark. */
  .fc-nav .fc-nav-logo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-right: 0;
    font-size: 0.78rem;       /* was 1.125rem — small like the SPA mobile wordmark */
    /* ufc_gnn-alqpq: same guarantee ufc_gnn-vttdt gave the link row, applied to the wordmark
       lockup. Mark + tagline are both nowrap, so at 320px the longest tagline (fr, 173px beside a
       ~130px mark) ran 2px past the body in BOTH JS states. Wrapping costs nothing at any width
       where the pair fits — nav height is byte-identical at 360-1440 in all 7 locales. */
    flex-wrap: wrap;
  }
  /* Drop the thin divider line the desktop wordmark stacks above the tagline; keep the tagline,
     now sitting to the RIGHT of the wordmark. */
  .fc-nav .fc-nav-divider { display: none; }
  .fc-nav .fc-nav-tagline { margin: 0; font-size: 11px; }
  /* ── Icon tabs (ufc_gnn-yg8dy): mirror the SPA mobile nav — a single row of equal-width tabs,
     each an emoji icon stacked over its label (instead of plain text pills). ── */
  .fc-nav .fc-nav-icon { display: block; font-size: 1.2rem; line-height: 1; }
  .fc-nav .fc-nav-links {
    width: 100%;
    flex-wrap: nowrap;        /* one row of equal tabs, like the SPA */
    justify-content: stretch;
    gap: 0;
  }
  /* Each top-level item takes an equal share of the row (3 direct links + 2 groups — the Fight
     Forecast tab, removed in ufc_gnn-b61g3.9, was RESTORED in ufc_gnn-b61g3.13 by product decision, so
     the row is back to five slots and flex:1 1 0 narrows the others to make room). */
  .fc-nav .fc-nav-links > a,
  html.fc-js .fc-nav .fc-nav-group { flex: 1 1 0; min-width: 0; }
  /* Stacked icon-tab styling for the top-level items (icon on top, label below, centered). */
  .fc-nav .fc-nav-links > a,
  html:not(.fc-js) .fc-nav .fc-nav-links a,
  html.fc-js .fc-nav .fc-nav-trigger {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 52px;
    padding: 4px 2px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;      /* override the base nowrap so labels can wrap */
  }
  /* Force multi-word labels onto two lines (Fight Forecast, Track Record, Sign In): a min-content
     box is only as wide as the longest word, so every space becomes a line break — width-
     independent, unlike relying on the tab being narrow enough. Centred under the icon. */
  .fc-nav .fc-nav-links > a .fc-nav-label,
  html.fc-js .fc-nav .fc-nav-trigger .fc-nav-label {
    display: block;
    width: min-content;
    margin-inline: auto;
  }
  /* ── …EXCEPT in CJK, where min-content is ONE CHARACTER (ufc_gnn-heyui) ──
     The trick above assumes a soft wrap opportunity only at spaces. Japanese, Korean and Chinese
     allow one between essentially EVERY character, so min-content resolves to the widest single
     glyph and the label renders vertically, one character per line: at 360px in ja the first tab
     read インテルレポート down the screen and the bar measured 172px tall against 99px in en
     (ko 136, zh 124, same cause). Shipped and pre-existing; it is not a no-JS artefact.

     width:auto instead, which is the ONE thing these locales need: the anchor already sets
     white-space:normal, so the label simply fills its tab and wraps at whatever character fits —
     the same one-or-two-line result the min-content trick buys for Latin, arrived at the ordinary
     way. Nothing here needs the word-splitting behaviour, because CJK labels have no spaces to
     split on in the first place.

     Scoped with :lang() off the <html lang> BOTH renderings already set — Blade writes it from
     $loc, and the SPA keeps it in sync in i18n.js. Same mechanism as the hyphens:auto rule on
     .edge-table in seo/bout.blade.php. :lang() matches on prefix, so zh-CN / zh-TW are covered.

     NOT `word-break: keep-all`, which looks like the tidier fix and is a trap: it removes the
     inter-character break opportunities, so min-content becomes the WHOLE label, and a label wider
     than its ~72px tab then overflows the bar instead of wrapping inside it. */
  html:is(:lang(ja), :lang(ko), :lang(zh)) .fc-nav .fc-nav-links > a .fc-nav-label,
  html.fc-js:is(:lang(ja), :lang(ko), :lang(zh)) .fc-nav .fc-nav-trigger .fc-nav-label {
    width: auto;
  }
  /* ── NO JS: SEVEN tabs, so the row has to WRAP (ufc_gnn-alqpq) ──
     Without .fc-js the popouts are display:contents (see the block above), so the four grouped
     links become flex items of .fc-nav-links in the BOX tree while staying GRANDCHILDREN in the
     DOM tree. Selectors match the DOM tree, so the '> a' rules above never saw them: they kept
     flex:0 1 auto / min-width:auto / white-space:nowrap, could neither shrink nor wrap, and seven
     unshrinkable pills in the nowrap row ran past the bar and gave the whole PAGE BODY horizontal
     scroll (at 360px: fr 269 / es 266 / pt 259 / ja 170 / en 123 / zh 73 / ko 68 px, worse at 320,
     while the three real children shrank to 4px each). Three deliberate choices:
       * match by DESCENDANT, not '>', so this keeps holding however deeply the popouts nest and
         however many links they gain — depending on the exact nesting is what caused this bug;
       * a NON-ZERO flex-basis. Flex line breaking uses each item's hypothetical main size, so
         'flex: 1 1 0' items are zero-wide for that purpose and would NEVER wrap. 24% puts exactly
         four tabs on a row (4x24 fits, 5x24 does not) whatever the labels say, so seven links
         land as a tidy 4+3 grid instead of a content-dependent squeeze;
       * width:auto, overriding the 100% above, or every tab claims a whole line (a 7-row, 699px
         tall bar — measured).
     There is no honest one-row layout for seven tabs at 320px, so they flow onto a second row;
     min-width:0 + overflow-wrap:break-word means even a label longer than its tab breaks instead
     of overflowing. Everything here is gated on html:not(.fc-js): the JS-on five-tab row keeps
     its nowrap pin and its equal 'flex: 1 1 0' shares, unchanged. */
  html:not(.fc-js) .fc-nav .fc-nav-links { flex-wrap: wrap; }
  html:not(.fc-js) .fc-nav .fc-nav-links a {
    flex: 1 1 24%;
    width: auto;
    min-width: 0;
    /* break-word, NOT anywhere: 'anywhere' feeds the min-content intrinsic size, so the
       width:min-content rule on .fc-nav-label above then resolves to ONE CHARACTER and renders
       the label vertically (measured — a 395px tall bar). 'break-word' breaks a word only when it
       would actually overflow, and leaves intrinsic sizing alone. */
    overflow-wrap: break-word;
  }
  /* The desktop dropdown chevron is redundant on the mobile tabs (matches the SPA). */
  .fc-nav .fc-nav-chev { display: none; }

  /* Group popout drops DOWN as a FULL-WIDTH panel below the whole bar (like the SPA sheet), not a
     narrow dropdown anchored to the trigger — so it never clips at the screen edge. Making the
     group position:static re-anchors the absolute popout to .fc-nav (the sticky positioned bar). */
  html.fc-js .fc-nav .fc-nav-group { position: static; display: flex; }
  html.fc-js .fc-nav .fc-nav-pop {
    left: 0; right: 0; width: auto; min-width: 0; margin-top: 0; border-radius: 0 0 12px 12px;
  }
  /* Popout rows keep their icon INLINE (horizontal row), a touch smaller. */
  html.fc-js .fc-nav .fc-nav-pop .fc-nav-icon { font-size: 1.05rem; }
}

/* ── Tablet tier: 768-899px, the tightest band the DESKTOP nav has to survive (ufc_gnn-vttdt) ──
   768px is the very first width at which the mobile stack above stops applying, so the full
   desktop row — wordmark + tagline + five nowrap link pills — has to fit in the narrowest viewport
   it will ever see. In English it just barely did (28px of slack); in Spanish, Portuguese and
   French it did NOT, and since nothing in the bar can shrink the excess became PAGE-BODY
   horizontal scroll on every static page (es 80px / pt 43px / fr 21px at 768px, clearing around
   860 / 830 / 790px respectively).

   Shrink the CHROME, never the content — the same rule ufc_gnn-08gwu set for this page's type
   pass and ufc_gnn-hsw5w reused for the edge table's middle tier. Bar padding 24->12, bar gap
   16->8, pill padding 12->8, pill gap 4->2, label 14->13px. That is ~110px, taking the worst
   locale (es) from -104px to +7px of slack. Seven pixels is not a margin of safety, which is
   exactly why .fc-nav also wraps (see the base rule) — this tier is the LOOK, the wrap is the
   GUARANTEE. Deliberately scoped to '> a' so the popout rows keep their own 8px/16px menu
   padding. */
@media (min-width: 768px) and (max-width: 899px) {
  .fc-nav { padding: 0 12px; gap: 8px; row-gap: 4px; }
  .fc-nav .fc-nav-links { gap: 2px; }
  .fc-nav .fc-nav-links > a,
  html.fc-js .fc-nav .fc-nav-trigger { padding: 0 8px; font-size: 13px; }
}

/* ── Shared static-page panels + AI-pick winner styling (ufc_gnn-fy09) ──
   Mirrors the SPA's EventBoutView panel chrome (rounded-2xl / gray-800 border /
   gray-900-60 fill / uppercase gray-400 header) and PredictionReport.vue's tiered
   winner banner (emerald when confident, amber, else neutral) so the static bout /
   events / fighter pages can all share ONE look. Theme-aware via the --fc-* tokens
   above (ufc_gnn-a00u): dark by default, light when the user opted into 'light'. */

/* Panel chrome — matches EventBoutView's `rounded-2xl border border-gray-800
   bg-gray-900/60 p-5`. */
.fc-panel {
  background: var(--fc-card-bg);
  border: 1px solid var(--fc-card-border);
  border-radius: 16px;                 /* rounded-2xl */
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--fc-card-shadow);
}
/* Panel header — standardized to MATCH the static fighter profile's .card h2 (ufc_gnn-vrxg):
   Bebas Neue (inherited from the bare h1-h6 rule; do NOT set font-family here), the enlarged
   24px size established on the profile by ufc_gnn-ulmi, same transform/letter-spacing/color/
   margin. Keeps every .fc-panel header uniform across the bout page + any other static page
   using .fc-panel. (The .fc-panel--consensus color accent below is a deliberate exception.) */
.fc-panel > h2,
.fc-panel-title {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fc-heading);
  margin: 0 0 14px;
}

/* AI-pick winner banner — mirrors PredictionReport.vue's tiered treatment:
   conf >= 65 → emerald, >= 55 → amber, else neutral. Emerald is the confident/GREEN
   highlight of the predicted winner (the primary ask of ufc_gnn-fy09). */
.fc-winner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid;
  border-radius: 12px;                 /* rounded-xl */
  padding: 12px 16px;
}
/* Sizes lifted by ufc_gnn-08gwu ("most of the important text is tiny") in step with the bout page's
   content tier: label 12→13, name 18→22, confidence 26→30, conf label 12→13. Only the STATIC bout
   page uses .fc-winner* (grep: seo/bout.blade.php is the sole consumer), so this is effectively a
   page-scoped change — but keep it here rather than overriding in the page's <style>, so the shared
   class stays the single definition and the SPA twin (PredictionReport.vue) has one thing to match.
   The name + confidence are CLAMPED: they share one flex row, and at a flat 22px/30px "Anthony
   Hernandez" plus "56.2%" no longer fit the 256px available inside the box at 360px. */
.fc-winner-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.fc-winner-name { font-size: clamp(19px, 5vw, 22px); font-weight: 700; color: var(--fc-heading); }
.fc-winner-right { text-align: right; }
.fc-winner-conf { font-size: clamp(26px, 7.5vw, 30px); font-weight: 900; line-height: 1; }
.fc-winner-conf-label { font-size: 13px; color: var(--fc-text-muted); margin-top: 2px; }
/* Same treatment as .fc-kelly-disc under the stake — 11px, --fc-text-subtle — so the two guards on
   this page read as one convention rather than two. max-width + margin-left:auto because
   .fc-winner-right is text-align:right and narrow: without a cap the sentence wraps to four ragged
   words against the edge, and without the auto margin the capped block would sit left of the
   number it qualifies. */
.fc-winner-conf-disc { font-size: 11px; line-height: 1.4; color: var(--fc-text-subtle);
  margin-top: 6px; max-width: 22ch; margin-left: auto; }

/* The tier colour drives .fc-duration-label (ufc_gnn-h12jz — see the duration block below for why
   the old always-purple rule was dropped) and .fc-ptv-label (ufc_gnn-hk83n). Every header INSIDE
   this box takes the tier colour; that is what makes them read as one box rather than three
   stacked widgets, and it is what Jae's "its own green header" means in practice. */
.fc-winner--emerald { background: var(--fc-emerald-bg); border-color: var(--fc-emerald-border); }
.fc-winner--emerald .fc-winner-label,
.fc-winner--emerald .fc-duration-label,
.fc-winner--emerald .fc-ptv-label,
.fc-winner--emerald .fc-winner-conf { color: var(--fc-emerald-fg); }

.fc-winner--amber { background: var(--fc-amber-bg); border-color: var(--fc-amber-border); }
.fc-winner--amber .fc-winner-label,
.fc-winner--amber .fc-duration-label,
.fc-winner--amber .fc-ptv-label,
.fc-winner--amber .fc-winner-conf { color: var(--fc-amber-fg); }

.fc-winner--gray { background: var(--fc-gray-bg); border-color: var(--fc-gray-border); }
.fc-winner--gray .fc-winner-label,
.fc-winner--gray .fc-duration-label,
.fc-winner--gray .fc-ptv-label { color: var(--fc-text-muted); }
.fc-winner--gray .fc-winner-conf { color: var(--fc-text); }

/* Predicted duration (ufc_gnn-l6g76; nested inside the winner box by ufc_gnn-b61g3.18).
   NO CHROME OF ITS OWN (ufc_gnn-h12jz). Product call: "remove the purple panel around the prediction
   duration section and incorporate that content direction into the green outer prediction panel.
   make the styling match the prediction winner area above." So: no border, no background, no
   radius, no padding — just a margin separating it from the name/confidence row. The label is a
   byte-for-byte copy of .fc-winner-label's type, and it takes the CONFIDENCE-TIER colour from the
   .fc-winner--* rules above.
   THIS REVERSES the old "always purple, because duration confidence is a different quantity from
   win confidence" rule (ufc_gnn-l6g76 / b61g3.18) — deliberately, by product decision. Once the purple
   card is gone a lone purple label floating in a green box reads as a leftover, and "match the
   styling above" means the colour too. The no-implied-link concern is carried by the WORDS
   ("Predicted Duration" vs "Confidence"), not by a hue. Do not reinstate the purple.
   On the static page the point is largely moot anyway — ufc_gnn-m7fd pinned this banner to
   emerald, so --amber/--gray only occur on the SPA twin (PredictionReport.vue), which still tiers. */
.fc-duration {
  margin-top: 12px;
}
.fc-duration-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
/* 15 → 18px (ufc_gnn-08gwu). This sentence IS the duration prediction — it was reading smaller than
   the winner name it sits under despite carrying just as much of the forecast.
   STAYS 18px under ufc_gnn-h12jz rather than rising to .fc-winner-name's clamp(19px,5vw,22px): it is
   a sentence, not a name, and it is the SECOND reading in the box. Same weight + same --fc-heading
   colour as the name, so it matches the winner area in everything but scale. */
.fc-duration-value { font-size: 18px; font-weight: 700; color: var(--fc-heading); }

/* Round-dot strip above the duration sentence (ufc_gnn-06qtd). One dot per SCHEDULED round: full
   green for rounds before the predicted finish, half green / half red for the predicted finishing
   round, full red after it. TWO HALF-SPANS rather than a gradient, so all three states are the same
   markup and both halves read straight off --fc-win/--fc-loss — the same two tokens the ensemble
   bars and the track record use, and both already theme-aware (they lighten in dark mode). Only the
   dots carry green/red; nothing around them does — as of ufc_gnn-h12jz the duration block has no
   container of its own at all, so the strip sits directly on the green winner box.
   Wraps, and 5 dots are 98px, so the strip cannot overflow the winner box at 360px.
   DOT SIZE MOVES WITH THE TYPE (ufc_gnn-08gwu): 12 → 14px, gap 6 → 7px, because the sentence right
   below went 15 → 18px and a 12px dot beside 18px text reads as a stray bullet rather than a round.
   5 dots + 4 gaps = 98px, still far inside the ~256px winner box at 360px. */
/* GREY PILL behind the dots (ufc_gnn-a98ds) — see --fc-dot-pill above for why it is a flipping token.
   `inline-flex` (not the old block-level `flex`) is what makes the pill HUG the dots: a full-width bar
   would read as a nested card, which is exactly the chrome ufc_gnn-h12jz stripped off the duration
   block around it — so this pill is now the ONLY container left in here and must stay dot-shaped.
   `vertical-align: top` kills the inline baseline descender an inline-level box would otherwise add
   under the pill, so the 7px gap to the sentence stays 7px.
   Padding is 5px 8px, so 5 dots occupy 98 + 16 = 114px — under half the ~252px winner box at 360px.
   The soft inset outline is doing real work, not decoration: the pill's FILL has to stay light in
   light mode (the light-theme dots are dark — a darker pill would drop the green dot below 3:1), which
   leaves only ~1.1:1 of luminance between the pill and the pale-mint box. Most of that separation is
   carried by HUE (neutral grey vs green-tinted mint); the 1px outline supplies the edge so the pill
   still reads as a deliberate shape, and it costs the dots nothing because it does not touch the fill.
   Same --fc-heading-derived technique the dots themselves use, so it flips with the theme. */
.fc-round-strip { display: inline-flex; vertical-align: top; flex-wrap: wrap; align-items: center;
  gap: 7px; margin: 0 0 7px; padding: 5px 8px; border-radius: 999px; background: var(--fc-dot-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-heading) 14%, transparent); }
.fc-round-dot { width: 14px; height: 14px; border-radius: 999px; overflow: hidden; display: flex;
  flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-heading) 22%, transparent); }
.fc-round-dot > span { width: 50%; height: 100%; }
.fc-round-dot .rs-g { background: var(--fc-win); }
.fc-round-dot .rs-r { background: var(--fc-loss); }

/* Round-by-round survival curve under the duration sentence (ufc_gnn-7imzj).
   Sits on the SAME --fc-dot-pill plate as the round-dot strip above it and uses the SAME --fc-win
   green, because it is the same statement twice: green is "the fight is still going". The dots are
   the glanceable version, this is the distribution they were picked out of.
   ROUND BOUNDARIES ONLY — see the Blade comment and App\Support\SurvivalCurve for the measurement
   (ufc_gnn-qpvt8) that rules out drawing the half-round buckets individually.

   NO <text> AND NO <circle> IN THE SVG, on purpose. The chart stretches with
   preserveAspectRatio="none" so it can fill a 250px phone box and a 700px desktop box with one
   geometry; under that transform a circle becomes an ellipse and a 9px label would render at 25px
   on desktop. Strokes survive it via vector-effect="non-scaling-stroke", and the numbers live in
   real HTML grid rows above and below — which also means they inherit the page's type scale and
   stay selectable. The rows and the polyline agree because both place point k at the CENTRE of
   column k of the same n-column grid. */
.fc-surv { margin-top: 12px; }
/* A TITLE, NOT A NOTE (2026-08-16). This was 12px muted body copy carrying a full sentence, so it
   read as a footnote sitting above the chart rather than as the chart's name. Now the heading
   treatment the rest of the page uses for a block title: heading colour, semibold, uppercase with
   the same tracking as the panel h3s. It is an <h4> in the markup for the same reason. */
.fc-surv-cap { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fc-heading); margin: 0 0 7px; }
/* THE PLOT IS A HOLE IN THE GREEN BOX (product call, 2026-08-12). The panel behind the winner box is
   --fc-card-bg, so painting the plot with it reads as a cut-out rather than a tinted inset — which
   is what --fc-dot-pill gave, a pill floating ON the green. The inset hairline stays: it is the
   edge of the hole. */
.fc-surv-plot { padding: 6px 8px 4px; border-radius: 12px; background: var(--fc-card-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc-heading) 14%, transparent); }
.fc-surv-vals, .fc-surv-ticks { display: grid; grid-template-columns: repeat(var(--fc-surv-n), 1fr); }
/* TYPE MATCHED TO THE RADAR / TRAJECTORY CHARTS (product call, 2026-08-12: "make the font colours match the
   font colours and sizes of our other graphs"). Those charts label values in --fc-text (the radar's
   `label` is #111827 / #e5e7eb, i.e. exactly this token) and set every piece of chrome — series
   name, caption, legend — at 12-13px in --fc-text-muted. This block used --fc-heading at 12px and
   --fc-text-muted at 11px, so it read a size small and a shade off beside them. */
.fc-surv-vals span { font-size: 13px; font-weight: 700; text-align: center; color: var(--fc-text);
  font-variant-numeric: tabular-nums; }
.fc-surv-ticks span { font-size: 12px; text-align: center; color: var(--fc-text-muted);
  font-variant-numeric: tabular-nums; }
.fc-surv-svg { display: block; width: 100%; height: 54px; margin: 3px 0; overflow: visible; }
/* overflow:visible is load-bearing: .fc-surv-base sits exactly ON y=40, the bottom edge of
   the viewBox, so with the default overflow:hidden an SVG clips half its stroke away and
   the axis renders at half the intended weight. */
.fc-surv-base { stroke: color-mix(in srgb, var(--fc-heading) 55%, transparent);
  stroke-width: 1.5; }
/* BRAND PURPLE, not blue (product call, 2026-08-12). --fc-accent is #7c3aed light / #a78bfa dark, so
   it tracks the theme; do not hard-code either hex. */
.fc-surv-bar { fill: color-mix(in srgb, var(--fc-accent) 62%, transparent); stroke: none; }
/* .fc-surv-area retired with the line-only chart (product call, 2026-08-12): the bars carry the fill
   now, and keeping a filled area under the curve on top of them just muddied both. */
.fc-surv-line { fill: none; stroke: var(--fc-win); stroke-width: 2.5; stroke-linejoin: round;
  stroke-linecap: round; }
.fc-surv-half { stroke: color-mix(in srgb, var(--fc-heading) 45%, transparent); stroke-width: 1;
  stroke-dasharray: 3 3; }
.fc-surv-cross { stroke: color-mix(in srgb, var(--fc-heading) 40%, transparent); stroke-width: 1;
  stroke-dasharray: 2 3; }
/* .fc-surv-axis removed with the "End of round" caption it styled (2026-08-16) — the tick row
   already reads "Rnd 1 … Rnd 5", so the caption restated its own axis. */
.fc-surv-dist { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--fc-heading); }
.fc-surv-dist-pct { font-size: 18px; font-weight: 800; }
.fc-surv-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--fc-text-muted); }

/* ── How Similar Fights Ended (ufc_gnn-q731o; SPLIT by ufc_gnn-oc7gc / -hk83n) ─────────────────
   THE TWO HALVES NOW LIVE IN DIFFERENT PLACES, and this block's old note said the opposite, so
   read this before "restoring" anything:

     .fc-rc-*   the reference class — its OWN .fc-panel in Matchup Intel, above similar fights.
     .fc-ptv-*  Path to Victory    — INSIDE the green .fc-winner box, with the pick it splits.

   The old rule was "deliberately does NOT reuse the winner box's green, because green on this page
   means 'our pick' and this block is NOT a pick". That still holds — for the reference class, which
   is why it is on the panel plate in the neutral register below. Path to Victory went green for the
   same reason INVERTED: every fighter-specific number in it comes from the ensemble's win
   probability, so it IS the pick, decomposed. The split put each half in the colour that was always
   true of it.

   The reference-class typography stays the 12-13px muted panel register. It no longer needs to
   match .fc-surv-* (the pairing note that required that was deleted with the move) but there is no
   reason to change it: it is the register of every non-headline panel on the page. */
/* .fc-refclass is GONE from the markup — the reference class is a .fc-panel now and takes the
   panel's own chrome, so it no longer needs (or has) a wrapper class of its own. .fc-ptv keeps a
   rule but only ever appears inside .fc-winner; see that override below. */
/* Now a <p> UNDER the panel's own h2 rather than being the heading itself: this is the n chip that
   must print before any rate (guardrail 2), and .fc-panel > h2 took over the heading job. Carries
   LAYOUT ONLY — every visible property (size, weight, colour) belongs to the .fc-rc-n span inside
   it, so setting type here would only be inherited by nothing. The negative top margin pulls the
   chip up under the h2's 14px bottom margin so it reads as that heading's subtitle instead of as a
   first paragraph. Still a wrapping flex row rather than a plain block: it carried TWO chips until
   ufc_gnn-rycx0 and the row is the right shape if a second one is ever added back. */
.fc-rc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: -6px 0 10px; }
/* n ALWAYS renders beside the heading, so the reader can see what "similar" meant before reading
   any percentage. Guardrail 2 was "always print n and the cluster identity"; ufc_gnn-rycx0 relaxed
   it to "always print n" when the cluster lookup became a per-bout radius search, and the
   .fc-rc-id rule that used to share this declaration went with the chip it styled. */
.fc-rc-n { font-size: 12px; font-weight: 600; color: var(--fc-text-muted);
  font-variant-numeric: tabular-nums; }
.fc-rc-intro { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--fc-text-muted); }
/* BORDERLESS LAYOUT GRID (Jae, 2026-08-16). .fc-rc-cell used to be a plate of its own —
   var(--fc-card-bg) plus an inset 1px ring — which, inside a .fc-panel that already has both, read
   as a panel within a panel. Jae: "eliminate the panel and just put the metrics in borderless
   layout table, too many panel borders happening." So the cell is a LAYOUT HOOK ONLY now; every
   visible property lives on the .fc-rc-pct / .fc-rc-lbl spans, and the columns are held together by
   alignment and the grid gap rather than by chrome. Do not give this a background or a border back:
   the .fc-panel around it is the surface.
   align-items:start so the third column (which is taller — it carries two or three rows) hangs from
   the same top edge as the two headline numbers instead of centring against them. */
.fc-rc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; align-items: start; }
/* The three-column variant, emitted only when there is a method split and/or a median to show —
   see the Blade, which falls back to the two-column class rather than leaving an empty track. The
   third track is wider because its rows are "value + name" side by side, not stacked. */
.fc-rc-split--methods { grid-template-columns: 1fr 1fr 1.45fr; }
.fc-rc-cell { min-width: 0; }
.fc-rc-pct { display: block; font-size: 22px; font-weight: 800; color: var(--fc-heading);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.fc-rc-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--fc-text); }
/* THE THIRD COLUMN'S ROWS (ufc_gnn-h8t95's KO/sub split + the median finish, moved out from under
   "Ended early"). Same two type styles as the first two columns — that is the whole point, they are
   peers of those metrics and not the muted .fc-rc-sub footnotes they used to be — but laid out
   value-BESIDE-name instead of value-ABOVE-name, because three stacked 22px numbers would tower
   over the single number in each of the other columns. The value track has a min-width so "33%",
   "15%" and "5:26" all range against one left edge and the names form a straight column: a
   borderless layout table, which is exactly the register Jae asked for.
   baseline alignment, not centre, so the smaller name sits on the number's baseline. */
.fc-rc-break { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.fc-rc-break:last-child { margin-bottom: 0; }
.fc-rc-break .fc-rc-pct { flex: 0 0 auto; min-width: 3.2em; font-size: 17px; }
.fc-rc-break .fc-rc-lbl { flex: 1 1 auto; }
.fc-rc-rounds { margin-top: 10px; }
.fc-rc-rounds-cap { font-size: 12px; color: var(--fc-text-muted); margin-bottom: 4px; }
/* One grid row per round: tick, bar, count. A three-column grid rather than a flex row so the
   ticks and the counts stay in their own columns and every bar starts and ends at the same x —
   the comparison between rounds is the only thing these bars are for. */
.fc-rc-round { display: grid; grid-template-columns: 4.5em 1fr 2.5em; align-items: center;
  gap: 8px; margin-bottom: 3px; }
.fc-rc-round-tick, .fc-rc-round-val { font-size: 12px; color: var(--fc-text-muted);
  font-variant-numeric: tabular-nums; }
.fc-rc-round-val { text-align: right; }
.fc-rc-round-bar { display: block; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fc-heading) 10%, transparent); overflow: hidden; }
/* Same brand purple as the survival bars above — same visual family, because both are "when does
   the fight end" distributions; the sentence between them is what says one is a model and one is a
   record. */
.fc-rc-round-bar i { display: block; height: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--fc-accent) 62%, transparent); }
.fc-rc-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--fc-text-muted); }
/* The thin-cluster abstention carries a rule so it reads as a qualification of the numbers above
   rather than as more copy. .fc-rc-caveat was the other user of this rule — the Path-to-Victory
   independence caveat — and was dropped when that line was removed (ufc_gnn-hk83n, Jae's call; the
   column sub-labels carry the provenance now). Kept as a single-selector rule rather than deleted
   so the abstention keeps its treatment. */
.fc-rc-thin { padding-left: 10px;
  border-left: 3px solid color-mix(in srgb, var(--fc-heading) 22%, transparent); }

/* Path to Victory INSIDE the green winner box (ufc_gnn-hk83n) --------------------------------
   .fc-winner is a wrapping flex row, so flex-basis:100% drops this onto its own full-width line
   instead of squeezing the name/confidence columns — the same trick .fc-duration,
   .fc-winner-newfighter and .fc-winner-share use. Same 12px top margin as .fc-duration so the
   stacked blocks inside the box are evenly spaced. */
.fc-winner .fc-ptv { flex-basis: 100%; margin: 12px 0 0; }
/* The green box's header convention, byte-for-byte .fc-winner-label / .fc-duration-label — Jae:
   "it should be under its own green header… styled as the green box's other headers". It takes the
   confidence-TIER colour from the .fc-winner--* rules above, which is where the "green" comes from
   (on this static page ufc_gnn-m7fd pins the tier to emerald, so it is always green here; only the
   SPA twin can show amber/gray). text-transform means Jae's capital T in "Path To Victory" is
   invisible in the render — it is still correct in the locale string and to a screen reader. */
.fc-ptv-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.fc-ptv-table { width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.fc-ptv-table th, .fc-ptv-table td { padding: 7px 6px; text-align: right; }
/* PER-COLUMN PROVENANCE under each header (ufc_gnn-hk83n), replacing the two paragraphs that used
   to sit under the table. display:block so it sits UNDER its header rather than beside it, and
   deliberately NOT uppercase/tracked like the header above it — it is a footnote about the column,
   and typesetting it as a second header would read as a two-line column name. normal-case, lighter
   and muted so the header stays the thing you read first. */
.fc-ptv-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 500;
  line-height: 1.35; text-transform: none; letter-spacing: 0;
  color: var(--fc-text-subtle); }
/* ONLY THE FIRST COLUMN'S HEADS ARE LEFT-ALIGNED (Jae, 2026-08-16). The base rule above right-aligns
   every cell; this override used to claw back EVERY th, which left the four numeric column heads
   ranged left over right-ranged numbers — with five columns (ufc_gnn-h8t95) each head visibly sat
   over the wrong column. Column one is the exception because it is the only one whose BODY is text,
   not numbers: the tbody th is the fighter name and the tfoot th is the "Matchup profile #N" label,
   both left-ranged, so a right-aligned head there would detach from what it names. Hence
   `thead th:first-child` rather than `thead th`. The .fc-ptv-sub sub-labels need no rule of their
   own — they are display:block inside their th and inherit its alignment, which is exactly what
   keeps each "*Based on N similar fights" pinned to its own column. */
.fc-ptv-table thead th:first-child, .fc-ptv-table tbody th, .fc-ptv-table tfoot th {
  text-align: left; }
.fc-ptv-table thead th { font-size: 12px; font-weight: 600; color: var(--fc-text-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--fc-heading) 16%, transparent); }
.fc-ptv-table tbody th { font-weight: 700; color: var(--fc-heading); }
.fc-ptv-table tbody td { color: var(--fc-text); }
/* The row total is the win probability printed elsewhere on the page; the column totals are the
   base rate printed directly above. Both are emphasised so the reader can check the table adds up
   in both directions instead of taking it on trust. */
.fc-ptv-total { font-weight: 800; color: var(--fc-heading); }
.fc-ptv-table tfoot th, .fc-ptv-table tfoot td { font-size: 12px; color: var(--fc-text-muted);
  border-top: 1px solid color-mix(in srgb, var(--fc-heading) 16%, transparent); }
.fc-ptv-table tfoot .fc-ptv-total { color: var(--fc-text-muted); font-weight: 700; }
/* The breakdown column needs ~200px to keep "5:26  Median finish, round 2" on one line in the
   longest locales (fr/pt), so it is the first thing to drop out of the row. It goes full-width
   UNDER the two headline numbers rather than squeezing all three — the two percentages are the
   headline and must not wrap. */
@media (max-width: 620px) {
  .fc-rc-split--methods { grid-template-columns: 1fr 1fr; }
  .fc-rc-split--methods > .fc-rc-cell--break { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .fc-rc-split, .fc-rc-split--methods { grid-template-columns: 1fr; }
  /* FIVE COLUMNS ON A PHONE is the real constraint here (ufc_gnn-h8t95 took this from four).
     "By KO/TKO" + "By submission" are both longer than the "By finish" they replaced, in every
     locale, and the fighter-name column is the one that must not be squeezed — it is the only
     cell a reader uses to tell the two rows apart. So: shrink the type and the padding, let the
     method headers wrap (they are two short words), and keep the tfoot. The bead's instruction is
     that if it still will not fit, the lever is SHORTER HEADER TEXT, never dropping the totals
     row — that row is what lets a reader check the table adds up in both directions, which matters
     more at three method columns, not less. */
  .fc-ptv-table { font-size: 11px; }
  .fc-ptv-table th, .fc-ptv-table td { padding: 6px 2px; }
  .fc-ptv-sub { font-size: 10px; }
  /* The name column keeps its room; the numeric columns share what is left evenly. */
  .fc-ptv-table thead th:first-child, .fc-ptv-table tbody th, .fc-ptv-table tfoot th {
    width: 34%; word-break: break-word; }
}

/* Locked teaser pill — emerald, matches the SPA reasoning/bet "unlock" pills. */
.fc-pill {
  display: inline-block;
  white-space: nowrap;
  background: #059669;                 /* emerald-600 */
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
}
.fc-pill:hover { background: #10b981; } /* emerald-500 */

/* ── Signed-in progressive enhancement (ufc_gnn-x9hb) ──
   The static HTML always ships the GUEST view (crawlable + publicly cached, unchanged —
   the 'zero divergence' design, ufc_gnn-2v09). When the visitor is signed in, the
   before-paint stamp in seo/_theme-head.blade.php adds `.is-authed` to <html> (and
   /static-auth-enhance.js confirms via GET /api/me, clearing it on 401). These rules are a
   pure CSS toggle so there is no flash:
   1. hide guest-only affordances (the nav 'Sign In' link);
   2. restyle the bout teaser pills from an emerald 'unlock' teaser into a brand-accent
      'Run' action button (the JS swaps the text → 'Run' and href → /folders). */
.is-authed [data-guest-only] { display: none !important; }
.is-authed .fc-pill {
  background: var(--fc-accent-strong);   /* match the primary 'Run' action colour (.cta a) */
}
.is-authed .fc-pill:hover { background: var(--fc-accent); }

/* Web Consensus accent — indigo, mirrors PredictionReport.vue's consensus box. */
.fc-panel--consensus {
  background: var(--fc-consensus-bg);
  border-color: var(--fc-consensus-border);
}
.fc-panel--consensus > h2 { color: var(--fc-consensus-fg); }

/* ── Shared static fighter-roster cards (ufc_gnn-10if) ──
   Card chrome for the static /fighters index, matching the /events index card rows
   (bordered rounded card, gray-800 border/gray-900-60 fill, brand-accent hover, chevron)
   so the static bout / events / fighter pages all read as one system. Theme-aware via
   the --fc-* tokens (ufc_gnn-a00u). Responsive grid keeps the ~500-name roster compact. */
.fc-roster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 560px) {
  .fc-roster { grid-template-columns: 1fr 1fr; }
}
.fc-roster-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* ufc_gnn-duk2y: THE CARD IS A GRID ITEM, and a grid item defaults to min-width:auto — an
     automatic minimum equal to its MIN-CONTENT. `1fr` above means `minmax(auto, 1fr)`, so that
     min-content became the track's floor and the track grew past its container instead of the
     card shrinking: at 360px the single track resolved to 397.78px inside a 328px section and
     gave the PAGE BODY 54px of horizontal scroll (94px at 320, 24px at 390), and in the
     two-column band the first track stayed pinned at 397.78px while only the second absorbed —
     209px of overflow at 560px, and unequal 397.78/382.22 columns at EVERY desktop width up to
     1440. Identical in all 7 locales, because the floor is one long English name
     ("Cameron Smotherman \"The Baby-Faced Killa\"") and not a translation.
     .fc-roster-main already had min-width:0 for the FLEX layer and .fc-roster-name already had
     nowrap+ellipsis — but overflow:hidden does NOT reduce an element's min-content CONTRIBUTION,
     so the ellipsis could never engage: the grid handed the card 398px every time. Breaking the
     chain at the grid layer is what lets the existing ellipsis do its job.
     Same bug ufc_gnn-08gwu fixed on the bout page's .edge-row (grid children with no min-width:0)
     and the same class as ufc_gnn-vttdt's nav — a track sized by unshrinkable content.
     `grid-template-columns: minmax(0, 1fr)` on .fc-roster is the exactly-equivalent cure and
     measures identically; it is deliberately NOT also applied, because one of the two is the fix
     and doing both invites a future editor to remove "the redundant one". This form is on the
     CHILD, so it keeps working if the track list ever gains a third column. */
  min-width: 0;
  border: 1px solid var(--fc-card-border);
  border-radius: 12px;                  /* rounded-xl */
  background: var(--fc-card-bg);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--fc-card-shadow);
  transition: border-color .15s, background-color .15s;
}
.fc-roster-card:hover { border-color: var(--fc-accent); background: var(--fc-hover-bg); }
.fc-roster-main { min-width: 0; }
.fc-roster-name {
  font-weight: 600;
  color: var(--fc-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}
.fc-roster-card:hover .fc-roster-name { color: var(--fc-accent); }
.fc-roster-nick { color: var(--fc-text-subtle); font-weight: 400; }
.fc-roster-meta {
  font-size: 12px;
  color: var(--fc-text-muted);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.fc-roster-record {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fc-text);
}
.fc-roster-wc { color: var(--fc-blue); }
.fc-roster-chev {
  height: 16px;
  width: 16px;
  color: var(--fc-text-subtle);
  flex-shrink: 0;
  transition: color .15s;
}
.fc-roster-card:hover .fc-roster-chev { color: var(--fc-text-muted); }

/* ── Shared static-page footer (ufc_gnn-e3au) ── mirrors the SPA footer (fe_service/src/App.vue):
   © {year} wordmark, Terms of Service, FAQ, Blog, Contact, and the disclaimer, laid out as one
   centered, wrapping row of small muted text. Sits on the same always-dark nav bar (var(--fc-nav-*))
   as seo/_navbar so the static top/bottom chrome is consistent in both themes; link colours match
   the SPA footer's gray-500 → gray-300 hover. Root-relative hrefs. */
.fc-footer {
  margin-top: 48px;
  padding: 16px 24px 24px;
  background: var(--fc-nav-bg);
  border-top: 1px solid var(--fc-nav-border);
}
.fc-footer .fc-footer-inner {
  max-width: 64rem;          /* max-w-5xl */
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 24px;             /* gap-x-6 gap-y-1 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 12px;           /* text-xs */
  line-height: 1.5;
  color: #6b7280;            /* text-gray-500 */
  text-align: center;
}
.fc-footer .fc-footer-inner a {
  color: #6b7280;            /* text-gray-500 */
  text-decoration: none;
  transition: color .15s;
}
.fc-footer .fc-footer-inner a:hover {
  color: #d1d5db;            /* hover:text-gray-300 */
  text-decoration: underline;
}
.fc-footer .fc-footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fc-footer .fc-footer-copy .fc-wordmark { color: #f9fafb; }
.fc-footer .fc-footer-copy .fc-frak { font-size: 1.4em; }  /* scaled down from the nav's 2em for the small footer row */

/* Canonical URL stamp, PRINT ONLY (ufc_gnn-vwoed). Hidden on screen — a printed intel report
   otherwise has nothing on it saying where it came from. Revealed by the @media print block
   below; the element is emitted by seo/bout.blade.php under the H1. */
.fc-print-url { display: none; }

/* ══ PRINT (ufc_gnn-vwoed) ══════════════════════════════════════════════════════════════════
   Product call, 2026-08-07: Ctrl+P on the static bout page produced something unreadable and "cropped".
   MEASURED with Playwright/Chromium at Letter + 0.4in margins and "Background graphics"
   UNCHECKED — Chrome's DEFAULT print settings, i.e. what a user actually gets. The findings and
   the reasoning behind every choice below:

   1. IT IS A CONTRAST BUG, NOT A LAYOUT ONE. `html.dark` is the DEFAULT theme (see
      seo/_theme-head.blade.php), so body computed to rgb(229,231,235) on rgb(3,7,18). With
      backgrounds off, the near-black page fill is simply not painted and that pale grey text
      lands on WHITE PAPER. Every heading, the model breakdown, the tables and the radar axis
      labels came out as ghosts.
   2. SO THE FIX IS THE TOKENS, NOT THE RULES. brand.css is fully token-driven and every
      seo/*.blade.php <style> consumes --fc-* via var(), so redefining the token set here fixes
      the contrast on EVERY static page in one place. Do NOT add per-rule print overrides for
      colour; find the token instead. The selector is `:root, html.dark` and this block is LAST
      in the file, so it beats the `html.dark` palette on source order at equal specificity.
   3. THERE IS NO HORIZONTAL CLIPPING — the "cropped" complaint was the page BREAKS, not width.
      .wrap (max-width:896px) reflows cleanly to the ~739px printable width. The overflow-x
      wrappers are pinned to visible below purely as insurance; the min-width values on
      .sf-table/.h2h-table are for the mobile SCREEN layout and must STAY.
   4. BACKGROUND-PAINTED MARKS CANNOT BE SAVED. `print-color-adjust: exact` does NOT override
      the "Background graphics" checkbox, so the per-model bars, the round-dot strip, the fan
      poll bar and the legend dots are unrecoverable when it is unchecked. They are HIDDEN
      rather than left as invisible gaps — every one of them has its number or its label
      rendered as text right beside it, so no information is lost. If a signal here ever has to
      survive on paper, re-express it as a FOREGROUND glyph/border, not a background. */
@media print {
  /* ── The token palette (the whole fix — see note 2) ───────────────────────────────────────
     Muted/subtle become REAL greys (#444/#666): the screen values (#cbd5e1/#9ca3af) are chosen
     against a near-black page and are ~1.2:1 on white. Accent/win/loss/emerald darken for the
     same reason — they are text colours here (links, the +EV edge column, the confidence
     number), not decoration. Every *-bg token goes transparent because backgrounds do not
     print anyway; leaving them coloured only risks a muddy tint for the minority who DO tick
     the box. */
  :root, html.dark {
    color-scheme: light;
    --fc-bg: #ffffff;
    --fc-text: #000000;
    --fc-heading: #000000;
    --fc-text-muted: #444444;
    --fc-text-subtle: #666666;
    --fc-card-bg: #ffffff;
    --fc-card-border: #bbbbbb;
    --fc-card-shadow: none;
    --fc-chip-bg: transparent;
    --fc-divider: #cccccc;
    --fc-accent: #4c1d95;
    --fc-accent-strong: #4c1d95;
    --fc-accent-hover: #4c1d95;
    --fc-cta-shadow: none;
    --fc-win: #065f46;
    --fc-loss: #991b1b;
    --fc-dot-pill: transparent;
    --fc-hover-bg: transparent;
    --fc-nav-bg: #ffffff;
    --fc-nav-border: #cccccc;
    --fc-nav-logo: #000000;
    --fc-nav-link: #333333;
    --fc-blue: #1e3a8a;
    --fc-emerald-bg: transparent;
    --fc-emerald-border: #047857;
    --fc-emerald-fg: #065f46;
    --fc-amber-bg: transparent;
    --fc-amber-border: #b45309;
    --fc-amber-fg: #92400e;
    --fc-gray-bg: transparent;
    --fc-gray-border: #999999;
    --fc-consensus-bg: transparent;
    --fc-consensus-border: #4338ca;
    --fc-consensus-fg: #3730a3;
  }

  @page { margin: 12mm; }
  html, body { background: #ffffff; }

  /* ── Chrome that has no business on paper ────────────────────────────────────────────────
     Ads: the banner slot carries a class, but the native/fixed units are bare <iframe
     title="Advertisement"> inside a plain wrapper div — hence the attribute selector plus the
     :has() on its wrapper, so the wrapper's 44px margin goes with it. (The Adsterra SOCIAL BAR
     injects unclassed body-level nodes from a third-party script and cannot be targeted from
     here; it is a fixed-position overlay, which Chrome does not paint into a print job anyway.)
     .fc-share / .fc-winner-share / .cta / .votecta are BUTTONS — white text on a background
     fill, i.e. invisible ink on paper even before you ask what tapping them would do. The ⓘ
     stat-help affordance goes for the same reason: its tooltip is unreachable in a print.
     .fc-export-btn (ufc_gnn-hu33k) joins them: it is an outline button rather than a filled one,
     so it WOULD print legibly — but printing "Export as Image" onto paper offers the reader an
     action they cannot take, and the sheet in their hand is already the export. */
  .fc-nav,
  .fc-footer,
  .fc-ad-banner,
  iframe[title="Advertisement"],
  .share-row,
  .fc-share,
  .fc-winner-share,
  .fc-export-btn,
  .cta,
  .votecta,
  .sh-b,
  .sh-t { display: none !important; }
  /* The ad iframes' wrapper div, so its 44px margin goes with the unit. KEPT AS ITS OWN RULE:
     a selector list is all-or-nothing, so folding an unsupported :has() into the list above
     would invalidate the whole thing and print the NAV again on any engine that lacks it. */
  div:has(> iframe[title="Advertisement"]) { display: none !important; }

  /* Background-painted marks (note 4). The percentages/labels beside them are text and stay. */
  .ens-side .bar,
  .fc-round-strip,
  .poll .pollbar,
  .fc-legend i { display: none !important; }
  /* With the bar gone the row is label + two numbers; centre each number under the fighter
     name that heads its column instead of leaving it hard against the vacated bar. */
  .ens-side { justify-content: center; }

  /* Insurance only (note 3): these wrappers are NOT overflowing at print width, but a scroll
     container that ever did would clip on paper rather than scroll. */
  .odds-wrap, .h2h-wrap, .sf-wrap, .tot-wrap, .edge-wrap { overflow: visible !important; }

  /* ── Page breaks ─────────────────────────────────────────────────────────────────────────
     The second half of that report: page 2 used to open with the orphaned BOTTOM BORDER of
     the Stats Model Prediction panel, and the H2H table split across three pages.
     `break-inside: avoid` keeps a panel whole wherever it fits on one page — which, measured, is
     every panel on this page EXCEPT head-to-head statistics. (Similar Fights fits because the
     printable width is ~739px and .sf-radar is `min-width: 768px`, so its ten per-cell radar
     thumbnails are not drawn on paper at all.) A panel taller than a sheet gets broken by Chrome
     whatever this says, so the panel's box chrome is dropped in print too: a border-TOP rule
     above the heading marks
     where a panel starts and can never be orphaned, where a full box guarantees a stray edge
     the moment a break happens inside it. Radius/shadow go with it — both are screen affordances
     that cost toner and say nothing on paper. */
  .fc-panel {
    break-inside: avoid;
    border: 0;
    border-top: 1px solid #bbbbbb;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 0 0;
    margin-bottom: 18px;
  }
  /* MEASURED EXCEPTION: the head-to-head statistics table is ~40 rows and runs past a full sheet
     on every bout, so `avoid` can never keep it whole — Chrome breaks it regardless and the only
     thing the rule buys is a near-empty page in front of it (it pushed Tale of the Tape onto a
     page of its own, costing a sheet). Let it flow: with the box chrome gone and `thead` repeating
     below, the break lands as a continued table with its column heads intact. */
  #p-stats { break-inside: auto; }
  .fc-panel > h2, .fc-panel-title, h1, h2, h3 { break-after: avoid; }
  tr, .ens-row, .ens-head, .fc-winner, .edge-kelly, .report-toc, .matchup-photos { break-inside: avoid; }
  /* Repeat the head of a table that does break, so the columns stay identifiable on page 2. */
  thead { display: table-header-group; }

  /* ── Foreground colours the tokens cannot reach ──────────────────────────────────────────
     SVG presentation attributes (fill="…") sit BELOW author CSS, so this recolours the radar /
     trajectory axis labels that static-fighter-charts.js baked at the dark theme's #e5e7eb.
     The charts' geometry is untouched: an SVG fill is not a CSS background, so the polygons
     and lines print fine with backgrounds off. */
  .fc-chart svg text, .sf-radar svg text { fill: #111111; }
  /* The two amber caveats on the bout page hardcode their colour and flip it on
     prefers-color-scheme: dark — which still matches in a print job on a dark-mode OS, i.e.
     #fcd34d on white. Pin them. (brand.css loads AFTER the page's <style>, so no !important.) */
  .fc-ls-pill, .fc-winner-newfighter { color: #92400e; }
  /* The teaser pill is white-on-emerald; on paper it needs its own outline to exist at all. */
  .fc-pill, .is-authed .fc-pill { background: transparent; color: #065f46; border: 1px solid #065f46; }

  /* The master header is clamp(28px, 6.4vw, 44px) — a whole inch of a Letter sheet for one
     kicker line. Halve it and reclaim the space for the report. */
  .report-master-head { font-size: 26px; margin-bottom: 10px; }

  /* Where this sheet came from (see .fc-print-url above). */
  .fc-print-url {
    display: block;
    text-align: center;
    margin: 2px 0 10px;
    font-size: 10px;
    color: #666666;
    word-break: break-all;
  }
}

/* ── Unit qualifier beside a stat name: "(Per Rnd)", "(Per Min)", … ──────────────────────────────
   Product call, 2026-08-09: "why dont we create a css class for this label and make it smaller as it appears
   in many places and doesnt need to be as prominent as the text it appears beside."

   Used on the Fight Intel Report's Performance Trends headings, the Similar Fights per-fight stat
   rows, and anywhere else a per-round qualifier sits next to a metric name.

   em-relative on purpose: the hosts differ in size (a 12px table cell, a chart heading, a 28px
   figure), so a fixed px would read as heavy in one place and invisible in another. Scaling with
   the parent keeps the same RATIO of emphasis everywhere, which is the actual intent.

   It also RESETS weight and letter-spacing rather than only shrinking: these labels are frequently
   inside a bold, uppercase, letter-spaced heading, and inheriting that is what makes a qualifier
   compete with the term it is qualifying.

   --fc-text-muted rather than a literal grey so it survives the @media print token overrides above
   (ufc_gnn-vwoed remaps muted to a printable #444; a hardcoded light grey would vanish on paper). */
.fc-unit {
  font-size: .78em;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fc-text-muted);
  white-space: nowrap;   /* "(Per Rnd)" must never break across two lines */
}