/*
  render-cobalt-dark.css — the Cobalt Dark 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="cobalt-dark"
  on the document root.

  Source of every value below: docs\ui\BUP-UI-SKIN-001_Skin_System_Requirements.md,
  "COBALT DARK MEASURED VALUES (2026-07-02 — extracted from owner-provided
  legacy sources)" section ONLY. Every value is cited to a
  theme-midnight-cobalt.css (or corroborating index*.html) file:line from
  that extraction. [LEGACY-ABSORPTION 2026-07-02 | source:
  theme-midnight-cobalt.css + 08_Assets index1-6 | owner-directed | pending
  owner verification]

  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/Fight Night render files' 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 Cobalt Dark's token VALUES; no structural rule here
  differs from render-greyscale-skeleton.css's or render-fight-night.css's shape.

  Finding from the extraction: the legacy Cobalt Dark sources
  (theme-midnight-cobalt.css + six 08_Assets index*.html mockups) use the SAME
  canvas/cobalt/glass/border values as the measured Fight Night skin — no
  source anywhere defines a distinct, lighter "executive" canvas value. Any
  token below with no distinct Cobalt Dark source therefore inherits the same
  measured value as Fight Night's equivalent token (both are cited to the
  Cobalt Dark extraction's own file:line, not silently copied) — this is NOT
  an invented value, it is what the sources actually contain. Where the
  extraction explicitly found NO SOURCE (see docs), the base/greyscale token
  is inherited instead, with a comment marking the gap.
  ===========================================================================
*/

:root[data-theme="cobalt-dark"] {
  /* --- Surfaces -----------------------------------------------------------
     Canvas: theme-midnight-cobalt.css:8 (--bg: #030403), confirmed identically
     in all six index*.html files (BUP-UI-SKIN-001 Cobalt Dark extraction table).
     Surface (card fill / "liquid glass"): theme-midnight-cobalt.css:6
     (rgba(255,255,255,0.04)).
     Border: theme-midnight-cobalt.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 -----------------------------------------------------------
     No distinct Cobalt Dark near-white/grey hex exists beyond plain white body
     text (theme-midnight-cobalt.css:23) and #aaa/#888 secondary copy
     (theme-midnight-cobalt.css:86, :254). No --theme-text-* hex citation in
     the extraction beyond these — the near-white/mid-grey pairing used by
     Fight Night (#f9fafb / #9ca3af) is NOT present in the Cobalt Dark sources,
     so the sources' own literal white/#aaa/#888 values are used instead. */
  --theme-text-main: #ffffff;
  --theme-x-text-secondary: #aaaaaa;
  --theme-text-muted: #888888;
  --theme-x-text-inverse: #030403;
  --theme-x-text-disabled: #6b7280;

  /* --- Interactive states -----------------------------------------------
     Accent (cobalt): theme-midnight-cobalt.css:4 (--cobalt: #0047AB).
     Accent hover/active: no distinct measured hover value for panels exists;
     the button hover border color IS measured (#0096ff,
     theme-midnight-cobalt.css:144) and is used here for hover, distinct from
     Fight Night's flat #0047ab hover (a genuine Cobalt Dark-specific value). */
  --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 */
  --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;
  --theme-x-focus-ring: #0047ab;

  /* --- Feedback colors ----------------------------------------------------
     No feedback-state hex is in the Cobalt Dark extraction. Same rule as
     Fight Night's render file: express feedback colors via the measured
     accent/glass family rather than inventing a new hue (never invent token
     values). */
  --theme-state-healthy: #0047ab;
  --theme-state-warning: #aaaaaa;
  --theme-state-error: #ffffff;
  --theme-x-state-info: #0047ab;

  /* --- Elevation / glass effects ------------------------------------------
     Card box-shadow: theme-midnight-cobalt.css:284
     (0 15px 35px rgba(0,0,0,0.2)) — a genuinely Cobalt Dark-specific measured
     value, distinct from Fight Night's render file.
     Card backdrop-filter: theme-midnight-cobalt.css:277 (.glass-card
     blur(20px)) — blur varies by element in the sources (header also
     blur(20px) at line 59; mockups use blur(30px)); 20px used as the primary
     CSS file's card value, matching the extraction doc's "not a single locked
     value" finding.
     Glow: theme-midnight-cobalt.css:5 (--cobalt-glow: rgba(0,71,171,0.5)). */
  --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --theme-x-elevation-2: 0 15px 35px rgba(0, 0, 0, 0.2);
  --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-x-glass-tint: rgba(255, 255, 255, 0.04);
  --theme-backdrop-blur: 20px;

  /* --- Spacing / typography scale -----------------------------------------
     Font families: Orbitron (display, theme-midnight-cobalt.css:65) and
     Rajdhani (body, theme-midnight-cobalt.css:24) ARE directly measured for
     Cobalt Dark (unlike Fight Night's render file, which had no font
     citation and fell back to the structural stack) — however per
     D-S07-NS-02 the Render layer expresses type CHOICE via the structural
     font variable, not a raw @font-face here; the structural font stack is
     kept for consistency with render-fight-night.css's approach, since no
     font-loading mechanism is documented in the extraction (no source cites
     how Orbitron/Rajdhani are loaded — no Google Fonts <link> equivalent is
     part of this Blazor app's documented asset pipeline). Flagged, not wired,
     to avoid inventing a font-loading strategy not present in any BeltUp
     Online source file. */
  --theme-x-font-family-base: var(--structure-font-family);
  --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;

  /* --- Native controls (WT-0915-022) ---------------------------------------
     A dark skin that never declares itself dark gets the browser's LIGHT native
     widgets: /inquire's consent checkbox drew a white box inside the dark card,
     and the select popups and the report widget's radios and file picker did the
     same. color-scheme is not a colour value: it tells the browser to draw its own
     widgets in their dark form. No accent-color here: the only light cobalt this
     skin owns is the hover token, and choosing it is the owner's colour call
     (NEW-PUB-01). */
  color-scheme: dark;
}

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

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

