/*
  render-executive-blue.css — the Executive (Electric Blue) Render layer
  token map aligned to BU-CORE-UIUX-001 §4.1, 2026-07-09
  ===========================================================================
  Fires when data-theme="executive-blue" on the document root.

  AUTHORITY: owner ruling R-0709-19 (docs\rulings\BUP-RULING-UI-POLISH-CAPTURE_
  2026-07-09.md) — "VD-skin firewall corrected + Executive skin definition."
  History: the prior "never use ViralDecay in BeltUp Online" lock was damage
  control after an agent tried to REPLACE Fight Night with the VD skin — it was
  never meant to ban VD's structure as an OPTION. Corrected law: (a) the VD
  skin's STRUCTURE (laser panels, the racing-border effect underneath that
  skin) is welcome in as one of many optional skins; (b) VD BRANDING (name,
  logos, product identity) stays firewalled absolutely — this file is named
  "executive"/"executive-blue", never "viraldecay"/"vd", and no VD brand
  string appears anywhere below; (c) NOTHING replaces Fight Night — it remains
  the untouched flagship (render-fight-night.css is FIDELITY-LOCKED and is not
  read for values here, only for the electric-blue color citations it already
  carries). Executive REPLACES the amethyst variation as the executive-skin
  direction (R-0709-19); Amethyst Dark/Light remain in the catalog unchanged
  (no featured/order concept exists in DemoSkinOption to demote them — see
  DemoSkinRegistry.cs, left as-is and noted in the compliance map).

  TWO-SOURCE AUTHORING RECIPE (owner: "adapt the VD skin EXACTLY structurally
  ... but recolored to the Fight Night electric-blue/cobalt palette"):
    STRUCTURE source: N:\Source\BeltUpLLC\ViralDecay\ViralDecay.Ui\wwwroot\app.css
    (the main checkout, read-only — VD repo is never written to). Every
    structural/effect citation below is "app.css:<line>".
    COLOR source: this repo's own render-fight-night.css :root[data-theme=
    "fight-night"] block, which is itself fidelity-locked to the two official
    Fight Night sources (legacy FightNight.css + qa.beltup.online ui-kit —
    see that file's header for the full citation chain). Every color citation
    below is "FN:<line>" pointing at render-fight-night.css's own token block,
    NOT a fresh, uncited color pick — the FN file is the color authority per
    the mission brief, and it is already fidelity-locked so this file does not
    re-derive colors, it inherits them.
  Where a token exists in the §4.1 dialect but neither source measures a
  distinct value for it, the FN file's own aliasing precedent is followed
  (reuse the primary hue rather than inventing a new one) — see individual
  comments below.

  Live corroboration note: http://qa.viraldecay.com/cockpit was not fetched
  in this pass (no live browsing tool available in this session) — the VD
  structure below is sourced from the app.css file only, per the mission's
  "if unreachable, note it and proceed from the file" fallback.

  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 (except where a token
  itself IS the raw value, matching every existing sibling render file's own
  convention). Token NAMES match the existing render files' §4.1 dialect so
  the switcher only ever changes the data-theme attribute (D-S07-FW-01).

  LASER SYSTEM NOTE: VD's racing-border technique (app.css:123-160, "two-layer
  background-clip: layer 1 solid fill clipped to padding-box, layer 2 conic-
  gradient clipped to border-box") is carried over onto .bu-input:focus and
  .bu-input:user-invalid — the one VD laser instance that targets a class
  (.bu-input) which exists verbatim, unmodified, in every host's bento-grid.css
  Primer already. VD's OTHER laser instance (.bu-panel--hero:hover, app.css:
  257-289) targets a modifier class (.bu-panel--hero) that does not exist in
  this codebase's Primer — inventing it here would mean editing bento-grid.css
  structure, which is explicitly OUT OF SCOPE for this render-only slice, so
  .bu-panel itself gets VD's simpler base-panel treatment instead (app.css:
  393-409 — border-color shift + box-shadow intensify on hover/focus-within,
  no animation), exactly mirroring how render-fight-night.css and
  render-amethyst-dark.css already treat .bu-panel. A custom-property name
  (--executive-laser-angle / executive-laser-travel) distinct from VD's own
  (--laser-angle / laser-travel) is used so this file's @property/@keyframes
  never collide with any other skin that might carry the same technique later.
  ===========================================================================
*/

