/*
  render-fight-night.css — the Fight Night Render layer
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-03
  ===========================================================================
  PG-035 (Demo / Showcase Page) scope only. Fires when data-theme="fight-night"
  on the document root. Fight Night is the sitemap-ruled DEFAULT for PG-035
  (BUP-SITEMAP-001 line 45: "Fight Night (default) + live skin switcher").

  FIDELITY-LOCKED 2026-07-09 per owner ruling ("the fight night skin needs to
  be explicitly one way... I gave y'all the explicit CSS and code for it") —
  do not alter values except from the two OFFICIAL sources below.

  CORRECTED 2026-07-10: an earlier pass in this same task briefly treated the
  http://beltup.online/ prelaunch splash page as authoritative; the owner
  corrected this ("a little bit off, but close" — NOT the authority) before
  any file was changed on that basis. The two ACTUAL official sources are:
    (1) N:\Source\BeltUpLLC\BeltUp.Online\BeltUp.Shared\wwwroot\FightNight.css
        and \BeltUp.Shared\ThemeStyles\FightNightTheme.css (legacy repo —
        note BeltUp.Online, not BeltUpOnline)
    (2) the live legacy site http://qa.beltup.online/ — css/ui-kit/variables.css,
        belt-colors.css, theme-pro.css (a DIFFERENT, non-Fight-Night skin —
        not used), components.css
  BeltUp.Web.Public\wwwroot\css\bu-skin-fightnight.css (same legacy repo) was
  also checked for values-only corroboration; its selector/templating
  structure remains ruled non-canonical and was never copied. Every value
  below is cited to a file:line/token from source (1) or (2); where the two
  official sources disagree, the conflict is flagged in-line rather than
  silently resolved.

  Token law (D-S07-NS-02 / D-S07-TOKEN-01/-02): --theme-* prefix only; no --bu-,
  no --vd-, no raw hex outside this Render file. Token NAMES match the existing
  greyscale render file's semantic set (render-greyscale-skeleton.css) so the
  switcher only ever changes the data-theme attribute, never markup or classes
  (D-S07-FW-01: structure never forks per skin).

  R-S7-10: Fight Night and Cobalt Dark are structurally identical siblings —
  this file only supplies Fight Night's token VALUES; no structural rule here
  differs from render-greyscale-skeleton.css's shape.

  NOT documented / NOT included: Cobalt Dark and Cobalt Light are NOT shipped
  as selectable render files here. BUP-UI-SKIN-001 gives Cobalt Dark only
  "approximately" values (no measured-ground-truth pass exists for it, unlike
  Fight Night's D-S7-05 bee task / BUP-UI-SKIN-003 measured section), and
  BUP-UI-SKIN-001 §Open Items S-3 states Cobalt Light values are "not yet
  defined anywhere." Per the build brief: never invent token values. See
  DemoSkinRegistry.cs for the switcher-side disabled/"coming soon" entries.
  ===========================================================================
*/

/* Self-hosted Orbitron display font — FightNight.css:146 'Orbitron', sans-serif (canonical),
   restored 2026-07-17 (grounding pack R4). Self-hosted only, no CDN (D-TPL no-CDN law); file
   at wwwroot/css/skins/fonts/, sibling to this skin's existing assets/ folder (same shipping
   convention already used for arena-bg.jpg below). UPDATE 2026-07-18 (walkthrough Tier A item):
   the binary Orbitron-800.woff2 is now present in the repo — fetched from Google Fonts
   (fonts.googleapis.com/fonts.gstatic.com, ExtraBold/800 static instance) and self-hosted here,
   no CDN reference added. Orbitron is SIL Open Font License 1.1 licensed (flagged for the
   orchestrator: fonts are not code dependencies under the repo's MIT/Apache posture, but OFL
   terms still apply to redistribution of the font file itself). font-display: swap plus the
   fallback stack on --theme-x-font-family-display still degrades safely to the system font
   stack for any host/build where the file is absent. */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  /* A WEIGHT RANGE, not a single weight: this is the variable font, so one file
     serves 400 (body), 700 (headlines) and 900 (the brand lockup) — the three
     weights the reference actually uses. Declaring a range is what lets the
     browser interpolate instead of synthesising a fake bold. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Orbitron-Variable.woff2') format('woff2');
}

/* The legacy static ExtraBold, kept so any rule still asking for exactly 800
   resolves to a real face rather than falling through to the variable one at a
   synthesised weight. Harmless if unused. */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Orbitron-800.woff2') format('woff2');
}

