/*
  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;
  /* CORRECTED 2026-08-23 (fn-findings #30): the reference has TWO distinct greys, not one —
     #aaa for the bright-dim role (theme-midnight-cobalt.css:86 nav links, :234 hero lede) and
     #888 for the muted role (variables.css:70 --color-muted; theme-midnight-cobalt.css:253,
     :368, :508, :622). This token is repurposed to the BRIGHT role; the muted role stays on
     --theme-text-muted below, unchanged. */
  --theme-x-text-secondary: #aaaaaa;
  --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.5); /* CORRECTED 2026-08-23 (fn-findings #14): was 0.6, sourced
     from the non-canonical LEGACY-bu-skin-fightnight.css.txt:10, which contradicts both official
     sources — theme-midnight-cobalt.css:5 (--cobalt-glow) and variables.css:76 (--glow-accent)
     agree on 0.5. rgba(0,71,171,0.6) remains valid ONLY as a literal panel-hover BORDER colour
     (theme-midnight-cobalt.css:291) — not purged, just not aliased to this token. */
  --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 {
  /* fn-findings #30: repointed from --theme-x-text-secondary (now the BRIGHT #aaa role) to
     --theme-text-muted (#888, unchanged) — theme-midnight-cobalt.css:368 (.fight-card p/li). */
  color: var(--theme-text-muted);
}

:root[data-theme="fight-night"] .bu-panel {
  background-color: var(--theme-bg-surface);
  /* fn-findings #18/#33: the 2px cobalt top/bottom rails deleted here belonged to the BUTTON
     recipe (theme-midnight-cobalt.css:128-131), not the card. Reference cards carry ONE neutral
     1px frame on all four sides (.fight-card border, theme-midnight-cobalt.css:300, --border
     token :7 == our --theme-border-inactive) — kept below, unchanged. */
  border: 1px solid var(--theme-border-inactive);
  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 */
  /* fn-findings #11/#34: theme-midnight-cobalt.css:285 (.glass-card transition), so the hover
     recipe below eases instead of snapping. */
  transition: background-image 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* fn-findings #11/#34: theme-midnight-cobalt.css:288-294 (.glass-card:hover). background-image,
   not the reference's `background` shorthand, so the base background-color above survives
   underneath. border-color is a LITERAL 0.6 (not var(--theme-glow), now 0.5 per finding #14) —
   the reference uses two different alphas of the same hue for two different roles. */
:root[data-theme="fight-night"] .bu-panel:hover,
:root[data-theme="fight-night"] .bu-panel:focus-within {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 71, 171, 0.12) 100%);
  border-color: rgba(0, 71, 171, 0.6);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 71, 171, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="fight-night"] .bu-panel:hover,
  :root[data-theme="fight-night"] .bu-panel:focus-within {
    transform: none;
  }
}

/* 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);
  /* fn-findings #15: box-shadow removed 2026-08-23. theme-midnight-cobalt.css:48-62 (header,
     .bu-header) declares NO box-shadow in either the desktop or the :840-848 mobile override —
     the header is separated from the page by its 1px border-bottom and blur(20px) alone. The
     prior box-shadow here traced only to the non-canonical LEGACY-bu-skin-fightnight.css.txt:37-40,
     which never listed .bu-rail among its selectors. */
}

: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 {
  /* fn-findings #30: repointed to --theme-text-muted, same reasoning as p/li above. */
  color: var(--theme-text-muted);
}