:root[data-theme="executive-blue"] {
  /* --- Surfaces -----------------------------------------------------------
     Canvas: structure app.css:50 (flat single-hex page canvas) — color FN:58
     (--theme-bg-canvas: #030403).
     Surface (header/footer/structural bars): structure app.css:51 — color
     FN:59 (rgba(255,255,255,0.04)).
     Frosted panel fill: structure app.css:52 (linear-gradient(135deg, <canvas-
     tint> 0.8 -> <accent-tint> 0.15) — VD's own two-stop "dark corner fading
     to a low-alpha brand tint" recipe, alpha stops 0.8/0.15 kept exact) —
     colors substituted with FN's canvas (#030403, FN:58) and accent
     (#0047ab, FN:64/94).
     Card / deeper surface: structure app.css:53 — color FN:61 (rgba(255,255,
     255,0.07), FN's own measured elevated-card fill).
     Border-inactive: structure app.css:68 — color FN:63 (rgba(255,255,255,
     0.12)).
     Border-active: structure app.css:69 — color FN:64 (#0047ab) — this is
     the exact convergence R-0709-19 calls out ("the blue full-perimeter
     border on the FOR OWNERS card + the blue hover border effect on Fight
     Night"). */
  --theme-bg-canvas: #030403;
  --theme-bg-surface: rgba(255, 255, 255, 0.04);
  --theme-bg-frosted: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 71, 171, 0.10) 100%);
  --theme-bg-card: rgba(255, 255, 255, 0.07);
  --theme-x-bg-sunken: #030403;
  --theme-border-inactive: rgba(255, 255, 255, 0.12);
  /* #201 (WCAG 1.4.11): resting form-field boundary. #5f7aa8 (blue slate, never neutral grey) measures ~4.4:1 vs the
     panel surface (~#0e0f12), ~4.7:1 vs canvas #030403, ~3.7:1 vs the field fill (~#1f2023). */
  --theme-x-border-field: #5f7aa8;
  --theme-border-active: #0047ab;

  /* --- Text roles -----------------------------------------------------------
     Main: FN:82 (#ffffff). Muted: FN:84 (#888888). FN's own dialect has no
     distinct third "secondary" tier hex (see FN:83's comment — it aliases
     x-text-secondary to the same #888888 rather than inventing a mid-tone);
     followed here rather than inventing a VD-side mid-tone that FN's own
     measured pass does not support. Inverse: FN:85 (#030403). Disabled:
     FN:86 (#6b7280 — FN's own flagged NO-SOURCE gap value, inherited as-is
     since FN is this file's color authority and this file invents nothing
     beyond what FN already carries). */
  --theme-text-main: #F0F4FA;
  --theme-x-text-secondary: #B4C4DC;
  --theme-text-muted: #A0B4D4;
  --theme-x-text-inverse: #030403;
  --theme-x-text-disabled: #6b7280;

  /* --- Interactive states -----------------------------------------------
     Accent: FN:94 (#0047ab). Secondary accent: FN:95 aliases secondary to
     primary (no distinct second hue in FN's own sources) — same aliasing
     followed here. Hover/active: FN:96-97 (#0047ab, FN itself has no
     distinct measured hover hex and reuses the accent — followed identically).
     Disabled: FN:98 (rgba(0,71,171,0.4)). Accent text: FN:99 (#ffffff).
     Focus ring: was FN:100 (#0047ab), which measured 2.43:1 on the #030403
     canvas — under the 3:1 WCAG 1.4.11 floor for a focus indicator (EB-05 /
     ADM-EB-07, 2026-10-10; MT-57 is the missing-ring sibling). Now aliased to
     this skin's own light-cobalt member, --theme-x-state-info (#4fa3ff, FN:127,
     ~7.8:1 on canvas) — the same blue family, no new colour. A tuning knob
     for the owner's live pass (R-1010-01 item 4), not a fixed decision. */
  --theme-accent-primary: #0047ab;
  --theme-accent-secondary: var(--theme-accent-primary);
  --theme-x-accent-hover: #0047ab;
  --theme-x-accent-active: #0047ab;
  --theme-x-accent-disabled: rgba(0, 71, 171, 0.4);
  --theme-x-accent-text: #ffffff;
  --theme-x-focus-ring: var(--theme-x-state-info);

  /* --- Feedback colors ----------------------------------------------------
     All four inherited directly from FN's own already-adjudicated values
     (FN:124-127) — healthy #20cc0e (FN's own comment records this as the
     owner-resolved value where FN's two official sources disagreed), warning
     #fbbf24, error #ef4444, info #4fa3ff. No re-adjudication performed here;
     FN already did it. */
  --theme-state-healthy: #20cc0e;
  --theme-state-warning: #fbbf24;
  --theme-state-error: #ef4444;
  --theme-x-state-info: #4fa3ff;

  /* --- Elevation / glass effects ------------------------------------------
     Panel shadow radius: structure app.css:402 (0 0 15px, rest state) / :408
     (0 0 25px, hover/focus-within state) — VD's own two-step glow escalation
     kept exact. Color: FN:137 (rgba(0,71,171,0.5), FN's own --theme-x-
     elevation-3 glow hue). Inset highlight: structure app.css:402/408 (inset
     0 0 6px / 8px at 0.08 alpha of the accent) — alpha/radius kept exact,
     hue substituted to accent #0047ab.
     Glass tint: structure app.css (VD's sibling amethyst-dark render uses
     rgba(<accent>,0.05) for this token — same 0.05-alpha-of-accent recipe,
     substituted to FN's accent hue).
     Backdrop blur: structure app.css:77 (blur(16px)) — VD's own measured
     depth, kept exact (a structural/effect parameter, not a color, so it is
     NOT replaced with FN's own 25px — FN's blur value belongs to FN's own
     file only, per the mission's "structure exact from VD" instruction).
     Page-scrim blur: structure app.css:82 (blur(10px) saturate(0.65)), kept
     exact for the same reason. */
  --theme-x-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --theme-x-elevation-2: 0 0 15px rgba(0, 71, 171, 0.5);
  --theme-x-elevation-3: 0 0 25px rgba(0, 71, 171, 0.5);
  --theme-accent-glow: 0 0 15px rgba(0, 71, 171, 0.5);
  --theme-accent-glow-secondary: 0 0 15px rgba(0, 71, 171, 0.5);
  --theme-x-glass-tint: rgba(0, 71, 171, 0.05);
  --theme-backdrop-blur: 25px;
  --theme-x-page-scrim-blur: blur(10px) saturate(0.65);

  /* --- Laser system toggle (structure app.css:85, --laser-enabled) — kept
     as its own namespaced custom property (see file header) so this skin's
     racing-border animation can be disabled per-scope exactly as VD's can,
     without colliding with any other skin's identical mechanism. */
  --executive-laser-enabled: 1;

  /* --- Spacing / typography scale (unchanged structural boilerplate,
     identical across every sibling render file — no font-loading mechanism
     is documented for this app's asset pipeline, so type CHOICE is expressed
     via the structural font variable, not a raw @font-face, matching
     render-amethyst-dark.css's identical reasoning). */
  --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 (EB-04, 2026-10-10) -----------------------------------
     A dark skin that never declares itself dark gets the browser's LIGHT
     native widgets: white checkbox/radio boxes, a light classic scrollbar,
     light option popups and a grey Win95 "Choose File" button inside the dark
     frosted panels. color-scheme tells the browser to draw its own widgets
     dark; accent-color tints checked boxes/radios with the same 3:1-safe
     light cobalt as the focus ring (see --theme-x-focus-ring above). */
  color-scheme: dark;
  accent-color: var(--theme-x-state-info);
}