/* Rajdhani — the reference's BODY and NAVIGATION face, and the single biggest
   reason our port never matched. It was absent from this repo entirely, so every
   nav link, button label and paragraph fell back to -apple-system while the
   reference rendered Rajdhani. Measured live at qa.beltup.online 2026-08-23:
   document.fonts reports Rajdhani 500 and 700 loaded. */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Rajdhani-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Rajdhani-700.woff2') format('woff2');
}

:root[data-theme="fight-night"] {
  /* --- Surfaces -----------------------------------------------------------
     Canvas: FightNight.css:8 (--bg: #030403).
     Surface (card fill / "liquid glass"): FightNight.css:6 (rgba(255,255,255,0.04)).
     Elevated / glass-card fill: FightNight.css:302 (linear-gradient stops
     0.07 -> 0.02; using the stronger 0.07 stop as the flat elevated value,
     the closest single-value mapping the measured gradient supports).
     Border: FightNight.css:7 (rgba(255,255,255,0.12)). */
  --theme-bg-canvas: #030403;
  --theme-bg-surface: rgba(255, 255, 255, 0.04);
  --theme-bg-frosted: var(--theme-bg-surface); /* alias — dialect has no distinct frosted-fill token; §4.1 requires this name, value derived from bg-surface */
  --theme-bg-card: rgba(255, 255, 255, 0.07);
  --theme-x-bg-sunken: #030403;
  --theme-border-inactive: rgba(255, 255, 255, 0.12);
  --theme-border-active: #0047ab;

  /* --- Text roles -----------------------------------------------------------
     CORRECTED 2026-07-10 (owner source correction — prelaunch site was NOT
     authoritative; re-grounded against the two actual official sources):
     Primary text: FightNight.css:23 (body { color: white; }) + qa.beltup.online
     /css/ui-kit/variables.css --color-text: #ffffff. Two-source agreement:
     #ffffff (previously #f9fafb — an unsourced near-white estimate, now
     corrected).
     Secondary/muted text: FightNight.css uses #888 repeatedly for muted
     copy (lines 89, 280, 395, 581, 615, 695) + qa variables.css
     --color-muted: #888888 + bu-skin-fightnight.css (non-canonical
     structure, values-only corroboration) --fn-text-muted: #888888.
     Three-source agreement: #888888 (previously #9ca3af — an unsourced
     blue-grey estimate, now corrected).
     --theme-x-text-disabled: no value for a disabled-text hex exists in
     any of the three sources (FightNight.css, qa ui-kit, bu-skin-fightnight)
     — remains a NO-SOURCE gap, value left unchanged, do not invent. */
  --theme-text-main: #ffffff;
  --theme-x-text-secondary: #888888;
  --theme-text-muted: #888888;
  --theme-x-text-inverse: #030403;
  --theme-x-text-disabled: #6b7280; /* NO-SOURCE: no hex for disabled text in any of the 3 official/corroboration sources; left unchanged, not invented */

  /* --- Interactive states -----------------------------------------------
     Accent (cobalt): FightNight.css:4 (--cobalt: #0047AB).
     Accent hover/active: no distinct measured hover value exists; the
     Cobalt Rail border color (same #0047AB) is reused rather than inventing
     a new hex, consistent with "no partial skins" (D-S07-SKIN-02) requiring
     every token to be assigned. */
  --theme-accent-primary: #0047ab;
  --theme-accent-secondary: var(--theme-accent-primary); /* alias — no distinct secondary accent hue exists in sources; §4.1 requires this name */
  /* CORRECTED 2026-08-23. The prior note here claimed "no distinct measured hover
     value exists" — that was FALSE. theme-midnight-cobalt.css:141-145 defines
     .btn-tactical:hover / .login-btn:hover / .fight-secondary-btn:hover with
     border-color #0096ff — a real, measured electric-blue hover hue one step
     brighter than the #0047AB rest state. Aliasing hover to the rest colour made
     every hover state a no-op.
     (Distinct from the brand lockup: #0096ff was rejected there by the owner on
     2026-08-21 as "weird light blue" for the STATIC wordmark. It is correct here,
     where it is what the reference actually uses for HOVER.) */
  --theme-x-accent-hover: #0096ff;
  --theme-x-accent-active: #0047ab;
  --theme-x-accent-disabled: rgba(0, 71, 171, 0.4);
  --theme-x-accent-text: #ffffff; /* CORRECTED 2026-07-10: FightNight.css:156 (button text "color: #fff !important") + qa variables.css --color-text: #ffffff. Was #f9fafb (unsourced). */
  --theme-x-focus-ring: #0047ab;

  /* --- Feedback colors ----------------------------------------------------
     CORRECTED 2026-07-10 (owner source correction — re-grounded against
     the two actual official sources instead of the prelaunch site):
     --theme-state-warning and --theme-state-error now have real values
     from qa.beltup.online/css/ui-kit/variables.css (--color-warning:
     #fbbf24, --color-danger: #ef4444) — FightNight.css itself does not
     define a warning/danger hex, so there is no cross-source conflict for
     these two; adopting the qa ui-kit value is not an invention, it is the
     one official-source value that exists.
     --theme-x-state-info now uses qa variables.css --color-info: #4fa3ff,
     corroborated by FightNight.css:442's #4aa3ff progress-highlight color
     (same hue family, same official source #1 file).
     --theme-state-healthy is an OPEN CONFLICT, left UNCHANGED: FightNight.css
     (official #1) uses #00ff88 for its live/success glow element (line 1164,
     text-shadow rgba(0,255,136,0.2)) while qa variables.css (official #2)
     declares --color-success: #20CC0E — the two actual official sources
     disagree with each other on this hex. Per the source-correction brief:
     "where the two official sources disagree, flag the conflict — do not
     pick silently." Not resolved here; needs owner adjudication before any
     value is applied. (bu-skin-fightnight.css, non-canonical/dead-code,
     adds a third candidate #00E676 for its analogous --fn-neon-green,
     recorded for completeness, not used as a tiebreaker.) */
  --theme-state-healthy: #20CC0E; /* RESOLVED by owner 2026-07-09: qa.beltup.online IS the source of truth where officials disagree - ui-kit value wins (the green of the live "LOW" churn tile) */
  --theme-state-warning: #fbbf24;
  --theme-state-error: #ef4444;
  --theme-x-state-info: #4fa3ff;

  /* --- Elevation / glass effects ------------------------------------------
     Card backdrop-filter: FightNight.css:326 (.fight-card blur(25px)).
     Glow: FightNight.css:5 (--cobalt-glow: rgba(0,71,171,0.5)).
     Glass tint reuses the measured card fill (FightNight.css:6, 0.04) rather
     than the button fill (FightNight.css:133, 0.15) — .bu-panel maps to the
     card element, not the button element, in the measured table. */
  --theme-x-elevation-1: 0 8px 32px rgba(0, 0, 0, 0.5); /* CORRECTED 2026-07-19 (Fight Night fidelity-gap build slice, panel glass audit item 2): LEGACY-bu-skin-fightnight.css.txt:37-40 (.bu-slab/.bu-hud-header/.bu-nav-dock panel depth shadow) — was 0 1px 2px rgba(0,0,0,0.4), a shallow value that did not match the measured legacy panel depth. --theme-backdrop-blur (25px, FightNight.css:326) is a separately-cited legacy value for a different component (.fight-card) and is left unchanged — not the same drift, no conflict. */
  --theme-x-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --theme-x-elevation-3: 0 0 20px rgba(0, 71, 171, 0.5);
  --theme-accent-glow: 0 0 20px rgba(0, 71, 171, 0.5); /* derived — same glow value as --theme-x-elevation-3 (measured/authored glow shadow); §4.1 requires this name */
  --theme-accent-glow-secondary: 0 0 20px rgba(0, 71, 171, 0.5); /* derived — no distinct secondary glow exists in sources; aliased to primary glow value */
  --theme-glow: rgba(0, 71, 171, 0.6); /* NEW 2026-07-19 (Fight Night fidelity-gap build slice, item 1c): LEGACY-bu-skin-fightnight.css.txt:10 --fn-cobalt-glow: rgba(0,71,171,.6) — bare glow COLOR token (distinct from the preset --theme-accent-glow box-shadow value above), used by the .bu-btn rest/hover glow escalation and the .bu-gauge svg .fg drop-shadow below. */
  --theme-x-glass-tint: rgba(255, 255, 255, 0.04);
  --theme-backdrop-blur: 25px;

  /* --- Spacing / typography scale -----------------------------------------
     CORRECTED 2026-08-23 (owner: "we gotta fix the Fight Night skin, it's not
     what it's supposed to be").

     The previous note here declined to assert Rajdhani because the MEASURED
     GROUND TRUTH section measured only colour/blur/opacity, never fonts. That
     was careful about documentation fidelity and wrong about visual fidelity:
     the result was that every nav link, button and paragraph rendered in
     -apple-system while the reference rendered Rajdhani, and no amount of
     colour-token work could ever close that gap.

     The families below are now asserted from DIRECT MEASUREMENT of the running
     reference at qa.beltup.online (2026-08-23), which is stronger evidence than
     the absence of a line in a doc:
       variables.css:10  --font-family-sans:    'Rajdhani', 'Segoe UI', system-ui
       variables.css:11  --font-family-display: 'Orbitron', 'Rajdhani'
       document.fonts:   Orbitron 400/700/900 and Rajdhani 500/700, all loaded.
     The system stack stays on the end of each list, so a host missing the files
     still degrades safely instead of rendering nothing. */
  --theme-x-font-family-base: 'Rajdhani', 'Segoe UI', var(--structure-font-family);
  --theme-x-font-family-display: 'Orbitron', 'Rajdhani', var(--structure-font-family); /* FightNight.css:146/349/369 'Orbitron', sans-serif — restored 2026-07-17 (grounding pack R4); self-hosted only, see @font-face above */
  --theme-x-font-size-sm: 0.875rem;
  --theme-x-font-size-base: 1rem;
  --theme-x-font-size-lg: 1.25rem;
  --theme-x-font-size-xl: 1.75rem;
  --theme-x-line-height-base: 1.5;
  --theme-x-space-unit: 0.5rem;
}