: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 ("the clipping is off") + REVIEW-CODE-228. The button
   itself carries NO clip-path: clip-path makes an element a Chrome Backdrop Root, which starves a
   child's backdrop-filter of the page behind it (flat tint, no blur). So the wedge lives on two
   pseudo layers instead: ::before = glass (0.15 fill, inset sheen —
   theme-midnight-cobalt.css:119-123; its blur(15px) was REMOVED 2026-10-19 under #228 because Chrome
   paints a backdrop outside clip-path; pending owner confirmation), ::after = the cobalt top/bottom rails (FightNight.css:142-143).
   Both use the FightNight.css:139 wedge with a FIXED 23px slant (--bu-wedge-slant, #230, owner 2026-10-19; no longer the verbatim 10%/90%) and inset:-2px 0 so the rails sit exactly where the
   2px borders were (the borders stay, transparent, to keep the box height). Chrome applies a
   backdrop-filter to the whole rounded rectangle and ignored the old combined clip, which painted a
   dark box outside the slant. Side effect: the focus-visible outline is no longer clipped.
   The Admin copy carries the same wedge structure (applied 2026-10-19, #230 / REVIEW-CODE-W4 N1). */
:root[data-theme="fight-night"] .bu-btn {
  position: relative;
  isolation: isolate;
  background: transparent; /* a <button> would otherwise paint the UA fill over its whole rounded box */
  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) */
  /* Outer cobalt glow (LEGACY-bu-skin-fightnight.css.txt:51) REMOVED 2026-10-19 (#228 round 2): the old clip-path hid it; with the button unclipped it would paint a rounded halo outside the wedge. */
}

: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 {
  /* #230 (owner 2026-10-19 13:19: every button the same shape as MEMBER LOG IN): ONE fixed slant, MEMBER LOG IN's
     measured 23px, replacing 10%/90% (which made the angle scale with each button's width, 11px..26px). */
  --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; a rounded box can only add corners */
  /* THE WEDGE — FightNight.css:139 shape, slant converted from 10% to the fixed token (#230); the -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);
  /* Round 3 (owner screenshot 2026-10-19 12:56, #228): blur(15px) backdrop REMOVED. Chrome does not clip a backdrop by clip-path, so a lighter strip showed past the slant; visually it read as a flat tint over the dark arena anyway. */
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
  transition: background-color 150ms ease;
}

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

/* hover: fill 0.25 (theme-midnight-cobalt.css:142), rails to --theme-x-accent-hover (#0096ff),
   translateY(-2px) (theme-midnight-cobalt.css:143). Fill and rails now live on the pseudo layers. */
:root[data-theme="fight-night"] .bu-btn:hover {
  transform: translateY(-2px);
}

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

:root[data-theme="fight-night"] .bu-btn: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 {
  /* #230: TOUR THE HUD takes the same wedge structure as .bu-btn (unclipped button, pseudo layers,
     background transparent, no backdrop blur - see #228). Fill transparent at rest, rails cobalt. */
  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);
}

: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);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05); /* fn-findings #13 sheen (theme-midnight-cobalt.css:121-123), blur dropped per #228 */
  transition: background-color 150ms ease;
}

: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-secondary:hover {
  /* fn-findings #36: text stays WHITE in every state (theme-midnight-cobalt.css:132); fill brightens
     (:142) on ::before and the rails resolve to #0096ff via --theme-x-accent-hover. */
  color: var(--theme-text-main);
}

: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::after {
  border-top-color: var(--theme-x-accent-hover);
  border-bottom-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 {
  /* The scene moved OFF body to its own fixed layer below, so the image is
     cleared here. background-color is left to the token rule earlier in this file
     (var(--theme-bg-canvas) = #030403), which matches the reference's --bg at
     theme-midnight-cobalt.css:8 and already outspecifies this block — the old
     literal #0a0a0f was dead code and is gone. */
  background-image: none;
}

/* THE SCENE — the missing HALF of the recipe, restored 2026-08-23.
   Reference: theme-midnight-cobalt.css:39-46
     .arena-viewport { position: fixed; inset: 0;
       background: linear-gradient(...), url('/images/arena-bg.jpg') no-repeat center center;
       background-size: cover; z-index: -1;
       filter: brightness(0.4) saturate(0.8); }

   We ported the gradient and the image but never the `filter`, so our arena
   rendered at FULL brightness and saturation while the reference's is graded down
   to 40% brightness. That single missing declaration is why our hero looked washed
   and busy against the reference's moody one, and why text over it needed help.

   It lives on a pseudo-element rather than on body for two reasons: the reference's
   own .arena-viewport element is rendered by no markup in this repo (zero hits
   across .razor/.html/.cshtml), and a `filter` on body would grade every piece of
   page content, not just the scene — and would break position:fixed descendants by
   creating a containing block.

   Also corrects background-position from our `center top` to the reference's
   `center center` (ref line 42) — a deliberate second change, declared rather than
   slipped in. */
[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 {
  /* fn-findings #22/#37: the reference hard-codes the gauge track at 0.05 and does not reuse its
     own --border token (0.12, theme-midnight-cobalt.css:585-589 .fight-gauge__track) — a
     deliberate distinction our token collapsed. */
  stroke: rgba(255, 255, 255, 0.05);
}

: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);
}

/* --- Footer band -----------------------------------------------------------
   Ported 2026-08-21 to close a partial-skin fallthrough: this family was
   coloured in only 1 of 20 Public skins, so the footer rendered untinted and
   dividerless in every other skin (D-S07-SKIN-02). Token-for-token identical to
   render-greyscale-skeleton.css — no new values invented; each token resolves
   to this skin's own palette. */
