/*
  STUDENT-SURFACE COPY (2026-07-04): duplicated verbatim from
  BeltUp.Web.Public\wwwroot\css\skins\render-fight-night.css to make Fight
  Night the R-S7-10 default skin for the student WASM host (BeltUp.Web.Student).
  This mirrors the existing pattern where BeltUp.Web.Admin keeps its own copy
  of render-cobalt-dark.css / render-greyscale-skeleton.css rather than
  sharing one physical file across hosts (same class of duplication as the
  known VelocityGauge duplication) — FLAGGED for a future shared-RCL
  consolidation pass so skin CSS lives in one place and every host references
  it via a shared static-asset library instead of a per-project copy.

  KNOWN GAP (not fixed here, out of scope for this slice): this file only
  covers the selector set PG-035 needed (.bu-panel, .bu-rail, .bu-soffit,
  .bu-brick, .bu-badge-tag, .bu-control, .bu-btn*, .bu-gate). The student
  pages DigitalDojo.razor / LockerRoom.razor also render .bu-status-dot,
  .bu-progress-track, and .bu-gauge (svg .bg/.fg), which render-greyscale-
  skeleton.css styles but this Fight Night file does NOT. Under
  data-theme="fight-night" those three elements will show unset/transparent
  backgrounds and strokes instead of styled ones (Admin's render-cobalt-dark.css
  solved the equivalent gap by extending selector coverage to its fuller
  component inventory — see that file's header comment — but inventing new
  Fight Night token-to-selector mappings here would mean asserting visual
  values with no measured-ground-truth citation, which the source doc
  explicitly prohibits). Recommend a follow-up task, scoped like Admin's
  cobalt-dark port, to extend this file's selector coverage before this gap
  is user-visible in production.
  ===========================================================================
*/

/*
  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. NOTE (this host only): this token feeds the SHARED base .bu-panel rule below, which the locker-specific opaque-tile override further down (owner ruling 2026-07-12) still supersedes for actual Student rendering — that override block is untouched, per brief. */
  --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.
   NOTE (Student host): this is the SHARED base .bu-panel rule; the locker-specific opaque-tile
   override further down (owner ruling 2026-07-12) still repaints background/blur/box-shadow at
   rest for that surface — it does not touch :hover, so this hover recipe still applies there. */
: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));
}

/* --- Selector-coverage extension (2026-07-04) ---------------------------
   DigitalDojo.razor / LockerRoom.razor render .bu-status-dot,
   .bu-progress-track, and .bu-gauge (svg .bg/.fg), which this file did not
   previously cover (see file header KNOWN GAP note) — they rendered
   unset/transparent under data-theme="fight-night". Extending coverage the
   same way Admin's render-cobalt-dark.css did for its fuller inventory
   (same selector set, same property-to-part mapping: border/muted token on
   the inert "track"/"bg" part, accent/state token on the active "fg"/dot
   part). Every value below is an EXISTING token already defined in this
   file's own :root[data-theme="fight-night"] block above — no new hex, no
   invented mapping; only wider selector coverage of the established
   palette. */

/* THE ROTATION — verbatim FightNight.css:655 (.fight-gauge svg), restored 2026-07-17 (grounding
   pack R3). The companion .fight-gauge-ring 45deg accent (FightNight.css:389) has no corresponding
   selector in current markup (no equivalent class rendered anywhere) — not restored, see
   BUILD-FIGHTNIGHT-CSS-COMPLIANCE report. */
: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));
}

/* fn-findings #12/#17/#35: theme-midnight-cobalt.css:628-640, the later (and therefore winning)
   of two .fight-skill-bar declarations. Was an admitted citation-free stopgap
   (var(--theme-border-inactive), 0.12); corrected to the measured 0.05. Track border deliberately
   NOT ported — border-width is Primer geometry (bento-grid.css:724-736 already sets
   height/radius), crossing the Primer/Render split. */
: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);
  box-shadow: 0 0 10px rgba(0, 71, 171, 0.5);
}

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

:root[data-theme="fight-night"] .bu-status-dot.is-active {
  background-color: var(--theme-state-healthy);
  box-shadow: 0 0 8px var(--theme-state-healthy);
}

:root[data-theme="fight-night"] .bu-status-dot.is-healthy {
  background-color: var(--theme-state-healthy);
  box-shadow: 0 0 8px var(--theme-state-healthy);
}