/* CLASS CALENDAR COLOURS (R-1023-11, R-1023-31) - THE PALETTE THE SKIN OWNS.
   12 named swatches (--theme-swatch-KEY-bg / -edge / -fg): a tinted dark block fill, a bright left edge, and light text.
   Every fg on its bg is >= 9:1 (WCAG 1.4.3 needs 4.5), every edge on the canvas is >= 4.5:1 and on its own fill >= 3.5:1
   (1.4.11), the muted cancelled text on every fill is >= 5:1; CalendarColourTokenTests recomputes all of it.
   Style slots 1..8 (assigned by the Api from SchoolStyles order) default to eight distinct swatches below, so a school
   whose owner never picks a colour still gets a coloured calendar. An explicit colour (Phase B, ColorKey) names a swatch
   and calendar-render.css maps the key to the same three tokens. Events are coloured by type (--theme-cal-event-TYPE-*).
   Colour is never the only signal: the style NAME stays in the text and the edge line pattern stays (calendar.css).
   Red and green are in the palette because the owner asked for them (2026-10-24); they are tinted fills with the style
   name beside them, and the semantic state tokens (--theme-state-*) are not reused. Fight Night is untouched. */
:root[data-theme="executive-blue"] {
  --theme-swatch-red-bg: #451817; --theme-swatch-red-edge: #ed5f5a; --theme-swatch-red-fg: #F0F4FA;
  --theme-swatch-orange-bg: #452917; --theme-swatch-orange-edge: #ed955a; --theme-swatch-orange-fg: #F0F4FA;
  --theme-swatch-amber-bg: #453917; --theme-swatch-amber-edge: #edc55a; --theme-swatch-amber-fg: #F0F4FA;
  --theme-swatch-lime-bg: #324517; --theme-swatch-lime-edge: #b2ed5a; --theme-swatch-lime-fg: #F0F4FA;
  --theme-swatch-green-bg: #174526; --theme-swatch-green-edge: #5aed8b; --theme-swatch-green-fg: #F0F4FA;
  --theme-swatch-teal-bg: #17453f; --theme-swatch-teal-edge: #5aedd9; --theme-swatch-teal-fg: #F0F4FA;
  --theme-swatch-cyan-bg: #173c45; --theme-swatch-cyan-edge: #5ad2ed; --theme-swatch-cyan-fg: #F0F4FA;
  --theme-swatch-blue-bg: #172a45; --theme-swatch-blue-edge: #5a97ed; --theme-swatch-blue-fg: #F0F4FA;
  --theme-swatch-indigo-bg: #171845; --theme-swatch-indigo-edge: #7579f0; --theme-swatch-indigo-fg: #F0F4FA;
  --theme-swatch-violet-bg: #2a1745; --theme-swatch-violet-edge: #a875f0; --theme-swatch-violet-fg: #F0F4FA;
  --theme-swatch-magenta-bg: #451739; --theme-swatch-magenta-edge: #ed5ac8; --theme-swatch-magenta-fg: #F0F4FA;
  --theme-swatch-slate-bg: #272d35; --theme-swatch-slate-edge: #91a0b6; --theme-swatch-slate-fg: #F0F4FA;
  --theme-cal-style-1-bg: var(--theme-swatch-blue-bg); --theme-cal-style-1-edge: var(--theme-swatch-blue-edge); --theme-cal-style-1-fg: var(--theme-swatch-blue-fg);
  --theme-cal-style-2-bg: var(--theme-swatch-orange-bg); --theme-cal-style-2-edge: var(--theme-swatch-orange-edge); --theme-cal-style-2-fg: var(--theme-swatch-orange-fg);
  --theme-cal-style-3-bg: var(--theme-swatch-green-bg); --theme-cal-style-3-edge: var(--theme-swatch-green-edge); --theme-cal-style-3-fg: var(--theme-swatch-green-fg);
  --theme-cal-style-4-bg: var(--theme-swatch-magenta-bg); --theme-cal-style-4-edge: var(--theme-swatch-magenta-edge); --theme-cal-style-4-fg: var(--theme-swatch-magenta-fg);
  --theme-cal-style-5-bg: var(--theme-swatch-cyan-bg); --theme-cal-style-5-edge: var(--theme-swatch-cyan-edge); --theme-cal-style-5-fg: var(--theme-swatch-cyan-fg);
  --theme-cal-style-6-bg: var(--theme-swatch-amber-bg); --theme-cal-style-6-edge: var(--theme-swatch-amber-edge); --theme-cal-style-6-fg: var(--theme-swatch-amber-fg);
  --theme-cal-style-7-bg: var(--theme-swatch-violet-bg); --theme-cal-style-7-edge: var(--theme-swatch-violet-edge); --theme-cal-style-7-fg: var(--theme-swatch-violet-fg);
  --theme-cal-style-8-bg: var(--theme-swatch-indigo-bg); --theme-cal-style-8-edge: var(--theme-swatch-indigo-edge); --theme-cal-style-8-fg: var(--theme-swatch-indigo-fg);
  --theme-cal-event-grading-bg: var(--theme-swatch-amber-bg); --theme-cal-event-grading-edge: var(--theme-swatch-amber-edge); --theme-cal-event-grading-fg: var(--theme-swatch-amber-fg);
  --theme-cal-event-seminar-bg: var(--theme-swatch-indigo-bg); --theme-cal-event-seminar-edge: var(--theme-swatch-indigo-edge); --theme-cal-event-seminar-fg: var(--theme-swatch-indigo-fg);
  --theme-cal-event-tournament-bg: var(--theme-swatch-magenta-bg); --theme-cal-event-tournament-edge: var(--theme-swatch-magenta-edge); --theme-cal-event-tournament-fg: var(--theme-swatch-magenta-fg);
  --theme-cal-event-openmat-bg: var(--theme-swatch-teal-bg); --theme-cal-event-openmat-edge: var(--theme-swatch-teal-edge); --theme-cal-event-openmat-fg: var(--theme-swatch-teal-fg);
  --theme-cal-event-other-bg: var(--theme-swatch-cyan-bg); --theme-cal-event-other-edge: var(--theme-swatch-cyan-edge); --theme-cal-event-other-fg: var(--theme-swatch-cyan-fg);
  --theme-cal-event-closure-bg: var(--theme-swatch-slate-bg); --theme-cal-event-closure-edge: var(--theme-swatch-slate-edge); --theme-cal-event-closure-fg: var(--theme-swatch-slate-fg);
}

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

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

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

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

/* ----------------------------------------------------------------------
   PANEL — VD's frosted-glass laser panel (app.css:393-409), recolored.
   Base state: frosted gradient fill, 1px inactive border, mild glow.
   Hover / focus-within: border snaps to the full accent hue + stronger
   glow (app.css:406-409 / 173-176) — VD's "panel intensify," not the
   racing-border variant (see file header: that variant needs a modifier
   class this Primer does not define).
   ---------------------------------------------------------------------- */