/* Applies the token set to the page. Structural rules remain in the Primer;
   these rules mirror render-greyscale-skeleton.css's selector list 1:1 so
   Fight Night reuses the identical structural surface (D-S07-FW-01). */
:root[data-theme="fight-night"] body {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] a {
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] h1,
:root[data-theme="fight-night"] h2,
:root[data-theme="fight-night"] h3,
:root[data-theme="fight-night"] h4,
:root[data-theme="fight-night"] h5,
:root[data-theme="fight-night"] h6 {
  font-family: var(--theme-x-font-family-display); /* Orbitron — restored 2026-07-17 (grounding pack R4) */
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] p,
:root[data-theme="fight-night"] li {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="fight-night"] .bu-panel {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-1);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  color: var(--theme-text-main);
  overflow: hidden; /* clips the corner-notch triangle below to the panel edge */
}

/* THE CORNER NOTCH — verbatim FightNight.css:336-345 (.glass-card::before / .fight-card::before),
   restored 2026-07-17 (grounding pack R2). Registered trade-dress IP (BUP-LEG-IP "Magic Clip-Path"). */
:root[data-theme="fight-night"] .bu-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 35px;
  height: 35px;
  background: var(--theme-accent-primary);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

:root[data-theme="fight-night"] .bu-rail {
  background-color: rgba(3, 4, 3, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
  /* PANEL GLASS AUDIT — NEW 2026-07-19 (item 2): LEGACY-bu-skin-fightnight.css.txt:37-40 groups
     .bu-slab/.bu-hud-header/.bu-nav-dock under one blur(20px) + box-shadow depth recipe; .bu-rail
     already had the matching blur(20px) but was missing the depth-shadow half of the pair. */
  box-shadow: var(--theme-x-elevation-1);
}

:root[data-theme="fight-night"] .bu-soffit {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
  font-size: var(--structure-text-sm, 0.875rem);
}

:root[data-theme="fight-night"] .bu-soffit a {
  color: var(--theme-text-muted);
}

:root[data-theme="fight-night"] .bu-soffit a:hover {
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] .bu-brick {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="fight-night"] .bu-badge-tag {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] .bu-control {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] .bu-control:hover {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-text-inverse);
}