:root[data-theme="fight-night"] .bu-footer {
  /* theme-midnight-cobalt.css:478 — footer, .bu-footer { background: rgba(3,4,3,.98) }.
     A 98%-opaque near-black band, NOT a 4%-white wash. The previous value was a
     lightening tint that did nothing over the arena photo, which is why a
     frosted-glass override was bolted on above; with the reference's real value the
     band is legible on its own and that override is deleted. */
  background-color: rgba(3, 4, 3, 0.98);
  /* theme-midnight-cobalt.css:479 — 1px, not 2px. */
  border-top: 1px solid var(--theme-border-inactive);
}

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

:root[data-theme="fight-night"] .bu-footer-copyright {
  border-top: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-muted);
}

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

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

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


/* ===========================================================================
   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"] .bu-hero-headline,
:root[data-theme="fight-night"] .bu-hero h1 {
  /* fn-findings #2: scoped to the hero heading only (theme-midnight-cobalt.css:230,
     .fight-hero__content h1) — a bare `h1` selector would glow every page-title and card heading
     in the document, which the reference never does. */
  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;
  /* fn-findings #4: the Primer (bento-grid.css:413) forces uppercase; the reference never does,
     on any nav-link selector, in any reference stylesheet. Overridden here, not in the Primer —
     the other skins rely on the Primer default. */
  text-transform: none;
  /* fn-findings #31: color: #aaa (theme-midnight-cobalt.css:86) — reuses --theme-x-text-secondary,
     which fn-findings #30 repointed to the same #aaaaaa bright-dim role, rather than minting a
     second token for an identical value. */
  color: var(--theme-x-text-secondary);
  transition: color 0.3s;
}

:root[data-theme="fight-night"] .bu-nav-links a:hover,
:root[data-theme="fight-night"] .bu-nav-links a.active {
  /* fn-findings #31: hover/active whiten (theme-midnight-cobalt.css:94-100). No .active class is
     emitted by NavMenu.razor today — not restored, not invented; the selector is here for parity. */
  color: var(--theme-text-main);
}

/* 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;
}

/* fn-findings #21: padding/min-height/centering — theme-midnight-cobalt.css:106-115. The 35px
   horizontal padding is required by the clip-path wedge above: at the Primer's 24px the slant
   clips the label. min-height 50px clears the 44px a11y floor with room to spare; line-height 1
   replaces the Primer's 44px-derived calc, which would otherwise mis-centre the label once the
   padding changes. */
:root[data-theme="fight-night"] .bu-btn,
:root[data-theme="fight-night"] .bu-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 35px;
  min-height: 50px;
  line-height: 1;
  /* fn-findings #10/#19 step 3, kept in the RENDER layer per R-0823-01 (animation is a Render
     concern) rather than bento-grid.css: restates the Primer's own transition list
     (bento-grid.css:525) plus the transform/box-shadow this skin newly animates, so the hover
     lift and glass-recipe box-shadow ease instead of snapping. */
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease;
}

/* 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;
  /* fn-findings #6: NOT declared at theme-midnight-cobalt.css:205-212, so it computes to 400 (the
     Orbitron variable face's default) — must be restated or the Primer's font-weight:700
     (bento-grid.css:448) wins and the kicker renders bold instead of the reference's thin weight. */
  font-weight: 400;
  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;
}

/* ===========================================================================
   HERO FOLD + COLUMN — live-measured residuals (orchestrator, 2026-08-26,
   1280x720 viewport), slice F3
   ===========================================================================
   F3-FOLD: theme-midnight-cobalt.css:190-197 (.fight-hero) —
     display: flex !important; align-items: center; justify-content: center;
     text-align: center; min-height: 90vh; padding-top: 160px;
   text-align is already the Primer's own .bu-hero rule (bento-grid.css:442),
   not restated. Ours carried no min-height at all, so the hero region
   collapsed to its content height (measured 572px) instead of filling the
   first viewport the way the reference does (~720px at this window). No
   override exists for .fight-hero inside the reference's own
   @media(max-width:768px) block (theme-midnight-cobalt.css:792-911) — the
   90vh floor is not relaxed on phone there, so it is not relaxed here either.

   F3-COLUMN: theme-midnight-cobalt.css:199-203 (.fight-hero__content) —
     max-width: 900px; margin: 0 auto; margin-top: 5vh;
   margin-top: 5vh is deliberately NOT ported: the reference applies it to a
   dedicated inner .fight-hero__content wrapper nested inside .fight-hero,
   nudging the text block within space the outer element already opened up.
   Home.razor's markup has no such inner wrapper — label/h1/lede/actions are
   direct children of .bu-hero — so porting an unscoped 5vh top-margin here
   would stack on top of the padding-top above rather than reproduce anything
   measured; only the max-width/centering, which is what the live measurement
   (hero h1 box 1081px vs the reference's 900px) actually calls for, is
   applied. The 900px constraint lands on the outer .bu-hero itself — the only
   element that can cap the headline's rendered width without touching the
   hero h1's own font/max-width rules (out of scope this slice). Effect: the
   headline's containing block, not its own 18ch cap, becomes the binding
   constraint, narrowing the box to the reference's 900px.
   =========================================================================== */