:root[data-theme="cobalt-dark"] h1,
:root[data-theme="cobalt-dark"] h2,
:root[data-theme="cobalt-dark"] h3,
:root[data-theme="cobalt-dark"] h4,
:root[data-theme="cobalt-dark"] h5,
:root[data-theme="cobalt-dark"] h6 {
  color: var(--theme-text-main);
}

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

:root[data-theme="cobalt-dark"] .bu-panel {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-inactive);
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .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);
}

:root[data-theme="cobalt-dark"] .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="cobalt-dark"] .bu-soffit a {
  color: var(--theme-text-muted);
}

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

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

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

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

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

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

/* --- Buttons -----------------------------------------------------------
   Button fill: theme-midnight-cobalt.css:120 ("THE GLASS RECIPE",
   rgba(255,255,255,0.15)) — same measured value family as Fight Night's
   button fill (both skins use the identical glass recipe per the extraction's
   "same underlying token set" finding). Cobalt Rails: theme-midnight-cobalt.css:129-130.
   Hover fill: theme-midnight-cobalt.css:142 (rgba(255,255,255,0.25) — a
   stronger hover lift than Fight Night's measured 0.22, a genuine Cobalt
   Dark-specific measured value). Hover border: theme-midnight-cobalt.css:144
   (#0096ff, also genuinely distinct from Fight Night). */
:root[data-theme="cobalt-dark"] .bu-btn {
  background-color: rgba(255, 255, 255, 0.15);
  border-top: 2px solid var(--theme-border-active);
  border-bottom: 2px solid var(--theme-border-active);
  border-left-color: transparent;
  border-right-color: transparent;
  color: var(--theme-x-accent-text);
}

:root[data-theme="cobalt-dark"] .bu-btn:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--theme-x-accent-hover);
  border-bottom-color: var(--theme-x-accent-hover);
}

