/*
  render-cobalt-dark.css — the Cobalt Dark Render layer (Admin surface)
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-03
  ===========================================================================
  Admin-wide scope (R-S7-10: Cobalt Dark is the executive sibling; admin and
  executive surfaces default to Cobalt Dark). Fires when data-theme="cobalt-dark"
  on the document root — App.razor sets this as the Admin default.

  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]

  This file is the Admin port of BeltUp.Web.Public\wwwroot\css\skins\
  render-cobalt-dark.css: the token block is identical (same measured values,
  same citations); the selector coverage is EXTENDED to the Admin surface's
  fuller component inventory (metrics, gauges, status dots incl. retention
  glow-ring states, heatmap cells, nag banners, forms, footer) — every
  selector Admin's render-greyscale-skeleton.css styles is styled here too
  (D-S07-SKIN-02: no partial skin fallthrough).

  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 are the canonical
  BU-CORE-UIUX-001 §4.1 set plus the documented --theme-x- extensions — the
  same dialect Admin's render-greyscale-skeleton.css now uses (TOKEN MAP
  ALIGNMENT 2026-07-03, docs\ui\BUP-UI-SKIN-002_Skin_Catalog_Planning.md), so
  switching skins only ever changes the data-theme attribute, never markup or
  classes (D-S07-FW-01: structure never forks per skin).
  ===========================================================================
*/

: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 sources' own literal white/#aaa/#888
     values are used. */
  --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: the measured button hover border color (#0096ff,
     theme-midnight-cobalt.css:144) — 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 the
     Web.Public reference render: express feedback colors via the measured
     accent/glass family rather than inventing a new hue (never invent token
     values). States remain mutually distinguishable: cobalt blue (healthy)
     vs mid-grey (warning) vs white (error) vs muted-grey dot (neutral). */
  --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)) — the softer executive shadow.
     Card backdrop-filter: theme-midnight-cobalt.css:277 (.glass-card
     blur(20px)).
     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 -----------------------------------------
     Orbitron/Rajdhani ARE measured for Cobalt Dark (theme-midnight-cobalt.css:65,
     :24) but no font-loading mechanism exists in the documented asset pipeline —
     flagged, not wired, per the Web.Public reference render's identical finding.
     Admin's greyscale render uses system-ui; kept for consistency. */
  --theme-x-font-family-base: system-ui, sans-serif;
  --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
   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-hero-label,
:root[data-theme="cobalt-dark"] .bu-hero-lede {
  color: var(--theme-x-text-secondary);
}

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

:root[data-theme="cobalt-dark"] .bu-metric {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
}

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

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

:root[data-theme="cobalt-dark"] .bu-transom {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="cobalt-dark"] .bu-mullion {
  background-color: var(--theme-border-inactive);
}

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

/* --- Nav ------------------------------------------------------------------- */
:root[data-theme="cobalt-dark"] .bu-nav-brand {
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-nav-brand span {
  color: var(--theme-accent-primary);
}

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

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

/* --- Buttons -----------------------------------------------------------
   Button fill: theme-midnight-cobalt.css:120 ("THE GLASS RECIPE",
   rgba(255,255,255,0.15)). Cobalt Rails: theme-midnight-cobalt.css:129-130.
   Hover fill: theme-midnight-cobalt.css:142 (rgba(255,255,255,0.25) — the
   executive hover lift). Hover border: theme-midnight-cobalt.css:144
   (#0096ff). */
: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 (transparent fill,
   2px solid cobalt border); hover theme-midnight-cobalt.css:169-171
   (rgba(0,71,171,0.16) fill + 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);
}

/* Skin-switcher / segmented active-selection state (D-S07-SKIN-02) —
   consumed by /theme-settings controls. */
: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 (/sessions, /theme-settings) ------------------------------------ */
: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 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 elements get the solid canvas so dropdown text never renders
   dark-on-dark or white-on-white against a UA default. */
: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);
}

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

/* ===========================================================================
   ADMIN COMPONENT COVERAGE — cobalt appearance for every remaining shape the
   Admin greyscale render styles. Tokens only; shapes live in the Primer.
   =========================================================================== */

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