:root[data-theme="fight-night"] .bu-control:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* --- Buttons -----------------------------------------------------------
   Button fill uses the measured button glass recipe (FightNight.css:133,
   rgba(255,255,255,0.15)) — distinct from the card fill (0.04) per the
   measured doc's own "verdict per disputed value" section, which explains
   these are two different real values for two different elements, not a
   conflict to resolve down to one number. Cobalt Rails: FightNight.css:142-143. */
/* OWNER ORDER 2026-10-19 / GitHub #228 + #230 (every button the same shape as MEMBER LOG IN), applied to the
   Admin copy per REVIEW-CODE-W4 N1. The button carries NO clip-path (it would make a Chrome Backdrop Root and
   clip the focus outline); the wedge lives on ::before (fill) and ::after (cobalt rails, FightNight.css:142-143),
   both clipped with the fixed-px slant token (MEMBER LOG IN's measured 23px) instead of 10%/90%. No backdrop
   blur anywhere (Chrome does not clip a backdrop by clip-path). The outer cobalt glow (LEGACY-bu-skin-
   fightnight.css.txt:51-57) is dropped: unclipped, it would paint a rounded halo outside the wedge. */
:root[data-theme="fight-night"] .bu-btn {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  color: var(--theme-x-accent-text);
  font-family: var(--theme-x-font-family-display); /* Orbitron — restored 2026-07-17 (grounding pack R4) */
}