:root[data-theme="executive-blue"] .bu-panel {
  background: var(--theme-bg-frosted);
  border: 1px solid var(--theme-border-inactive);
  box-shadow: var(--theme-x-elevation-2), inset 0 0 6px rgba(0, 71, 171, 0.08);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  color: var(--theme-text-main);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

:root[data-theme="executive-blue"] .bu-panel:hover,
:root[data-theme="executive-blue"] .bu-panel:focus-within {
  border-color: var(--theme-border-active);
  box-shadow: var(--theme-x-elevation-3), inset 0 0 8px rgba(0, 71, 171, 0.08);
}

/* REVEAL (.bu-reveal — the Primer's required first child of every .bu-panel,
   app.css:447-453's 2px glowing accent line, recolored). Brightens further
   when the panel gains focus-within, mirroring app.css:178-188's multi-stop
   brightening recipe. */
/* PORT CORRECTION 2026-10-10: the source effect is a 2px glowing accent LINE
   (app.css:447-453), and the port set it as the element's whole background.
   In the VD source the element it targeted was a thin rule; in this Primer
   .bu-reveal is the panel's HEADING WRAPPER (bento-grid.css: "the panel's
   structural header/intro slot"), so the gradient filled the entire heading
   block and painted a blue bar behind the panel title. Same light, drawn as
   the 2px line it was always meant to be, under the heading. */
:root[data-theme="executive-blue"] .bu-panel > .bu-reveal:first-child {
  background: linear-gradient(to right, transparent, var(--theme-border-active), transparent)
    bottom left / 100% 2px no-repeat;
}

:root[data-theme="executive-blue"] .bu-panel:focus-within > .bu-reveal:first-child {
  background: linear-gradient(
      to right,
      transparent,
      rgba(0, 71, 171, 0.6),
      var(--theme-border-active),
      rgba(0, 71, 171, 0.6),
      transparent
    )
    bottom left / 100% 2px no-repeat;
  filter: brightness(1.5);
}

:root[data-theme="executive-blue"] .bu-rail {
  background-color: rgba(3, 4, 3, 0.9);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  border-bottom: 1px solid var(--theme-border-inactive);
  color: var(--theme-text-main);
}

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

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

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

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

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

/* EB-06 / ADM-EB-05 (2026-10-10): the hovered label was --theme-x-text-inverse
   (#030403) on the #0047ab fill — 2.43:1, so every hovered rail tab, close
   button and the '?' trigger nearly lost its text. White on #0047ab is 8.44:1.
   :not(:disabled) so a disabled control no longer lights up as if clickable. */
:root[data-theme="executive-blue"] .bu-control:hover:not(:disabled) {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-accent-text);
}

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

/* --- Buttons ------------------------------------------------------------
   R-1016-01 (owner, 2026-10-16, live on /pricing: "skins good but buttons need
   to match"; on the preview: "better dose not heart my eyes"). The button now
   wears the PANEL recipe above: frosted fill, full-perimeter border, the same
   glow on hover — a small panel, not the old flat grey rail (top/bottom-only
   border) that read as a different skin. Existing tokens only, no new colour;
   values remain owner tuning knobs (R-1010-01 item 4). */
:root[data-theme="executive-blue"] .bu-btn {
  background: var(--theme-bg-frosted);
  border: 1px solid var(--theme-border-active);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
  box-shadow: var(--theme-x-elevation-2), inset 0 0 6px rgba(0, 71, 171, 0.08);
  color: var(--theme-x-accent-text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

:root[data-theme="executive-blue"] .bu-btn:hover:not(:disabled) {
  background: var(--theme-bg-frosted);
  border-color: var(--theme-x-accent-hover);
  box-shadow: var(--theme-x-elevation-3), var(--theme-accent-glow);
}

:root[data-theme="executive-blue"] .bu-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--theme-x-accent-disabled);
  box-shadow: none;
  color: var(--theme-x-text-disabled);
}

:root[data-theme="executive-blue"] .bu-btn-secondary {
  background-color: transparent;
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

/* ADM-EB-06 (2026-10-10): hover used to recolour the LABEL to #0047ab on the
   transparent button over the #030403 canvas — 2.43:1 — and the border change
   was a no-op (#0047ab -> #0047ab), so the only feedback was the text going
   dark. Same treatment as render-cobalt-dark.css:277-282: the label stays
   white and hover shows as a cobalt tint plus the skin's own glow. The tint is
   the accent at 0.16 alpha, the same cobalt identity, no new colour. */
:root[data-theme="executive-blue"] .bu-btn-secondary:hover:not(:disabled) {
  background-color: rgba(0, 71, 171, 0.16);
  border-color: var(--theme-x-accent-hover);
  color: var(--theme-text-main);
  box-shadow: var(--theme-accent-glow);
}

/* Disabled .bu-control / .bu-btn-secondary had no state of their own in this
   skin (only .bu-btn did), so a disabled Cancel or Edit looked clickable. Same
   tokens .bu-btn:disabled uses. Added with the ADM-EB-05 / -18 hover guards. */
:root[data-theme="executive-blue"] .bu-control:disabled,
:root[data-theme="executive-blue"] .bu-btn-secondary:disabled {
  border-color: var(--theme-x-accent-disabled);
  color: var(--theme-x-text-disabled);
}

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

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

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

/* ============================================================
   LASER ANIMATION SYSTEM (VD app.css:123-160, structure carried over
   verbatim onto .bu-input — see file header for why .bu-panel does not
   get the racing variant). Two-layer background-clip technique: layer 1
   is a solid fill clipped to padding-box (content area stays static);
   layer 2 is a conic-gradient clipped to border-box (light travels only
   in the border). Custom property namespaced to this file (see header).
   ADM-EB-14 (2026-10-10): "layer 1" was var(--theme-bg-surface), which is
   rgba(255,255,255,0.04) — nearly transparent — so the cobalt (or red) wedge
   clipped to the border box showed through the WHOLE field and swept behind
   the typed text. Layer 1 is now the resting field fill (card) laid over a
   solid canvas layer, both clipped to the padding box: opaque, and the same
   tone the field shows at rest. Tokens only.
   ============================================================ */
@property --executive-laser-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes executive-laser-travel {
  to { --executive-laser-angle: 360deg; }
}

/* Active input: light races around the field border (1.8s — app.css:143-159). */
:root[data-theme="executive-blue"] .bu-input:focus {
  outline: none;
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--theme-bg-card), var(--theme-bg-card)),
    linear-gradient(var(--theme-bg-canvas), var(--theme-bg-canvas)),
    conic-gradient(
      from var(--executive-laser-angle),
      transparent 70%,
      var(--theme-border-active) 85%,
      transparent 100%
    );
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  animation: executive-laser-travel calc(1.8s / var(--executive-laser-enabled, 1)) linear infinite;
  box-shadow: var(--theme-accent-glow);
  color: var(--theme-text-main);
}