:root[data-theme="cobalt-dark"] .bu-btn:disabled {
  background-color: rgba(255, 255, 255, 0.06);
  border-top-color: var(--theme-x-accent-disabled);
  border-bottom-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

/* Secondary button: theme-midnight-cobalt.css:165-166
   (.fight-secondary-btn — transparent fill, 2px solid cobalt border) and
   hover theme-midnight-cobalt.css:169-171
   (rgba(0,71,171,0.16) fill + 0 0 15px cobalt-glow shadow on hover). */
:root[data-theme="cobalt-dark"] .bu-btn-secondary {
  background-color: transparent;
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-btn-secondary:hover {
  background-color: rgba(0, 71, 171, 0.16);
  border-color: var(--theme-x-accent-hover);
  color: var(--theme-text-main);
  box-shadow: 0 0 15px var(--theme-x-elevation-3);
}

/* PG-035 demo skin switcher active-selection state (D-S07-SKIN-02 switcher UI). */
:root[data-theme="cobalt-dark"] .bu-btn-secondary.is-active {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
}

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

/* --- Forms ------------------------------------------------------------------
   WT-0915-022 — this skin styled NO field. Every /inquire input and select, and the
   report widget's textarea on every cobalt-dark page, computed a browser-white box
   (bg #fff, black text, 1px #767676 border) inside the dark card, while greyscale
   (render-greyscale-skeleton.css, Forms block) and Fight Night both carry this
   block. Same selector set as Fight Night's, and the same three token roles the
   admin host's cobalt-dark field block uses; no new value. */
:root[data-theme="cobalt-dark"] .bu-field label {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="cobalt-dark"] .bu-field input[type="text"],
:root[data-theme="cobalt-dark"] .bu-field input[type="email"],
:root[data-theme="cobalt-dark"] .bu-field input[type="tel"],
:root[data-theme="cobalt-dark"] .bu-field input[type="password"],
:root[data-theme="cobalt-dark"] .bu-field input[type="number"],
:root[data-theme="cobalt-dark"] .bu-field input[type="date"],
:root[data-theme="cobalt-dark"] .bu-field select,
:root[data-theme="cobalt-dark"] .bu-field textarea,
:root[data-theme="cobalt-dark"] input.bu-input,
:root[data-theme="cobalt-dark"] select.bu-input,
:root[data-theme="cobalt-dark"] textarea.bu-input {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

/* Native select popup lists ignore rgba glass fills on some platforms; option
   rows get the solid canvas so dropdown text never renders white-on-white. */
:root[data-theme="cobalt-dark"] .bu-field select option,
:root[data-theme="cobalt-dark"] select.bu-input option {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

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

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

/* NEW-PUB-02 — the report widget's "Attach an image" picker. The Primer gives the
   ::file-selector-button the .bu-control shape; it takes this skin's .bu-control
   face (same three tokens, same hover), and the "No file chosen" text takes the
   secondary text role instead of the browser's black. */
:root[data-theme="cobalt-dark"] input[type="file"] {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="cobalt-dark"] input[type="file"]::file-selector-button {
  background-color: var(--theme-bg-surface);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] input[type="file"]::file-selector-button:hover {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-text-inverse);
}

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

/* 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="cobalt-dark"] .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="cobalt-dark"] .bu-footer {
  border-top: 2px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-surface);
}

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

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

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

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

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

/* ==== #234 CONSTRUCTION FAMILY BEGIN ==== (SENTRY RAILS, family 1 of 8) ====
   Skin "cobalt-dark" belongs to the SENTRY RAILS construction family. Colour variants of one
   family share this construction and differ only in the variables above. */
/* family variables: derived from this skin's own palette; contrast pairs verified >= 4.5:1 (fill/ink), >= 3:1 (edge, focus) against the canvas */
:root[data-theme="cobalt-dark"] {
  --fam-edge: #0096ff;
  --fam-hi: #9fd4ff;
  --fam-hov: #0a5cd0;
  --fam-fill: #0047ab;
  --fam-ink: #ffffff;
  --fam-deep: #0e3e8a;
  --fam-focus: #9fd4ff;
  --fam-glow: color-mix(in srgb, #0096ff 55%, transparent);
  --theme-text-muted: #898989; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
  --theme-state-healthy: #4dd68a; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
  --theme-state-warning: #f2c94c; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
  --theme-state-error: #ff6b6b; /* AA repair (>= 4.7:1 on canvas, surface and card), hue kept semantic */
}

/* ===========================================================================
   CONSTRUCTION FAMILY 1 of 8 — SENTRY RAILS  [#234 / R-0823-01 / R-0823-02]
   Reference: panel-theme-kit.html ("SENTRY floating panel"): etched glass held
   between two segmented light rails, corner ticks, faint circuit etching.
   Frame strategy: rails DETACHED from the pane (outside it, with a dark gap),
   cut into segments of unequal length; four corner ticks; no box border.
   Light source: the rails emit (drop-shadow glow); the pane only catches it.
   Palette discipline: one cool accent on near-black, depth tone for the rail
   foot. Type: light weight, wide tracking, labels as outlined tabs.
   [PILLAR-1: Gestalt closure + figure/ground -- the rails read as a frame
   without enclosing the text, keeping the reading area free of lines.]
   =========================================================================== */
:root[data-theme="cobalt-dark"] body {
  overflow-x: clip;
  background-image:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--fam-deep) 55%, transparent) 0%, transparent 58%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--fam-edge) 7%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--fam-edge) 7%, transparent) 0 1px, transparent 1px 72px);
  background-repeat: no-repeat, repeat, repeat;
}
:root[data-theme="cobalt-dark"] .bu-panel {
  border: 0;
  border-radius: 0;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--theme-bg-canvas);
  background-image:
    linear-gradient(var(--fam-edge), var(--fam-edge)), linear-gradient(var(--fam-edge), var(--fam-edge)),
    linear-gradient(var(--fam-edge), var(--fam-edge)), linear-gradient(var(--fam-edge), var(--fam-edge)),
    linear-gradient(var(--fam-edge), var(--fam-edge)), linear-gradient(var(--fam-edge), var(--fam-edge)),
    linear-gradient(var(--fam-edge), var(--fam-edge)), linear-gradient(var(--fam-edge), var(--fam-edge)),
    linear-gradient(115deg, transparent 48%, color-mix(in srgb, var(--fam-edge) 14%, transparent) 48.4%, transparent 49%),
    linear-gradient(-72deg, transparent 62%, color-mix(in srgb, var(--fam-edge) 14%, transparent) 62.3%, transparent 63%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 60%),
    linear-gradient(var(--theme-bg-surface), var(--theme-bg-surface));
  background-repeat: no-repeat;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom, 0 0, 0 0, 0 0, 0 0;
  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fam-edge) 22%, transparent),
    inset 0 0 60px -26px var(--fam-edge),
    0 30px 70px -44px #000;
}
:root[data-theme="cobalt-dark"] .bu-panel:not(.bu-drawer):not(.bu-slideout-content):not(.bu-report-widget-panel) { margin-block: 6px; }
:root[data-theme="cobalt-dark"] .bu-panel::before,
:root[data-theme="cobalt-dark"] .bu-panel::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  height: 5px;
  pointer-events: none;
  /* four segments of unequal length, each its own gradient layer. (A mask would clip the
     drop-shadow bloom, because filter runs before mask, so the segments are drawn directly.) */
  background-image:
    linear-gradient(180deg, var(--fam-hi), var(--fam-edge) 45%, var(--fam-deep)),
    linear-gradient(180deg, var(--fam-hi), var(--fam-edge) 45%, var(--fam-deep)),
    linear-gradient(180deg, var(--fam-hi), var(--fam-edge) 45%, var(--fam-deep)),
    linear-gradient(180deg, var(--fam-hi), var(--fam-edge) 45%, var(--fam-deep));
  background-repeat: no-repeat;
  background-size: 52% 100%, 7.5% 100%, 2.5% 100%, 31% 100%;
  background-position: 0% 0, 58.92% 0, 65.64% 0, 100% 0;
  filter: drop-shadow(0 0 7px var(--fam-glow));
}
:root[data-theme="cobalt-dark"] .bu-panel::before { top: -10px; }
:root[data-theme="cobalt-dark"] .bu-panel::after { bottom: -10px; transform: scale(-1, -1); }