:root[data-theme="cobalt-dark"] .bu-panel-title,
:root[data-theme="cobalt-dark"] .bu-corner-title,
:root[data-theme="cobalt-dark"] .bu-command-title,
:root[data-theme="cobalt-dark"] .bu-section-heading,
:root[data-theme="cobalt-dark"] .bu-panel-headline,
:root[data-theme="cobalt-dark"] .bu-media-title,
:root[data-theme="cobalt-dark"] .bu-pillar-title {
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-panel-sublabel,
:root[data-theme="cobalt-dark"] .bu-command-label,
:root[data-theme="cobalt-dark"] .bu-panel-footnote,
:root[data-theme="cobalt-dark"] .bu-media-label,
:root[data-theme="cobalt-dark"] .bu-pillar-label,
:root[data-theme="cobalt-dark"] .bu-corner-label,
:root[data-theme="cobalt-dark"] .bu-gauge-label {
  color: var(--theme-x-text-secondary);
}

:root[data-theme="cobalt-dark"] .bu-pillar-body,
:root[data-theme="cobalt-dark"] .bu-corner-body,
:root[data-theme="cobalt-dark"] .bu-media-lede {
  color: var(--theme-x-text-secondary);
}

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

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

:root[data-theme="cobalt-dark"] .bu-gauge svg .fg {
  stroke: var(--theme-accent-primary);
}

:root[data-theme="cobalt-dark"] .bu-progress-track {
  background-color: var(--theme-border-inactive);
}

:root[data-theme="cobalt-dark"] .bu-track-hard {
  background-color: var(--theme-accent-primary);
}

:root[data-theme="cobalt-dark"] .bu-media-frame {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
}

:root[data-theme="cobalt-dark"] .bu-play-circle {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-accent-primary);
}

:root[data-theme="cobalt-dark"] .bu-play-icon {
  fill: var(--theme-x-accent-hover);
}

: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-metric-cell-bordered {
  border-left: 1px solid var(--theme-border-inactive);
  border-right: 1px solid var(--theme-border-inactive);
}

@media (max-width: 720px) {
  :root[data-theme="cobalt-dark"] .bu-metric-cell-bordered {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--theme-border-inactive);
    border-bottom: 1px solid var(--theme-border-inactive);
  }
}

:root[data-theme="cobalt-dark"] .bu-slat {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
  border-radius: 4px;
}

:root[data-theme="cobalt-dark"] .bu-slat-level {
  color: var(--theme-x-accent-hover);
}

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

/* --- Status dots ------------------------------------------------------------
   Semantic states stay mutually distinguishable on the cobalt canvas:
   healthy = cobalt blue + glow, warning = mid-grey + glow, error = white +
   glow, neutral = muted grey with NO glow (honest fail-safe — never colored
   as healthy). Same names/shapes as the greyscale render (D-S07-FW-01). */
:root[data-theme="cobalt-dark"] .bu-status-dot {
  background-color: var(--theme-text-muted);
}

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

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

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

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

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

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

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

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

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

/* -----------------------------------------------------------------------
   .bu-nag-warning — R-S7-15 paperwork-compliance nag appearance. Warning
   semantics via --theme-state-warning (not --theme-state-error): mildly
   annoying, not an error — nothing this banner shows ever blocks an action.
   ----------------------------------------------------------------------- */
:root[data-theme="cobalt-dark"] .bu-nag-warning {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-state-warning);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-nag-warning .bu-nag-icon {
  background-color: var(--theme-state-warning);
  color: var(--theme-x-text-inverse);
}

/* -----------------------------------------------------------------------
   KITCHEN SINK COMPONENT COLORS — restored per owner order 2026-07-03.
   Badge/alert/table/node color assignments for the components ported back
   into the gallery. Neutral = accent family; danger = error state; mastery
   = healthy state (the "eligible / earned" semantic, distinct from a raw
   pass/fail — reuses the same --theme-state-healthy token as .bu-status-dot
   .is-healthy for a single source of truth per feedback color).
   ----------------------------------------------------------------------- */