/* Browsers without @property support — static glow border instead
   (app.css:161-169, structure kept exact). */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  :root[data-theme="executive-blue"] .bu-input:focus {
    border: 2px solid var(--theme-border-active);
    box-shadow: var(--theme-x-elevation-3), inset 0 0 8px rgba(0, 71, 171, 0.1);
    background-image: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
}

/* Invalid field: the same racing technique in the error hue (app.css:190-
   210's :user-invalid path — the automatic, no-JS-wiring browser pseudo-
   class; VD's .is-error / .bu-form-validated / .bu-otp-field classes are
   NOT carried over here, since none of those classes exist in this Primer
   and adding them would mean editing Razor markup, out of scope for this
   render-only slice). */
:root[data-theme="executive-blue"] .bu-input:user-invalid {
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--theme-bg-card), var(--theme-bg-card)),
    linear-gradient(var(--theme-bg-canvas), var(--theme-bg-canvas)),
    conic-gradient(
      from var(--executive-laser-angle),
      transparent 70%,
      var(--theme-state-error) 85%,
      transparent 100%
    );
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  animation: executive-laser-travel calc(1.2s / var(--executive-laser-enabled, 1)) linear infinite;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
  color: var(--theme-text-main);
}

/* Suppress the invalid-field laser while actively focused — don't interrupt
   typing (app.css:239-255's suppression rule, same structure). */
:root[data-theme="executive-blue"] .bu-input:user-invalid:focus {
  animation: executive-laser-travel calc(1.8s / var(--executive-laser-enabled, 1)) linear infinite;
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--theme-bg-card), var(--theme-bg-card)),
    linear-gradient(var(--theme-bg-canvas), var(--theme-bg-canvas)),
    conic-gradient(
      from var(--executive-laser-angle),
      transparent 70%,
      var(--theme-border-active) 85%,
      transparent 100%
    );
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow: var(--theme-accent-glow);
}

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

/* ===========================================================================
   THE DEPTH FIELD — the half the owner has asked for repeatedly and that
   R-0829-02 gated ("the frosted panels need something behind them to give it
   depth"). Owner, 2026-10-10: "I want a blue or cobalt version to be the
   executive skin here with the frosted panel and we need something in the
   background to give it depth."

   Same mechanism Fight Night uses for the arena (see render-fight-night.css's
   body::before scene layer): a FIXED pseudo-element at z-index -1, never on
   body itself — a filter or transform on body creates a containing block and
   breaks position:fixed descendants (the gate overlay and the slide-out drawer
   are both fixed).

   No photographic asset: the depth is built from light, so it costs nothing to
   download, never pixelates on a 4K console, and recolours from one token.
   Four layers, back to front:
     1. the cobalt key light, upper left — the "window" the frosted glass is lit by
     2. a dimmer cobalt bounce, lower right, so the field is not symmetrical
     3. a faint structural grid, far under the noise floor — reads as depth and
        engineering rather than as decoration
     4. a vignette that darkens the edges, which is what actually makes a frosted
        panel look like it is FLOATING above the surface rather than painted on
   Every alpha here is a knob the owner tunes on a real screen (his standing note:
   start straight blue, tune live; three uncalibrated monitors, so no hex is
   chosen up front). Structure and light only — the palette anchor is the skin's
   own --theme-border-active cobalt, no new colour identity is introduced. */
[data-theme="executive-blue"] body {
  background-image: none;
}

[data-theme="executive-blue"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 16% -12%, rgba(0, 71, 171, 0.34) 0%, rgba(0, 71, 171, 0.11) 38%, transparent 70%),
    radial-gradient(95% 75% at 102% 110%, rgba(0, 71, 171, 0.18) 0%, transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 72px),
    radial-gradient(135% 115% at 50% 45%, transparent 48%, rgba(0, 0, 0, 0.58) 100%),
    var(--theme-bg-canvas);
}

/* The console is the one surface that fills the window edge to edge, so the
   vignette would otherwise be hidden behind it: let the shell sit on the field
   instead of painting its own canvas over it. */
[data-theme="executive-blue"] .bu-slab {
  background-color: transparent;
}

/* RESTING FORM FIELDS — the skin carried the VD laser border for :focus and
   :user-invalid but never styled a field AT REST, so every input, select and
   textarea fell back to the browser's white box sitting inside a dark frosted
   card (visible on the sign-in page the moment this skin was wired up).
   Same selector set and the same three token roles cobalt-dark uses, so the
   two dark skins agree at rest and only their focus treatment differs. */
:root[data-theme="executive-blue"] .bu-field input[type="text"],
:root[data-theme="executive-blue"] .bu-field input[type="email"],
:root[data-theme="executive-blue"] .bu-field input[type="tel"],
:root[data-theme="executive-blue"] .bu-field input[type="password"],
:root[data-theme="executive-blue"] .bu-field input[type="number"],
:root[data-theme="executive-blue"] .bu-field input[type="date"],
:root[data-theme="executive-blue"] .bu-field input[type="url"],
:root[data-theme="executive-blue"] .bu-field select,
:root[data-theme="executive-blue"] .bu-field textarea,
:root[data-theme="executive-blue"] input.bu-input,
:root[data-theme="executive-blue"] select.bu-input,
:root[data-theme="executive-blue"] textarea.bu-input {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-x-border-field);
  color: var(--theme-text-main);
}

/* Placeholder text at the muted role, so an empty field reads as empty rather
   than as filled-in content. */
:root[data-theme="executive-blue"] .bu-field input::placeholder,
:root[data-theme="executive-blue"] .bu-field textarea::placeholder,
:root[data-theme="executive-blue"] .bu-input::placeholder {
  color: var(--theme-text-muted);
}