:root[data-theme="fight-night"] .bu-btn-secondary {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  color: var(--theme-text-main);
}

/* Padding clears the 23px slant (the Primer's 24px would leave the label touching it). */
:root[data-theme="fight-night"] .bu-btn,
:root[data-theme="fight-night"] .bu-btn-secondary {
  padding-left: 35px;
  padding-right: 35px;
}

:root[data-theme="fight-night"] .bu-btn::before,
:root[data-theme="fight-night"] .bu-btn::after,
:root[data-theme="fight-night"] .bu-btn-secondary::before,
:root[data-theme="fight-night"] .bu-btn-secondary::after {
  --bu-wedge-slant: 23px;
  content: "";
  position: absolute;
  inset: -2px 0;
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 0; /* the polygon defines the shape */
  /* THE WEDGE — FightNight.css:139 shape, now a FIXED 23px slant (#230, owner 2026-10-19; no longer the verbatim 10%/90%); -5px/+5px bleed keeps the rails unclipped. */
  clip-path: polygon(var(--bu-wedge-slant) -5px, 100% -5px, calc(100% - var(--bu-wedge-slant)) calc(100% + 5px), 0 calc(100% + 5px));
}

:root[data-theme="fight-night"] .bu-btn::before {
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color 150ms ease;
}

:root[data-theme="fight-night"] .bu-btn-secondary::before {
  /* Owner 2026-10-19 (eb6573a screenshot): a transparent fill left only two floating rails, so the wedge did not read. Light glass fill, one step quieter than the primary (0.15). */
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 150ms ease;
}

:root[data-theme="fight-night"] .bu-btn::after,
:root[data-theme="fight-night"] .bu-btn-secondary::after {
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  transition: border-color 150ms ease;
}

:root[data-theme="fight-night"] .bu-btn:hover::before {
  background-color: rgba(255, 255, 255, 0.22);
}

:root[data-theme="fight-night"] .bu-btn:hover::after,
:root[data-theme="fight-night"] .bu-btn-secondary:hover::after {
  border-top-color: var(--theme-x-accent-hover);
  border-bottom-color: var(--theme-x-accent-hover);
}

:root[data-theme="fight-night"] .bu-btn:disabled {
  color: var(--theme-x-text-disabled);
}

:root[data-theme="fight-night"] .bu-btn:disabled::before {
  background-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="fight-night"] .bu-btn:disabled::after {
  border-top-color: var(--theme-x-accent-disabled);
  border-bottom-color: var(--theme-x-accent-disabled);
}

:root[data-theme="fight-night"] .bu-btn-secondary:hover::before {
  background-color: rgba(255, 255, 255, 0.18);
}

:root[data-theme="fight-night"] .bu-btn-secondary:hover {
  color: var(--theme-x-accent-hover);
}

/* PG-035 demo skin switcher active-selection state (D-S07-SKIN-02 switcher UI). */
:root[data-theme="fight-night"] .bu-btn-secondary:disabled::before {
  background-color: rgba(255, 255, 255, 0.04);
}

:root[data-theme="fight-night"] .bu-btn-secondary.is-active {
  color: var(--theme-x-accent-text);
}

:root[data-theme="fight-night"] .bu-btn-secondary.is-active::before {
  background-color: var(--theme-accent-primary);
}

:root[data-theme="fight-night"] .bu-btn-secondary.is-active::after {
  border-top-color: var(--theme-accent-primary);
  border-bottom-color: var(--theme-accent-primary);
}

:root[data-theme="fight-night"] .bu-btn:focus-visible,
:root[data-theme="fight-night"] .bu-btn-secondary:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 2px;
}

/* OWNER ORDER 2026-10-19 / GitHub #231 ("Secure home work and a video player on the side but now its just a black
   arrow"): the Tonight's Assignment media frame was never ported to Fight Night. Values verbatim from the reference
   N:\Source\BeltUp.Online\BeltUp.Shared\wwwroot\index.html:111-114 (frame 180x110, rgba(0,0,0,0.5), 1px
   var(--border) -> our inactive border token; play circle 50x50, rgba(0,71,171,0.8), 50%, 0 0 15px
   rgba(0,71,171,0.5), padding-left 5px optical centring; play glyph white). */