:root[data-theme="fight-night"] .bu-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding-top: 160px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================================================
   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);
}

/* ===========================================================================
   REMAINING SELECTOR COVERAGE — fn-findings.json fidelity pass, 2026-08-23
   ===========================================================================
   D-S07-SKIN-02 parity: render-greyscale-skeleton.css already styles every
   selector below for this same host; Fight Night did not. */

/* fn-findings #7: theme-midnight-cobalt.css:612-617 (.fight-gauge__content strong). Weight is
   NOT restated: the reference element is a <strong>, whose UA-default bolder computes to 700 from
   an undeclared (400) body weight, and the Primer already supplies 700 (bento-grid.css:680). */
:root[data-theme="fight-night"] .bu-gauge-value {
  font-family: var(--theme-x-font-family-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--theme-text-main);
}

/* fn-findings #30: theme-midnight-cobalt.css:234 (.fight-hero__content p) — the bright-dim tier,
   not the muted one used by ordinary body copy.
   fn-findings F3-LEDE (live-measured residual, orchestrator 2026-08-26): theme-midnight-cobalt.css:233-239
   (.fight-hero__content p) — font-size: 1.2rem; line-height: 1.6; max-width: 800px. (color: #aaa
   at the same declaration is already covered by --theme-x-text-secondary above, not restated.)
   Ours inherited the Primer's --structure-text-md / --structure-leading-base / 60ch
   (bento-grid.css:463-468), measuring 18px / 27.9px / 561.6px against the reference's
   19.2px / 30.72px / 800px. */
:root[data-theme="fight-night"] .bu-hero-lede {
  color: var(--theme-x-text-secondary);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
}

/* fn-findings #32: every eyebrow/label in the reference is cobalt — theme-midnight-cobalt.css:155
   (.label), :207 (.fight-kicker), :325 (.label 2nd decl), :378 (.fight-gauge-summary .label-inline).
   .bu-hero-label is excluded — already coloured above. */
:root[data-theme="fight-night"] .bu-panel-sublabel,
:root[data-theme="fight-night"] .bu-corner-label,
:root[data-theme="fight-night"] .bu-pillar-label,
:root[data-theme="fight-night"] .bu-media-label,
:root[data-theme="fight-night"] .bu-command-label,
:root[data-theme="fight-night"] .bu-gauge-label {
  color: var(--theme-accent-primary);
}

/* fn-findings #12/#17/#35: theme-midnight-cobalt.css:628-640, the later (and therefore winning)
   of two .fight-skill-bar declarations. Track border deliberately NOT ported — border-width is
   Primer geometry (bento-grid.css:724-736 already sets height/radius), and adding it here would
   cross the Primer/Render split; raise as a separate bento-grid.css item if wanted. */
:root[data-theme="fight-night"] .bu-progress-track {
  background-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="fight-night"] .bu-track-hard {
  background-color: var(--theme-accent-primary);
  /* literal, not var(--theme-glow) (0.5) — theme-midnight-cobalt.css:639 hard-codes 0.5 here too,
     so they agree, but the literal keeps this rule correct even if the token's role changes. */
  box-shadow: 0 0 10px rgba(0, 71, 171, 0.5);
}

/* fn-findings #1: theme-midnight-cobalt.css:901, inside the @media (max-width: 768px) block
   opened at :792 — a hard mobile floor below the clamp's own 2.5rem minimum.
   FIND-A (audit 2026-08-26): a flat 2.2rem (35.2px) overflowed at the 390px Eyes
   viewport once real Orbitron rendered (measured content width 399px vs 390px
   viewport). Letter-spacing was tried and rejected: -0.01em already applies via
   the h1 rule at :625, and forcing `normal` made it WORSE (405px measured), so
   the fix is a viewport-relative floor instead. min(2.2rem, 8.6vw) keeps the
   2.2rem ceiling everywhere above ~390px but yields to 8.6vw below it — measured
   33.54px at 390px width, hero right edge 381px vs a 390px document, zero
   overflow. */