/* CHROME AUTOFILL — found 2026-10-10 the moment this skin was opened in a real
   Chrome with a saved login: Chrome paints its own pale background over an
   autofilled field with a UA style no ordinary background-color can beat, so
   both sign-in fields rendered near-white inside the dark frosted card while an
   empty form looked correct. Every tester with a saved password sees this; a
   browser with no stored credentials never does, which is why no previous pass
   caught it. The accepted fix is an inset shadow large enough to cover the box,
   plus text-fill-color, because those two Chrome does honour. The long
   transition delay stops Chrome re-flashing its colour on re-fill. Tokens only,
   no new colour (R-0829-02 / REQ-UNIFORM-006). */
:root[data-theme="executive-blue"] .bu-field input:-webkit-autofill,
:root[data-theme="executive-blue"] .bu-field input:-webkit-autofill:hover,
:root[data-theme="executive-blue"] .bu-field input:-webkit-autofill:focus,
:root[data-theme="executive-blue"] .bu-field select:-webkit-autofill,
:root[data-theme="executive-blue"] .bu-field textarea:-webkit-autofill,
:root[data-theme="executive-blue"] .bu-input:-webkit-autofill,
:root[data-theme="executive-blue"] .bu-input:-webkit-autofill:hover,
:root[data-theme="executive-blue"] .bu-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--theme-bg-card) inset;
  box-shadow: 0 0 0 1000px var(--theme-bg-card) inset;
  -webkit-text-fill-color: var(--theme-text-main);
  caret-color: var(--theme-text-main);
  transition: background-color 9999s ease-out 0s;
}

/* ===========================================================================
   FIELD FOCUS — one look on every field type (EB-05 / EB-10 / ADM-EB-14,
   2026-10-10).

   1. Precedence. The resting-field rule above is (0,4,1)
      (`.bu-field input[type="text"]`) and outranked the laser's (0,4,0)
      `.bu-input:focus` / `:user-invalid`, so text, email, password, tel,
      number and date inputs kept a 12%-white border over the racing light
      while selects and textareas showed the bare light: two focus looks on
      one form. (0,5,0) here restores the laser's transparent border on every
      field. Inside @supports so the no-conic fallback border above stays.
   2. A static ring. The laser is an arc over ~30% of the border and was the
      only indicator (outline:none), drawn in #0047ab at 2.43:1. Every field
      now also gets the same 3:1-safe 2px ring as the buttons — the visible-
      focus law (SRS-SECTION-06-uiux.md:416-421, WCAG 2.4.7 / 1.4.11). Same
      selector set as render-greyscale-skeleton.css:280-287.
   3. Reduced motion. Nothing stopped the endless sweep for an OS-level
      prefers-reduced-motion user (only the in-app toggle did,
      bento-grid.css :root[data-reduced-motion]). Under reduce, the field falls back to a
      static border in the same hue as the light.
   =========================================================================== */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  :root[data-theme="executive-blue"] .bu-field .bu-input:focus,
  :root[data-theme="executive-blue"] .bu-field .bu-input:user-invalid {
    border-color: transparent;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="executive-blue"] .bu-input:focus,
  :root[data-theme="executive-blue"] .bu-field .bu-input:focus {
    animation: none;
    background-image: none;
    border-color: var(--theme-border-active);
  }

  :root[data-theme="executive-blue"] .bu-input:user-invalid,
  :root[data-theme="executive-blue"] .bu-field .bu-input:user-invalid {
    animation: none;
    background-image: none;
    border-color: var(--theme-state-error);
  }

  :root[data-theme="executive-blue"] .bu-input:user-invalid:focus,
  :root[data-theme="executive-blue"] .bu-field .bu-input:user-invalid:focus {
    animation: none;
    background-image: none;
    border-color: var(--theme-border-active);
  }
}

/* Native select popups ignore rgba glass fills on some platforms, so white
   option text could land on a light UA popup (EB-04 / ADM-EB-04). Same guard
   as render-cobalt-dark.css:318-325: a solid canvas under each option. */
:root[data-theme="executive-blue"] .bu-field select option,
:root[data-theme="executive-blue"] select.bu-input option {
  background-color: var(--theme-bg-canvas);
  color: var(--theme-text-main);
}

/* File picker button (EB-04): rendered as a light-grey UA button with black
   text inside the dark report panel. Shape lives in the Primer
   (bento-grid.css, input[type="file"]::file-selector-button); this is the
   .bu-control face. */
:root[data-theme="executive-blue"] 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="executive-blue"] input[type="file"]:hover::file-selector-button {
  background-color: var(--theme-x-accent-hover);
  color: var(--theme-x-accent-text);
}

/* ===========================================================================
   ADMIN COMPONENT COVERAGE — REQ-UNIFORM-005 AC-005.1 selector parity
   (SRS-SECTION-06B-student-tabs-mobile-overflow.md:826-835). Findings EB-01,
   EB-02, EB-03, ADM-EB-01..-03, -08..-13 and -26, 2026-10-10.

   When this skin became the admin's one fixed skin (R-1010-01) it styled 62 of
   the ~135 selectors render-greyscale-skeleton.css styles. Everything below is
   the missing set, ported from render-cobalt-dark.css (the other dark admin
   skin) onto THIS skin's own tokens. No new colour: every value is a token
   from the block at the top of this file, or this skin's accent/canvas at an
   alpha, which the file already uses raw elsewhere.

   INTENTIONAL OMISSIONS (AC-005.1 allows them when listed here):
   - .bu-slideout-content, .bu-slideout-placeholder: always rendered together
     with .bu-panel (SlideOutPanel.razor), so the frosted .bu-panel rule above
     IS their surface. A second fill here would paint over the R-1010-01 glass
     and bring back cobalt-dark's top-only border "notch" the ruling removed.
   =========================================================================== */

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

:root[data-theme="executive-blue"] .bu-hero-label,
:root[data-theme="executive-blue"] .bu-hero-lede {
  color: var(--theme-x-text-secondary);
}

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

/* Stat tiles (ADM-EB-08): drawn as cards, not loose indented text. */
:root[data-theme="executive-blue"] .bu-metric {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
}

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

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