:root[data-theme="cobalt-dark"] .bu-badge {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

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

:root[data-theme="cobalt-dark"] .bu-badge.mastery {
  border-color: var(--theme-state-healthy);
  color: var(--theme-state-healthy);
}

/* .warning uses the §3.7 functional --state-warning token (bento-grid.css)
   directly rather than this skin's --theme-state-warning (which cobalt-dark
   maps to a plain grey, #aaaaaa) — the badge must read as orange/warning
   even on a colored skin, per the owner's semantic-state-color law. */
.bu-badge.warning {
  border-color: var(--state-warning);
  color: var(--state-warning);
}

:root[data-theme="cobalt-dark"] .bu-alert {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-inactive);
  border-left-color: var(--theme-accent-primary);
  color: var(--theme-text-main);
}

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

:root[data-theme="cobalt-dark"] .bu-table th,
:root[data-theme="cobalt-dark"] .bu-table td {
  border-bottom-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-node-svg polygon {
  stroke: var(--theme-accent-primary);
}

/* =========================================================================
   COMMAND CONSOLE BENTO PASS — Cobalt Dark appearance for the universal
   header, bridge chips, tab rails, and slide-out well (structure in
   bento-grid.css). Frosted-glass well per BUP-UI-CONSOLE-VISION-001
   ("SEMI-TRANSPARENT panels — a clear deck"), using the existing frosted/
   blur/border-active tokens already measured for this skin — no new hues.
   ========================================================================= */

:root[data-theme="cobalt-dark"] .bu-console-header {
  border-bottom: 1px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-frosted);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
}

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

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

:root[data-theme="cobalt-dark"] .bu-tab-btn {
  background-color: var(--theme-bg-frosted);
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-secondary);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
}

:root[data-theme="cobalt-dark"] .bu-tab-btn:hover:not(:disabled) {
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .bu-tab-btn.is-active {
  background-color: var(--theme-accent-primary);
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
  box-shadow: var(--theme-accent-glow);
}

:root[data-theme="cobalt-dark"] .bu-tab-btn:disabled {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-disabled);
}

:root[data-theme="cobalt-dark"] .bu-slideout-placeholder {
  background-color: var(--theme-bg-frosted);
  border: 1px solid var(--theme-border-inactive);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
}

:root[data-theme="cobalt-dark"] .bu-slideout-content {
  background-color: var(--theme-bg-frosted);
  border: 1px solid var(--theme-border-inactive);
  border-top: 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));
}

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

:root[data-theme="cobalt-dark"] .bu-slideout-close {
  background-color: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-secondary);
}

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

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

/* --- Gate overlay (added 2026-08-21) — mirrors .bu-drawer's own tokens ---- */
:root[data-theme="cobalt-dark"] .cc-gate-notice {
  background-color: rgba(4, 6, 10, 0.6);
}

:root[data-theme="cobalt-dark"] .cc-upgrade-card {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-2);
  color: var(--theme-text-main);
}

:root[data-theme="cobalt-dark"] .cc-upgrade-card p {
  color: var(--theme-x-text-secondary);
}

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

:root[data-theme="cobalt-dark"] .cc-upgrade-dismiss:hover {
  color: var(--theme-text-main);
}

/* =========================================================================
   INTERNAL ADMIN HUB (Internal.razor) — card-grid cobalt appearance.
   Cards reuse .bu-panel's existing surface/border/shadow (no new hues);
   only the hover lift and the Gap-card dimmed variant are added here.
   ========================================================================= */
:root[data-theme="cobalt-dark"] .adm-hub-card:hover {
  border-color: var(--theme-border-active);
  box-shadow: var(--theme-accent-glow);
}

:root[data-theme="cobalt-dark"] .adm-hub-card--gap {
  background-color: var(--theme-x-bg-sunken);
  border-color: var(--theme-border-inactive);
}

:root[data-theme="cobalt-dark"] .adm-hub-card--gap:hover {
  border-color: var(--theme-border-inactive);
  box-shadow: none;
}

:root[data-theme="cobalt-dark"] .adm-hub-card-head strong {
  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 ==== */