:root[data-theme="fight-night"] .bu-media-frame {
  width: 180px;
  height: 110px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="fight-night"] .bu-play-circle {
  width: 50px;
  height: 50px;
  background-color: rgba(0, 71, 171, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 71, 171, 0.5);
  padding-left: 5px;
}

:root[data-theme="fight-night"] .bu-play-icon {
  fill: #ffffff;
}

:root[data-theme="fight-night"] .bu-gate {
  background-color: var(--theme-x-glass-tint);
  backdrop-filter: blur(var(--theme-backdrop-blur));
}

/* SCENE LAYER (owner order 2026-07-09): the arena background is part of the TRUE
   Fight Night (source of truth: qa.beltup.online hero; asset ported verbatim from
   the legacy BeltUp.Online repo BeltUp.Shared/wwwroot/images/arena-bg.jpg). Applies
   only under this skin - the primer stays scene-free. Fixed + cover so panels float
   over the arena per the frosted-glass direction (BUP-UI-SCENE-001). */
[data-theme="fight-night"] body {
  /* Scene moved OFF body to its own fixed layer below; background-color is left to
     the token rule earlier in this file (var(--theme-bg-canvas) = #030403), which
     matches the reference --bg (theme-midnight-cobalt.css:8) and already
     outspecifies this block — the old literal #0a0a0f was dead code. */
  background-image: none;
}

/* THE SCENE — the missing HALF of the recipe, restored 2026-08-23.
   Reference theme-midnight-cobalt.css:39-46 grades the arena with
   `filter: brightness(0.4) saturate(0.8)` on a dedicated fixed layer. We ported the
   gradient and the image but never the filter, so our arena rendered at full
   brightness and saturation against the reference's moody 40%.

   On a pseudo-element, not body: the reference's own .arena-viewport element is
   rendered by no markup in this repo, and a filter on body would grade all page
   content and break position:fixed descendants by creating a containing block.
   Also corrects background-position center top -> center center (ref line 42). */
[data-theme="fight-night"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 4, 3, 0.85) 0%, transparent 40%, rgba(3, 4, 3, 0.85) 100%),
    url("assets/arena-bg.jpg") no-repeat center center;
  background-size: cover;
  filter: brightness(0.4) saturate(0.8);
}

/* --- Gauge-rotation drift repair (2026-07-18 walkthrough Tier A item) -------------
   .bu-gauge rotation existed ONLY in the Student host's copy of this file (this file
   had no .bu-gauge rules at all — VelocityGauge.razor renders .bu-gauge here too).
   Copied verbatim from BeltUp.Components.Student/wwwroot/css/skins/render-fight-
   night.css (THE ROTATION — verbatim FightNight.css:655 .fight-gauge svg, restored
   2026-07-17 grounding pack R3) — same selectors, same values, no new tokens. The
   companion .fight-gauge-ring 45deg accent (FightNight.css:389) has no corresponding
   selector in current markup here either — not restored, matching the Student file's
   own note. */
:root[data-theme="fight-night"] .bu-gauge svg {
  transform: rotate(-90deg);
}

:root[data-theme="fight-night"] .bu-gauge svg .bg {
  stroke: var(--theme-border-inactive);
}

:root[data-theme="fight-night"] .bu-gauge svg .fg {
  stroke: var(--theme-accent-primary);
  /* GLOW ICON/GAUGE — NEW 2026-07-19 (item 1a): LEGACY-bu-skin-fightnight.css.txt:88-90
     .slat-visual svg circle.fg { filter: drop-shadow(0 0 5px var(--fn-cobalt-glow)); } — closest
     existing SVG progress-ring selector to port onto; LEGACY-bu-skin-fightnight.css.txt:78-79's
     .bu-node-svg 8px treatment has no corresponding selector rendered by any host currently, so it
     is not ported here (would require inventing a new selector/markup hook — out of this Render-only
     slice's scope). */
  filter: drop-shadow(0 0 5px var(--theme-glow));
}

/* Brand lockup accent: the "UP" half of BELT|UP carries the accent hue, the
   rest inherits .bu-nav-brand's text colour. Uniform across every skin per
   D-S07-SKIN-02 (no partial-skin fallthrough) — added 2026-08-21 when an audit
   found this styled in only 2 of 20 skins. Uses the standard accent token, NOT
   the lighter hover tone. */