@media (max-width: 768px) {
  :root[data-theme="fight-night"] .bu-hero-headline,
  :root[data-theme="fight-night"] .bu-hero h1 {
    font-size: min(2.2rem, 8.6vw);
  }

  /* NO-SOURCE (archive silent): theme-midnight-cobalt.css's own max-width:768px block
     (:792-932) never touches .fight-kicker (:205-212, our .bu-hero-label equivalent) — no
     phone-specific rule exists to port. The reference's phone hero text (.fight-hero__content
     h1/p, :900-910) sits inside a plain block wrapper, so it wraps normally; the reference
     also carries an overflow-x:hidden safety net on .page-content (:795-799) and body
     (:26) that our Primer lawfully does not (R-0823-01 — the Primer owns containment but not
     a visual overflow clip). Root cause is structural, not a missing reference value: slice F3
     made :root[data-theme="fight-night"] .bu-hero a column flex container with
     align-items:center (below, :790-800), and with no inner wrapper in Home.razor/Teaser.razor
     markup (label/h1/lede/actions are direct .bu-hero children), .bu-hero-label becomes a flex
     item whose auto cross size resolves to max-content instead of the available line width —
     the one child with neither the Primer's own max-width (.bu-hero-headline 18ch,
     bento-grid.css:460; .bu-hero-lede 60ch/800px, bento-grid.css:464 + this file :907) nor
     flex-wrap (.bu-hero-actions, bento-grid.css:474) to clamp it. Stretching it to the line's
     cross size sidesteps the max-content sizing path entirely; .bu-hero's own text-align:center
     (bento-grid.css:442, not restated here) keeps the now full-width label's text centred. */
  :root[data-theme="fight-night"] .bu-hero-label {
    align-self: stretch;
  }

  /* SECOND ROOT CAUSE (live-diagnosed 2026-08-26 after the label fix deployed and
     Eyes still read 413px): .bu-slab is ITSELF a column flex container, so .bu-hero
     is a flex item whose hypothetical cross size is floored by its own min-content —
     and that floor is the h1's unbreakable "REVOLUTIONIZING" (measured exactly 349px
     at the 8.6vw/33.54px phone size) plus this hero's 32px side paddings = 413px.
     min-width:0 on the hero was tested live and does NOT bite (the floor enters via
     the hypothetical cross size, not the min-width clamp); overflow-wrap:anywhere
     fixes the width but mid-word-breaks the flagship headline (REVOLUTIONIZIN/G) —
     rejected. The reference's own phone block solves the same squeeze with narrower
     page padding: theme-midnight-cobalt.css:795-799, .page-content
     { padding: 0 15px !important; } at this exact breakpoint. Ported to the hero:
     390 - 30 = 360px available >= the 349px word, so the floor sits below the
     viewport for every width >= ~284px (word and font both scale with vw below the
     2.2rem cap, so the margin holds down to sizes no real device uses).
     Live-verified before commit: docW 413 -> 390, hero exactly 390, h1 3 clean
     lines, no mid-word break. */
  :root[data-theme="fight-night"] .bu-hero {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ===========================================================================
   HEADER RAIL METRICS — fn-findings #24, OWNER-APPROVED 2026-08-26 ("Yes...
   and then push those fixes" in answer to the explicit fix-the-rail ask).
   ===========================================================================
   Reference: theme-midnight-cobalt.css:50-55 (.bu-header) —
     height: 80px; padding: 0 60px; display: flex;
   and :778-780 (max-width:768px block) — padding: 0 20px.
   Ours measured 70px tall (no declared height; content + the Primer's 8px
   vertical padding) vs the reference's 80px — the last structural delta on
   every page's first impression. The finding was held as a LAW CONFLICT while
   it required editing bento-grid.css; implemented instead as a fight-night
   SKIN override per R-0823-01 (the skin owns the look; the Primer's own 70px
   stays for greyscale and every other skin), which is narrower than what the
   owner authorized. The Primer's fixed-rail content offset
   (.bu-slab.bu-has-fixed-rail, bento-grid.css:294-296, hardcoded 70px) must
   move in lockstep or the taller rail overlaps page content — overridden to
   80px under the same skin scope only.
   Phone (max-width:768px): the Primer makes the rail static and lets it WRAP
   (bento-grid.css:298-312, measured 123px at 735px wide) — forcing the
   reference's fixed height there would clip the wrapped nav, so only the
   reference's phone padding (0 20px) is ported and height returns to auto. */
:root[data-theme="fight-night"] .bu-rail {
  height: 80px;
  padding: 0 60px;
}

:root[data-theme="fight-night"] .bu-slab.bu-has-fixed-rail {
  padding-top: 80px;
}

@media (max-width: 768px) {
  :root[data-theme="fight-night"] .bu-rail {
    height: auto;
    padding: 0 20px;
  }
}