:root[data-theme="cobalt-dark"] h1, :root[data-theme="cobalt-dark"] h2, :root[data-theme="cobalt-dark"] h3 { font-weight: 300; letter-spacing: 0.05em; overflow-wrap: break-word; }
:root[data-theme="cobalt-dark"] .bu-panel h2, :root[data-theme="cobalt-dark"] .bu-panel h3, :root[data-theme="cobalt-dark"] .bu-panel-title, :root[data-theme="cobalt-dark"] .bu-panel-headline {
  text-shadow: 0 0 28px color-mix(in srgb, var(--fam-edge) 40%, transparent);
}
:root[data-theme="cobalt-dark"] .bu-panel-sublabel, :root[data-theme="cobalt-dark"] .bu-badge-tag, :root[data-theme="cobalt-dark"] .bu-metric-label, :root[data-theme="cobalt-dark"] .bu-panel-footnote {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--structure-text-xs, 0.75rem);
}
/* wide-tracked label tab: outlined, with a light wash running out of it */
:root[data-theme="cobalt-dark"] .bu-badge-tag, :root[data-theme="cobalt-dark"] .bu-panel-sublabel {
  border: 1px solid var(--fam-edge);
  border-radius: 0;
  padding: 0.35rem 0.8rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fam-edge) 16%, transparent), transparent);
  color: var(--fam-hi);
}
:root[data-theme="cobalt-dark"] .bu-rail {
  border-bottom: 1px solid color-mix(in srgb, var(--fam-edge) 30%, transparent);
  background-image: linear-gradient(90deg, transparent 0 8%, var(--fam-edge) 8% 38%, transparent 38% 40%, var(--fam-edge) 40% 46%, transparent 46% 100%);
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
:root[data-theme="cobalt-dark"] .bu-nav-links a { letter-spacing: 0.12em; }
:root[data-theme="cobalt-dark"] .bu-nav-links a:hover, :root[data-theme="cobalt-dark"] .bu-nav-links a.active {
  color: var(--fam-hi);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--fam-edge);
}
:root[data-theme="cobalt-dark"] .bu-btn {
  background: var(--fam-fill);
  border: 1px solid var(--fam-fill);
  border-radius: 2px;
  color: var(--fam-ink);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 55%, transparent), 0 0 18px -4px var(--fam-glow);
}
:root[data-theme="cobalt-dark"] .bu-btn:hover { background: var(--fam-hov); border-color: var(--fam-hov); color: var(--fam-ink); box-shadow: inset 0 2px 0 #fff, 0 0 26px -2px var(--fam-glow); }
:root[data-theme="cobalt-dark"] .bu-btn-secondary {
  background: transparent;
  border: 1px solid var(--fam-edge);
  border-radius: 2px;
  color: var(--fam-hi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: inset 0 0 14px -6px var(--fam-edge);
}
:root[data-theme="cobalt-dark"] .bu-btn-secondary:hover { background: color-mix(in srgb, var(--fam-edge) 18%, transparent); border-color: var(--fam-hi); color: var(--fam-hi); }
:root[data-theme="cobalt-dark"] .bu-btn-secondary.is-active { background: var(--fam-fill); border-color: var(--fam-fill); color: var(--fam-ink); }
:root[data-theme="cobalt-dark"] .bu-control, :root[data-theme="cobalt-dark"] .bu-field input[type="text"], :root[data-theme="cobalt-dark"] .bu-field input[type="email"], :root[data-theme="cobalt-dark"] .bu-field input[type="tel"],
:root[data-theme="cobalt-dark"] .bu-field input[type="password"], :root[data-theme="cobalt-dark"] .bu-field input[type="number"], :root[data-theme="cobalt-dark"] .bu-field select, :root[data-theme="cobalt-dark"] .bu-field textarea,
:root[data-theme="cobalt-dark"] input.bu-input, :root[data-theme="cobalt-dark"] select.bu-input, :root[data-theme="cobalt-dark"] textarea.bu-input {
  background: color-mix(in srgb, var(--theme-bg-canvas) 70%, var(--theme-bg-card));
  border: 1px solid color-mix(in srgb, var(--fam-edge) 55%, transparent);
  border-bottom: 2px solid var(--fam-edge);
  border-radius: 2px;
  color: var(--theme-text-main);
}
:root[data-theme="cobalt-dark"] .bu-control:hover, :root[data-theme="cobalt-dark"] .bu-field input:hover, :root[data-theme="cobalt-dark"] .bu-field select:hover, :root[data-theme="cobalt-dark"] .bu-field textarea:hover { border-color: var(--fam-hi); background: color-mix(in srgb, var(--theme-bg-canvas) 70%, var(--theme-bg-card)); color: var(--theme-text-main); }
:root[data-theme="cobalt-dark"] .bu-table th, :root[data-theme="cobalt-dark"] .bu-table td { border-bottom: 1px solid color-mix(in srgb, var(--fam-edge) 22%, transparent); }
:root[data-theme="cobalt-dark"] .bu-table th { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 400; }
:root[data-theme="cobalt-dark"] .bu-progress-track {
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, var(--theme-bg-canvas) 22px 26px);
}

/* --- shared floors every family honours (state tokens, focus, option list) --- */
:root[data-theme="cobalt-dark"] .bu-field select option,
:root[data-theme="cobalt-dark"] select.bu-input option {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}
:root[data-theme="cobalt-dark"] .bu-btn:focus-visible,
:root[data-theme="cobalt-dark"] .bu-btn-secondary:focus-visible,
:root[data-theme="cobalt-dark"] .bu-control:focus-visible,
:root[data-theme="cobalt-dark"] .bu-field input:focus-visible,
:root[data-theme="cobalt-dark"] .bu-field select:focus-visible,
:root[data-theme="cobalt-dark"] .bu-field textarea:focus-visible,
:root[data-theme="cobalt-dark"] .bu-input:focus-visible,
:root[data-theme="cobalt-dark"] .bu-nav-links a:focus-visible,
:root[data-theme="cobalt-dark"] .bu-tab-btn:focus-visible {
  outline: 2px solid var(--fam-focus);
  outline-offset: 2px;
}
:root[data-theme="cobalt-dark"] .bu-btn:disabled,
:root[data-theme="cobalt-dark"] .bu-btn-secondary:disabled {
  background: transparent;
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
  box-shadow: none;
  filter: none;
}
:root[data-theme="cobalt-dark"] .bu-status-dot.is-healthy { background: var(--theme-state-healthy); }
:root[data-theme="cobalt-dark"] .bu-status-dot.is-warning,
:root[data-theme="cobalt-dark"] .bu-status-dot.is-alert { background: var(--theme-state-warning); }
:root[data-theme="cobalt-dark"] .bu-status-dot.is-error { background: var(--theme-state-error); }
:root[data-theme="cobalt-dark"] .bu-field-error { color: var(--theme-state-error); }
/* --- overlay / scroll-container panels (Admin drawers, slide-outs, the report widget) ---
   A family frame is drawn on pseudo-elements and a plate that would scroll away with the
   content, and some panel margins would leave a closed drawer peeking in. Overlay panels
   therefore get a solid attached fill, one plain outline, no pseudo frame, no clip. */
:root[data-theme="cobalt-dark"] .bu-drawer, :root[data-theme="cobalt-dark"] .bu-slideout-content, :root[data-theme="cobalt-dark"] .bu-report-widget-panel {
  clip-path: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: var(--theme-bg-canvas);
  background-image: linear-gradient(var(--theme-bg-surface), var(--theme-bg-surface));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  border: 1px solid var(--fam-edge);
  box-shadow: none;
  isolation: auto;
}
:root[data-theme="cobalt-dark"] .bu-drawer::before, :root[data-theme="cobalt-dark"] .bu-drawer::after,
:root[data-theme="cobalt-dark"] .bu-slideout-content::before, :root[data-theme="cobalt-dark"] .bu-slideout-content::after,
:root[data-theme="cobalt-dark"] .bu-report-widget-panel::before, :root[data-theme="cobalt-dark"] .bu-report-widget-panel::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="cobalt-dark"] .bu-btn, :root[data-theme="cobalt-dark"] .bu-btn-secondary { transition: none; transform: none; }
}
:root[data-reduced-motion="true"][data-theme="cobalt-dark"] .bu-btn,
:root[data-reduced-motion="true"][data-theme="cobalt-dark"] .bu-btn-secondary { transition: none; transform: none; }
/* ==== #234 CONSTRUCTION FAMILY END ==== */