:root[data-theme="fight-night"] .bu-status-dot.is-alert {
  background-color: var(--theme-state-error);
  box-shadow: 0 0 8px var(--theme-state-error);
}

:root[data-theme="fight-night"] .bu-status-dot.is-error {
  background-color: var(--theme-state-error);
  box-shadow: 0 0 8px var(--theme-state-error);
}

:root[data-theme="fight-night"] .bu-status-dot.is-warning {
  background-color: var(--theme-state-warning);
  box-shadow: 0 0 8px var(--theme-state-warning);
}

:root[data-theme="fight-night"] .bu-status-dot.is-neutral {
  background-color: var(--theme-text-muted);
}

/* 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 {
  /* Darkening scrim layered over the arena (owner ruling 2026-07-12: scene was
     too bright behind near-transparent blurred panels — "gives you a headache
     when you scroll"). The gradient darkens the photo without touching the
     fidelity-locked asset itself.
     STOP-REPORT 2026-07-17 (grounding pack R5, this host only): the pack's verbatim
     3-stop vignette (rgba(3,4,3,.85) 0% / transparent 40% / rgba(3,4,3,.85) 100%) was
     NOT substituted in here. It conflicts with the dated owner ruling immediately above
     this comment, which intentionally chose this flatter 0.55-alpha scrim (paired with
     the opaque-tile fix below) specifically to fix a brightness/headache complaint on
     this host. Swapping in the pack's darker/lighter-banded recipe risks reopening that
     complaint. Restored on the Public/Admin copies instead, where no such ruling exists.
     Needs an explicit owner call before this host's scrim changes. */
  background-image: linear-gradient(rgba(3, 5, 10, 0.55), rgba(3, 5, 10, 0.55)),
    url("assets/arena-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  /* fn-findings #27: unsourced raw hex removed 2026-08-23 — #0a0a0f appears in no reference file
     (reference canvas is #030403) and was already DEAD: this selector (0,1,1) always loses to
     `:root[data-theme="fight-night"] body { background-color: var(--theme-bg-canvas) }` (0,2,1)
     elsewhere in this file. Net visual change: none — provenance hygiene only. Everything else in
     this block (image/size/position/attachment) is the dated 2026-07-12 ruling + STOP-REPORT
     above and is left untouched. */
}

/* FLOATING TILES over the scene (owner ruling 2026-07-12, Student host): the
   measured 0.04-alpha glass + 25px blur turned every locker panel into a smear
   of the arena behind it. Panels over the scene get a mostly-opaque dark fill
   and a light blur, so content is readable and the scene shows BETWEEN tiles,
   not THROUGH them. Scoped to this skin's panels only; the measured tokens
   above are unchanged for provenance. */
:root[data-theme="fight-night"] .bu-panel {
  background-color: rgba(6, 9, 14, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--theme-x-elevation-2);
}

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

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

/* 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 above, 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.
   Mirrored from BeltUp.Web.Public/wwwroot/css/skins/render-fight-night.css, same
   rule, per FIND-A. */
@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);
  }
}

/* ===========================================================================
   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. */
:root[data-theme="fight-night"] .bu-hero-lede {
  color: var(--theme-x-text-secondary);
}

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

/* ===========================================================================
   SCENE GRADE — student surface (2026-08-23)
   ===========================================================================
   Public and Admin now carry the reference's own arena grade
   (theme-midnight-cobalt.css:39-46, filter: brightness(0.4) saturate(0.8)).
   The student surface was deliberately left out of that pass because its scene
   carries a dated ruling (2026-07-12) that replaced a grade with a flat 0.55
   scrim, plus a STOP-REPORT.

   The owner then looked at the result live and said the screen "still hasn't
   matched up, it's still all jacked up" — the flat scrim leaves the arena
   bright and busy behind every panel, which is the very problem the grade
   exists to solve. Bringing the student surface to parity with the other two.

   This SUPERSEDES the scrim-only approach of 2026-07-12 on the owner's live
   instruction. Flagged rather than silently changed: if the July ruling was
   protecting something this breaks, it is a one-line revert.
   =========================================================================== */
[data-theme="fight-night"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: inherit;
  filter: brightness(0.45) saturate(0.85);
}