:root[data-theme="fight-night"] .bu-nav-brand span {
  color: var(--theme-accent-primary);
}

/* ===========================================================================
   TYPE APPLICATION — Fight Night fidelity pass, 2026-08-23
   ===========================================================================
   The font tokens above were DECLARED but never CONSUMED: the only occurrence of
   --theme-x-font-family-base in this file was its own definition, while the
   Primer's `body { font-family: var(--structure-font-family) }` kept the system
   stack. So the skin's typography never reached the page, and no amount of
   colour work could close the gap the owner was seeing.

   Every rule here is transcribed from the owner's reference site
   (qa.beltup.online), whose stylesheets are archived under
   artifacts/fightnight-reference/. Their class names are mapped onto our Primer
   vocabulary; the VALUES are theirs, not invented.
   =========================================================================== */

/* layout.css:8 + theme-midnight-cobalt.css — body is Rajdhani, not the system stack. */
:root[data-theme="fight-night"] body {
  font-family: var(--theme-x-font-family-base);
}

/* layout.css:29 — display face on every heading, with the reference's own
   negative tracking. (-0.01em is what produced the measured -0.72px at 72px.) */
:root[data-theme="fight-night"] h1,
:root[data-theme="fight-night"] h2,
:root[data-theme="fight-night"] h3,
:root[data-theme="fight-night"] h4,
:root[data-theme="fight-night"] h5,
:root[data-theme="fight-night"] h6 {
  font-family: var(--theme-x-font-family-display);
  letter-spacing: -0.01em;
}

/* The signature: the headline GLOWS cobalt. Measured live on the reference as
   text-shadow: rgb(0,71,171) 0 0 30px. Its absence was the single most visible
   difference between our port and the real thing. */
:root[data-theme="fight-night"] h1 {
  text-shadow: 0 0 30px var(--theme-accent-primary);
}

/* theme-midnight-cobalt.css .logo — Orbitron 900 at 1.8rem with 3px tracking.
   Ours rendered in a system font at 18px, which is why the brand never read
   right. `.logo span` is cobalt there; our lockup's accent half already uses
   --theme-accent-primary via the shared `.bu-nav-brand span` rule, so the split
   is preserved without restating it. */
:root[data-theme="fight-night"] .bu-nav-brand {
  font-family: var(--theme-x-font-family-display);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 3px;
}

/* The ONLINE suffix is ours, not the legacy reference's (owner ruling
   2026-08-21). Typeset to sit with the lockup rather than compete with it. */
:root[data-theme="fight-night"] .bu-nav-brand-suffix {
  font-weight: 500;
  letter-spacing: 0.28em;
}

/* Navigation is body face, not display — reference nav links measure Rajdhani
   700 at 12.8px with 1px tracking. */