:root[data-theme="executive-blue"] .bu-transom,
:root[data-theme="executive-blue"] .bu-mullion {
  background-color: var(--theme-border-inactive);
}

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

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

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

/* --- Forms (ADM-EB-13): a field caption is subordinate to its value. ------- */
:root[data-theme="executive-blue"] .bu-field label {
  color: var(--theme-x-text-secondary);
}

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

/* --- Panel / section copy roles ------------------------------------------- */
:root[data-theme="executive-blue"] .bu-panel-title,
:root[data-theme="executive-blue"] .bu-corner-title,
:root[data-theme="executive-blue"] .bu-command-title,
:root[data-theme="executive-blue"] .bu-section-heading,
:root[data-theme="executive-blue"] .bu-panel-headline,
:root[data-theme="executive-blue"] .bu-media-title,
:root[data-theme="executive-blue"] .bu-pillar-title {
  color: var(--theme-text-main);
}

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

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

/* --- Gauges, progress track, tactical node (EB-01): the SVG rings and the
   polygon have fill:none and no stroke colour until a skin gives them one,
   so under this skin they were invisible and only the % text showed. ------ */
:root[data-theme="executive-blue"] .bu-gauge-value {
  color: var(--theme-text-main);
}

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

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

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

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

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

/* --- Media / slat samples -------------------------------------------------- */
:root[data-theme="executive-blue"] .bu-media-frame {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
}

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

:root[data-theme="executive-blue"] .bu-play-icon {
  fill: var(--theme-text-main);
}

:root[data-theme="executive-blue"] .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="executive-blue"] .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="executive-blue"] .bu-slat {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-border-inactive);
  border-radius: 4px;
}

:root[data-theme="executive-blue"] .bu-slat-level {
  color: var(--theme-text-main);
}

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

/* --- Status dots (ADM-EB-02) — the Primer gives the dot size and shape only
   (bento-grid.css .bu-status-dot), so with no rule here every dot was transparent: the
   console header's live dot, the roster status column, the retention tiles
   and every heat-map cell showed no state at all. This skin already carries
   real state hues (healthy #20cc0e, warning #fbbf24, error #ef4444 — FN's
   adjudicated values, top of file); they are now actually used. Neutral stays
   a muted dot with no glow (honest fail-safe, never coloured as healthy).
   The heat map also gained a glyph per cell (RetentionPanel.razor) so the
   state is never carried by colour alone. ------------------------------------ */
:root[data-theme="executive-blue"] .bu-status-dot {
  background-color: var(--theme-text-muted);
}

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

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

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

:root[data-theme="executive-blue"] .bu-status-dot.is-neutral {
  background-color: var(--theme-text-muted);
  box-shadow: none;
}

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

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

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

/* --- Footer parts ---------------------------------------------------------- */
:root[data-theme="executive-blue"] .bu-footer {
  border-top: 2px solid var(--theme-border-inactive);
  background-color: var(--theme-bg-surface);
}

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

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

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

/* --- Paperwork nag (ADM-EB-11, R-S7-15): warning semantics, never error.
   #030403 on #fbbf24 is ~12:1 for the '!' glyph. ---------------------------- */
:root[data-theme="executive-blue"] .bu-nag-warning {
  background-color: var(--theme-bg-card);
  border: 1px solid var(--theme-state-warning);
  color: var(--theme-text-main);
}

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

/* --- Badges (EB-02 / ADM-EB-10): Default, Danger, Mastery, Eligible, At Risk,
   Expired and Expiring soon all computed the same white outline, so severity
   showed only in the words. Neutral = accent border; danger = error; mastery
   = healthy; warning = warning. The scoped .warning rule also outranks the
   unscoped `.bu-badge.warning` in render-cobalt-dark.css and
   render-greyscale-skeleton.css, which reads the undefined --state-warning
   and so does nothing on admin. -------------------------------------------- */
:root[data-theme="executive-blue"] .bu-badge {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
}

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

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

:root[data-theme="executive-blue"] .bu-badge.warning {
  border-color: var(--theme-state-warning);
  color: var(--theme-state-warning);
}

/* --- Alerts (EB-02 / ADM-EB-03): the KEY-COMMAND ribbon grammar
   (BUP-UIUX-KEY-COMMAND_2026-07-13.md:201-208): a 4px left bar in the state
   colour, a faint tint of it and a softened border. Without these the
   Primer's colourless border fell back to currentColor and every Dashboard
   warning was a stark white box with nothing marking it as a danger. Text
   stays --theme-text-main for reading contrast on the frosted panel. ------- */
:root[data-theme="executive-blue"] .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="executive-blue"] .bu-alert.danger {
  background-color: color-mix(in srgb, var(--theme-state-error) 8%, transparent);
  border-color: color-mix(in srgb, var(--theme-state-error) 55%, transparent);
  border-left-color: var(--theme-state-error);
}

/* --- Tables (EB-03 / ADM-EB-12): the Primer's colourless 1px row rule fell
   back to solid white under every row; the skin's 12% hairline instead. ---- */
:root[data-theme="executive-blue"] .bu-table th,
:root[data-theme="executive-blue"] .bu-table td {
  border-bottom-color: var(--theme-border-inactive);
  color: var(--theme-text-main);
}

:root[data-theme="executive-blue"] .bu-table th {
  color: var(--theme-x-text-secondary);
}

/* =========================================================================
   COMMAND CONSOLE — header, bridge chips, tab rails, well, gate notice.
   ========================================================================= */
:root[data-theme="executive-blue"] .bu-console-header {
  border-bottom: 1px solid var(--theme-border-inactive);
  background: var(--theme-bg-frosted);
  backdrop-filter: blur(var(--theme-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--theme-backdrop-blur));
}

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

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

/* TAB RAIL (ADM-EB-01). With no .bu-tab-btn rule every rail button painted
   from .bu-control, so the open tab looked exactly like every other tab.
   Rest: frosted glass, inactive hairline, secondary text. Hover: the panel
   "intensify" (cobalt border + glow, white text), the same light the frosted
   panels use. Active: cobalt fill, white text (8.44:1), glow, PLUS the
   KEY-COMMAND recognition marker (BUP-UIUX-KEY-COMMAND_2026-07-13.md:111-112,
   "border-left:3px ... recognition marker, not decoration"), drawn as a 3px
   inset bar in the light cobalt so it reads against the fill (~3.2:1). It is
   a shape cue, so the open tab is not signalled by colour alone (SRS 06
   :416-421). An inset shadow rather than border-left, so the label does not
   shift 2px. R-1010-01:29 discharged the R-0829-02 gate that
   TabRail.razor:57-60 cites for leaving this out. --------------------------- */