:root[data-theme="fight-night"] .bu-nav-links a {
  font-family: var(--theme-x-font-family-base);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* theme-midnight-cobalt.css .btn-tactical/.login-btn/.fight-secondary-btn —
   Orbitron 800, UPPERCASE, 2px tracking. Ours was Orbitron 500 at 16px with no
   tracking and no uppercase, which is why the buttons read as generic. */
:root[data-theme="fight-night"] .bu-btn,
:root[data-theme="fight-night"] .bu-btn-secondary {
  font-family: var(--theme-x-font-family-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* theme-midnight-cobalt.css .fight-kicker — the hero eyebrow. Cobalt, Orbitron,
   and 12px of tracking: an enormous, deliberate value that is most of the
   effect. Ours rendered grey, in a system font, at 4px. */
:root[data-theme="fight-night"] .bu-hero-label {
  font-family: var(--theme-x-font-family-display);
  color: var(--theme-accent-primary);
  font-size: 0.8rem;
  letter-spacing: 12px;
  text-transform: uppercase;
}

/* theme-midnight-cobalt.css .label */
:root[data-theme="fight-night"] .bu-metric-label,
:root[data-theme="fight-night"] .bu-badge-tag {
  font-family: var(--theme-x-font-family-display);
  font-size: 0.75rem;
  letter-spacing: 3px;
}

/* theme-midnight-cobalt.css .stat-value / .fight-stat-value — big Orbitron
   numerals that glow. The glow uses the reference's own --cobalt-glow value,
   rgba(0,71,171,0.5), which this skin already carries as --theme-accent-glow. */
:root[data-theme="fight-night"] .bu-metric-value {
  font-family: var(--theme-x-font-family-display);
  text-shadow: 0 0 20px rgba(0, 71, 171, 0.5);
}

/* theme-midnight-cobalt.css .fight-hero__content h1 —
   font-size: clamp(2.5rem, 6vw, 4.5rem). Ours capped lower and rendered 60px
   against the reference's 72px at desktop width, which is most of why the hero
   read smaller and less confident than the real thing. line-height stays
   `normal` to match the reference's measured value rather than the Primer's
   tighter default. */
:root[data-theme="fight-night"] .bu-hero-headline,
:root[data-theme="fight-night"] .bu-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: normal;
}

/* ===========================================================================
   FORM CONTROLS — components.css:123-133 / :163-169
   ===========================================================================
   This skin styled NO input, select or textarea at all. The Primer sets
   border-width/style but deliberately no colour (colour is the render layer's
   job), so border-color fell through to its CSS initial value `currentcolor`,
   which under this skin is --theme-text-main — pure WHITE. Every field on every
   Fight Night page was drawing a hard white box on near-black, and every field
   background stayed transparent. Nothing in the skin was wrong; the rules simply
   did not exist.
   =========================================================================== */
:root[data-theme="fight-night"] .bu-field input[type="text"],
:root[data-theme="fight-night"] .bu-field input[type="email"],
:root[data-theme="fight-night"] .bu-field input[type="tel"],
:root[data-theme="fight-night"] .bu-field input[type="password"],
:root[data-theme="fight-night"] .bu-field input[type="number"],
:root[data-theme="fight-night"] .bu-field input[type="date"],
:root[data-theme="fight-night"] .bu-field select,
:root[data-theme="fight-night"] .bu-field textarea,
:root[data-theme="fight-night"] input.bu-input,
:root[data-theme="fight-night"] select.bu-input,
:root[data-theme="fight-night"] textarea.bu-input {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] .bu-field label {
  color: var(--theme-x-text-secondary);
}

/* Open dropdown list (#232): the UA draws option rows on white; give each a solid
   canvas so --theme-text-main stays readable (mirrors render-executive-blue.css). */
:root[data-theme="fight-night"] .bu-field select option,
:root[data-theme="fight-night"] select.bu-input option {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

:root[data-theme="fight-night"] .bu-field select option:disabled,
:root[data-theme="fight-night"] select.bu-input option:disabled {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="fight-night"] .bu-field input:focus-visible,
:root[data-theme="fight-night"] .bu-field select:focus-visible,
:root[data-theme="fight-night"] .bu-field textarea:focus-visible,
:root[data-theme="fight-night"] .bu-input:focus-visible {
  outline: 2px solid var(--theme-x-focus-ring);
  outline-offset: 1px;
  border-color: var(--theme-accent-primary);
}

:root[data-theme="fight-night"] .bu-field-error {
  color: var(--theme-state-error);
}

/* ===========================================================================
   HEADING SCALE FOR A DISPLAY FACE (2026-08-23)
   ===========================================================================
   The Primer's type scale (h2 = 2.25rem, h3 = 1.75rem) is calibrated for a
   SYSTEM font. Orbitron is a wide, geometric display face: at identical pixel
   sizes it reads far larger and consumes far more width, so panel headings
   rendered at 36px and blew the dashboard out — the heading dominated every
   card it sat in.

   The reference agrees: its card headings top out at 2rem for a feature card
   (theme-midnight-cobalt.css .fight-card--path h3) and most are much smaller
   (.footer-col h4 = 0.8rem, .label = 0.75rem). It never puts 36px Orbitron on a
   card title.

   So the skin rescales what it restyles. .bu-hero-headline is deliberately NOT
   included — the marketing hero keeps its clamp(2.5rem, 6vw, 4.5rem), which is
   the reference's own value and correct at 72px.
   =========================================================================== */
:root[data-theme="fight-night"] h1 { font-size: 1.75rem; }
:root[data-theme="fight-night"] h2 { font-size: 1.375rem; }
:root[data-theme="fight-night"] h3 { font-size: 1.125rem; }
:root[data-theme="fight-night"] h4,
:root[data-theme="fight-night"] h5,
:root[data-theme="fight-night"] h6 { font-size: 1rem; }

/* The hero headline is exempt: it carries the reference's own clamp and must
   not be dragged down by the h1 rule above. Restated at higher specificity so
   source order cannot decide it. */
:root[data-theme="fight-night"].bu-hero-headline,
:root[data-theme="fight-night"] .bu-hero-headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}