:root[data-theme="executive-blue"] .bu-tab-btn {
  background-color: var(--theme-bg-surface);
  background-image: 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="executive-blue"] .bu-tab-btn:hover:not(:disabled):not(.is-active) {
  background-color: var(--theme-bg-card);
  border-color: var(--theme-border-active);
  color: var(--theme-text-main);
  box-shadow: var(--theme-x-elevation-2);
}

:root[data-theme="executive-blue"] .bu-tab-btn.is-active,
:root[data-theme="executive-blue"] .bu-tab-btn.is-active:hover:not(:disabled) {
  background-color: var(--theme-accent-primary);
  background-image: none;
  border-color: var(--theme-accent-primary);
  color: var(--theme-x-accent-text);
  box-shadow: inset 3px 0 0 var(--theme-x-state-info), var(--theme-accent-glow);
}

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

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

/* Close (the X) on the well and both drawers. :hover:not(:disabled) so it
   outranks the .bu-control hover above (same specificity, later wins). */
:root[data-theme="executive-blue"] .bu-slideout-close {
  background-color: transparent;
  border-color: var(--theme-border-inactive);
  color: var(--theme-x-text-secondary);
}

:root[data-theme="executive-blue"] .bu-slideout-close:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--theme-state-error);
  color: var(--theme-state-error);
}

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

/* Console gate notice (ADM-EB-09): the "Coming soon" / tier-locked card used to
   float with no surface over the greyed content. Scrim = this skin's canvas at
   0.6; the card is the same frosted glass and full-perimeter cobalt border as
   every R-1010-01 panel. */
:root[data-theme="executive-blue"] .cc-gate-notice {
  background-color: rgba(3, 4, 3, 0.6);
}

:root[data-theme="executive-blue"] .cc-upgrade-card {
  background: var(--theme-bg-frosted);
  border: 1px 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="executive-blue"] .cc-upgrade-card p,
:root[data-theme="executive-blue"] .cc-upgrade-dismiss {
  color: var(--theme-x-text-secondary);
}

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

/* EMBEDDED SETTINGS PAGES (ADM-EB-16 / ADM-EB-17b). School Profile, Theme &
   Style, Curriculum, Regulatory and Class Sessions are routed pages rendered
   inside the console well, which is itself a frosted .bu-panel. Each of their
   cards drew a second frosted fill, border, glow and blur inside it, both
   borders lit together on hover, and the content edge landed at 57px (32 well
   + 1 border + 24 card) against 32px on Dashboard/Roster/Payments/Retention.
   Inside the well each inner card becomes a plain section on the well's own
   surface — the same repair RetentionPanel.razor and BillingOverviewPanel.razor
   already made in markup — and its heading loses the 2px panel underline, so
   section headings look the same on every tab. Scoped to .bu-embedded-page
   (Home.razor), so the standalone /school-profile, /theme-settings,
   /curriculum, /regulatory and /sessions routes keep their cards. Padding
   sits here with the appearance on purpose: a borderless card must lose its
   inset together with its border, never one without the other. */
:root[data-theme="executive-blue"] .bu-embedded-page .bu-panel,
:root[data-theme="executive-blue"] .bu-embedded-page .bu-panel:hover,
:root[data-theme="executive-blue"] .bu-embedded-page .bu-panel:focus-within {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="executive-blue"] .bu-embedded-page .bu-panel > .bu-reveal:first-child,
:root[data-theme="executive-blue"] .bu-embedded-page .bu-panel:focus-within > .bu-reveal:first-child {
  background: none;
  filter: none;
}

/* =========================================================================
   INTERNAL ADMIN HUB (Internal.razor) — staff-only (ADM-EB-26).
   ========================================================================= */
:root[data-theme="executive-blue"] .adm-hub-card:hover {
  border-color: var(--theme-border-active);
  box-shadow: var(--theme-accent-glow);
}

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

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

:root[data-theme="executive-blue"] .adm-hub-card-head strong {
  color: var(--theme-text-main);
}

/* S02 (#216, 2026-10-16): ONE border width and ONE radius scale for the three
   surfaces that read as a family. Border: 1px on panels, inputs, .bu-btn and
   .bu-btn-secondary (the focus laser's 2px ring is a focus state, not rest).
   Radius follows the documented scale in bento-grid.css: interactive controls
   <= --structure-radius-max (5px), panels/cards --structure-radius-panel (8px).
   Native checkboxes/radios take the skin accent explicitly (not only via the
   :root inheritance) so no control falls back to the browser blue/grey. */
:root[data-theme="executive-blue"] .bu-panel,
:root[data-theme="executive-blue"] .bu-btn,
:root[data-theme="executive-blue"] .bu-btn-secondary,
:root[data-theme="executive-blue"] input.bu-input:not(:focus),
:root[data-theme="executive-blue"] select.bu-input:not(:focus),
:root[data-theme="executive-blue"] textarea.bu-input:not(:focus) {
  border-width: 1px;
}

:root[data-theme="executive-blue"] .bu-panel {
  border-radius: var(--structure-radius-panel, 8px);
}

:root[data-theme="executive-blue"] .bu-btn,
:root[data-theme="executive-blue"] .bu-btn-secondary,
:root[data-theme="executive-blue"] .bu-input {
  border-radius: var(--structure-radius-max, 5px);
}

:root[data-theme="executive-blue"] input[type="checkbox"],
:root[data-theme="executive-blue"] input[type="radio"] {
  accent-color: var(--theme-x-state-info);
}


/* BUG-1 (#417): the roster profile / add-student drawer floats OVER the roster. Its fill here was --theme-bg-surface (white at 4%)
   plus the panel blur, so roster text showed through. Executive Blue gives the drawer the skin's own opaque canvas. Only the
   fill and the blur change; border, glow and layout stay as they were. Other skins are deliberately not touched. */
:root[data-theme="executive-blue"] .bu-drawer.bu-panel {
  background: var(--theme-bg-canvas);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}