/* =====================================================================
   cockpit-theme.css — JARVIS-grade HUD re-skin for the production app.
   Loaded AFTER app.css, so these rules cascade on top.

   Doctrine constraint (CLAUDE.md §10, design_rebuild_methodology memory):
     - THEME ONLY. No data flow, no handler, no Jinja, no Python touched.
     - Reverse-engineered from the 3 canonical artboards:
         design-previews/assets/audit-cockpit-target.png
         design-previews/assets/command-center-target.png
         design-previews/assets/ask-vairifeye-target.png
     - Strategy: override the load-bearing tokens on :root + a small set
       of well-scoped class rules. Leverage the existing app.css token
       system (var(--brand), var(--surface), var(--ambient-glow-*) etc.)
       so every existing class picks up the new look automatically.
     - Tenant shells (Viaero, Samsung, Nokia) keep their own --shell-accent
       overrides; only the Vairifeye shell adopts the cyan/orange dual-
       accent neon scheme by default.

   The 3 artboards locked the visual:
     - Backdrop: TRUE BLACK, atmospheric depth via radial vignette + faint grid
     - Glass: Apple Vision OS (blur 22-32px, saturate 160-180%, low-alpha gradient)
     - Primary accent: bright cyan #5bb8ff
     - Secondary accent: orange/red #ff7a3a (human-required, blockers, contrast)
     - Tertiary: lens green #b9dd90 (live), amber #d8a83a (awaiting/preview)
     - Borders: 1px neon, 0.18-0.30 alpha, with bloom drop-shadow on focal CTAs
     - Typography: existing Segoe UI Variable + Cascadia Mono stack stays
   ===================================================================== */

/* =====================================================================
   1. ROOT TOKEN OVERRIDES — the surgical strike.
   Every existing rule in app.css that uses var(--brand), var(--surface),
   var(--glass-blur), var(--ambient-glow-*) inherits the new look here.
   ===================================================================== */
:root {
  /* ── Backdrop: deeper near-black for the JARVIS field ── */
  --bg-top:    #000000;
  --bg-mid:    #04060E;
  --bg-bottom: #02030A;

  /* ── Glass: Apple Vision OS blur+saturate ── */
  --glass-blur: blur(28px) saturate(170%);
  --glass-border:        1px solid rgba(255, 255, 255, 0.08);
  --glass-border-active: 1px solid rgba(91, 184, 255, 0.32);
  --glass-border-glow:   1px solid rgba(91, 184, 255, 0.18);

  /* ── Primary accent: brighter cinematic cyan (was #2C7DFF) ── */
  --brand:        #5bb8ff;
  --brand-strong: #4387e5;
  --brand-soft:   rgba(91, 184, 255, 0.10);
  --brand-glow:   0 0 18px rgba(91, 184, 255, 0.32);
  --brand-rgb:    91, 184, 255;
  --accent:       #5bb8ff;
  --accent-soft:  rgba(91, 184, 255, 0.08);

  /* ── Glow: pronounced, focal-only (not a wash) ── */
  --glow-primary:   rgba(91, 184, 255, 0.18);
  --glow-secondary: rgba(91, 184, 255, 0.10);
  --glow-subtle:    rgba(91, 184, 255, 0.05);
  --glow-accent:    rgba(91, 184, 255, 0.14);

  /* ── Ambient: brighter neon halo around the shell ── */
  --ambient-glow-core: rgba(91, 184, 255, 0.14);   /* center wash */
  --ambient-glow-halo: rgba(91, 184, 255, 0.06);   /* mid falloff */
  --ambient-glow-edge: rgba(91, 184, 255, 0.20);   /* shell box-shadow */

  /* ── Borders: cleaner neon edges ── */
  --line:        rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.10);
  --line-glow:   rgba(91, 184, 255, 0.10);

  /* ── SECONDARY accent: orange/red for human-required, blockers, danger ── */
  /*    NEW tokens — JARVIS dual-accent grammar.                            */
  --accent-2:       #ff7a3a;
  --accent-2-strong:#e84a4b;
  --accent-2-soft:  rgba(255, 122, 58, 0.10);
  --accent-2-glow:  0 0 18px rgba(255, 122, 58, 0.32);
  --accent-2-rgb:   255, 122, 58;

  /* ── Status accents — slightly brighter than current to read on near-black ── */
  --signal-optic:      #b9dd90;     /* Lens green — live */
  --signal-optic-soft: rgba(185, 221, 144, 0.08);
  --warning:           #d8a83a;     /* Amber — awaiting / preview */
  --warning-soft:      rgba(216, 168, 58, 0.08);
  --danger:            #e84a4b;
  --danger-soft:       rgba(232, 74, 75, 0.10);
  --success:           #b9dd90;
  --success-soft:      rgba(185, 221, 144, 0.08);

  /* ── Shell accent: dual-channel for cyan + orange referencing ── */
  --shell-accent:        #5bb8ff;
  --shell-accent-soft:   rgba(91, 184, 255, 0.08);
  --shell-accent-2:      #ff7a3a;
  --shell-accent-2-soft: rgba(255, 122, 58, 0.08);

  /* ── Muted text bumped per ux-architect WCAG AA audit ──
     Original app.css value #555D7A drops to ~3.8:1 on the dark chip
     background rgba(8,10,24,0.78), failing AA. Bumping to #7d8896
     lifts to ~5.0:1, passing for normal text on chip backgrounds.
     Used by `planned` and `not-configured` truth-state pills. */
  --muted: #7d8896;

  /* ── PR #145 calibration tokens (ux-architect + product-architect spec).
     Six shared properties so the card-shape, button-shape, header-band,
     and pill grammar all reference the same source of truth. Drop-in
     reuse across PR #146+ (per-tab polish lane).
     `--glass-rim` carries the panel-border silver alpha (0.40 supporting
     tier); `--glass-rim-inset` carries the lighter inset-shadow alpha
     (0.06) used inside box-shadow recipes. Distinct semantics, distinct
     tokens — Copilot review on PR #145 caught the conflation. */
  --rail: 24px;             /* outer page rail */
  --gutter: 20px;           /* inter-section gap */
  --glass-rim: rgba(214, 220, 230, 0.40);          /* silver border hairline */
  --glass-rim-inset: rgba(255, 255, 255, 0.06);    /* inset-shadow rim */
  --glass-rim-bloom: rgba(255, 255, 255, 0.05);    /* moonlight halo */
  --card-bg-top: rgba(255, 255, 255, 0.045);       /* canonical glass top */
  --card-bg-bottom: rgba(0, 0, 0, 0.26);           /* canonical glass bottom */
  --pill-rim: rgba(255, 255, 255, 0.18);           /* default pill rim */
}

/* Tenant shells (Viaero, Samsung, Nokia) override --brand and --shell-accent
   in their own scoped blocks. Those overrides win — Vairifeye's cyan above
   is the FALLBACK for the default Vairifeye shell. The Viaero shell keeps
   its blue palette via body[data-shell="viaero"] rules elsewhere. */
body[data-shell="viaero"] {
  /* Viaero: keep their existing blue palette but on the new black backdrop. */
  --brand:        #2C7DFF;
  --brand-strong: #1B65E0;
  --brand-rgb:    44, 125, 255;
  --shell-accent: #2C7DFF;
}

/* =====================================================================
   2. ATMOSPHERIC BACKDROP — the JARVIS environment.
   Replace the body::before radial pair with a stronger neon-halo set
   plus a faint grid. body::after adds drift haze for cinematic depth.
   ===================================================================== */
body {
  /* True black backdrop with subtle vertical gradient — replaces the
     existing linear-gradient that mixed --bg-top/mid/bottom. Keeps the
     same CSS-painted backdrop pattern but at deeper, JARVIS-spec values. */
  background-image:
    radial-gradient(ellipse 50% 35% at 18% 18%, rgba(91, 184, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 82%, rgba(255, 122, 58, 0.05), transparent 65%),
    linear-gradient(180deg, var(--bg-top), var(--bg-mid) 48%, var(--bg-bottom));
}

body::before {
  /* Faint grid overlay — gives the field tactical-surface depth.
     Override the existing radial pair with a stronger neon set. */
  background:
    /* faint vertical grid lines */
    linear-gradient(90deg,
      transparent 0,
      transparent 79px,
      rgba(91, 184, 255, 0.018) 79px,
      rgba(91, 184, 255, 0.018) 80px,
      transparent 80px),
    /* faint horizontal grid lines */
    linear-gradient(0deg,
      transparent 0,
      transparent 79px,
      rgba(91, 184, 255, 0.018) 79px,
      rgba(91, 184, 255, 0.018) 80px,
      transparent 80px),
    /* corner halos */
    radial-gradient(circle at 14% 16%, rgba(91, 184, 255, 0.06), transparent 22%),
    radial-gradient(circle at 86% 84%, rgba(255, 122, 58, 0.04), transparent 24%);
  background-size: 80px 80px, 80px 80px, auto, auto;
  background-attachment: fixed;
}

/* Vignette layer — darken the edges so the center reads as the focal field.
   Inserted as a new ::after on body since ::before already carries grid + halos. */
body::after {
  /* Mat 2026-04-27 #142: "the black box that all the cards sit on, that's
     the layer between the background and the cards, is there anyway to
     make that even more transparent? Like maybe 25-35% more transparent?"
     The body::after vignette was the suspect intermediate layer. Bumped
     transparency ~33%: 0.45→0.30 mid-stop, 0.65→0.45 outer-stop. Lets
     the atmospheric Tron-grid backdrop through more. */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      transparent 0%,
      transparent 55%,
      rgba(0, 0, 0, 0.30) 90%,
      rgba(0, 0, 0, 0.45) 100%);
}

/* =====================================================================
   3. SHELL + GLASS PANEL ENHANCEMENTS — focal-element bloom.
   The existing .glass-panel rule is good; we just deepen the gradient
   and add a brighter top edge highlight to read as Apple Vision OS.
   ===================================================================== */
.glass-panel {
  /* Override the existing .glass-panel background so the white-edge
     refraction catch reads against the darker field. */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(10, 13, 30, 0.25) 35%,
    rgba(4, 6, 14, 0.55) 100%);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  border: var(--glass-border);
}

/* Optional active variant — load-bearing focal panels get the brighter
   neon edge. Apply by adding `data-state="live"` on the panel root,
   which the production app already does for live cockpit panels. */
.glass-panel[data-state="live"] {
  border: var(--glass-border-active);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(91, 184, 255, 0.10);
}
.glass-panel[data-state="human-required"] {
  border: 1px solid rgba(255, 122, 58, 0.32);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 24px rgba(255, 122, 58, 0.12);
}
.glass-panel[data-state="awaiting"] {
  border: 1px solid rgba(216, 168, 58, 0.28);
}

/* =====================================================================
   4. TOPBAR + COMMAND-NAV — header chrome reads as a HUD command bar.
   Existing .topbar.glass-panel keeps its layout; we just tighten the
   border, raise the bottom edge as a neon spine, and ensure the
   Jarvis ring SVG (.jv-topbar-ring) carries the new accent color.
   ===================================================================== */
.topbar.glass-panel {
  border-radius: 16px;
  border-bottom: 1px solid rgba(91, 184, 255, 0.14);
  box-shadow:
    var(--shadow-panel),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(91, 184, 255, 0.08);
}

/* Jarvis topbar ring color overrides REMOVED per Mat: "It recolored
   my rings though so that will have to be corrected." Original app.css
   ring colors restored — outer cyan, ticks silver, inner ring RED, arc
   uses currentColor. Letting app.css §30 (line 4916+) own the ring tint.

   FLARE per Mat: "I kind of like the ring design but it needs a little
   more flare." Adding a soft outer glow halo on the whole SVG (without
   recoloring strokes) + slight breathing animation on the assembly. */
.jv-topbar-ring {
  filter: drop-shadow(0 0 6px rgba(91, 184, 255, 0.18))
          drop-shadow(0 0 16px rgba(91, 184, 255, 0.08));
  animation: jvRingBreath 4.8s ease-in-out infinite;
}
@keyframes jvRingBreath {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(91, 184, 255, 0.16))
            drop-shadow(0 0 14px rgba(91, 184, 255, 0.06));
  }
  50% {
    filter: drop-shadow(0 0 9px rgba(91, 184, 255, 0.26))
            drop-shadow(0 0 22px rgba(91, 184, 255, 0.12));
  }
}
@media (prefers-reduced-motion: reduce) {
  .jv-topbar-ring { animation: none !important; }
}

/* =====================================================================
   5. METRIC PILLS + STATUS BADGES — tighten the JARVIS chip aesthetic.
   The existing .metric-pill and .header-badge classes get a darker fill
   and a sharper neon border to feel like a HUD readout.
   ===================================================================== */
.metric-pill {
  background: rgba(8, 10, 24, 0.78) !important;
  border: 1px solid rgba(91, 184, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(91, 184, 255, 0.12) !important;
}
.metric-pill strong {
  color: #5bb8ff !important;
  text-shadow: 0 0 8px rgba(91, 184, 255, 0.55) !important;
}

.header-badge {
  background: rgba(8, 10, 24, 0.78) !important;
  border: 1px solid rgba(91, 184, 255, 0.32) !important;
  color: #d6ecff !important;
}

/* =====================================================================
   6. NEW UTILITY PRIMITIVES — small set of reusable JARVIS chrome.
   Use sparingly; existing classes already cover most surfaces via
   token inheritance above.
   ===================================================================== */

/* Neon outline — apply to focal CTAs, important panels */
.vf-neon-outline {
  border: 1px solid rgba(91, 184, 255, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(91, 184, 255, 0.08),
    0 0 14px rgba(91, 184, 255, 0.18);
}
.vf-neon-outline--orange {
  border: 1px solid rgba(255, 122, 58, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(255, 122, 58, 0.08),
    0 0 14px rgba(255, 122, 58, 0.18);
}

/* Hex frame corners — for vault, focal stat cards. Decorative only. */
.vf-hex-corners {
  position: relative;
  isolation: isolate;
}
.vf-hex-corners::before,
.vf-hex-corners::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(91, 184, 255, 0.45);
  pointer-events: none;
}
.vf-hex-corners::before {
  top: -2px; left: -2px;
  border-right: 0;
  border-bottom: 0;
}
.vf-hex-corners::after {
  bottom: -2px; right: -2px;
  border-left: 0;
  border-top: 0;
}

/* Status dot — small breathing indicator. data-state controls color. */
.vf-state-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--shell-accent);
  box-shadow: 0 0 6px var(--shell-accent), 0 0 12px var(--shell-accent-soft);
  animation: vfStateDotBreath 2.4s ease-in-out infinite;
}
.vf-state-dot[data-state="live"]            { background: var(--success); box-shadow: 0 0 6px var(--success), 0 0 12px var(--success-soft); }
.vf-state-dot[data-state="awaiting"]        { background: var(--warning); box-shadow: 0 0 6px var(--warning), 0 0 12px var(--warning-soft); }
.vf-state-dot[data-state="human-required"]  { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2), 0 0 12px var(--accent-2-soft); }
.vf-state-dot[data-state="offline"]         { background: var(--danger); box-shadow: 0 0 6px var(--danger), 0 0 12px var(--danger-soft); }
.vf-state-dot[data-state="not-configured"]  { background: var(--muted); box-shadow: none; animation: none; }
.vf-state-dot[data-state="planned"]         { background: var(--muted); box-shadow: none; animation: none; opacity: 0.5; }

@keyframes vfStateDotBreath {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.18); filter: brightness(1.35); }
}

/* =====================================================================
   7. SHELL ENVELOPE — ensure the deep-black backdrop wins regardless
   of where existing rules paint. The .shell wrapper carries the app;
   its ambient halo + size limits stay; we just make the BACKDROP black.
   ===================================================================== */
/* IMPORTANT NOTE on !important: app.css carries more specific selectors
   for many of these rules (e.g. `body.login-body .glass-panel`), so the
   !important flag is the only reliable way for cockpit-theme.css to win.
   This is sanctioned for theme-only re-skin; the alternative would be
   editing app.css directly which is out of scope for this lane.

   SHELL-BRANDING SCOPE (per shell_branding_rule memory + governance audit):
   The Vairifeye-only chrome below is scoped to body[data-shell="vairifeye"]
   and body:not([data-shell]) so that customer shells (Viaero, Samsung,
   Nokia) keep their own backdrop and brand identity. The Viaero block at
   the top of this file (body[data-shell="viaero"]) preserves Viaero blue;
   the rules below intentionally never paint over it. */

body[data-shell="vairifeye"],
body:not([data-shell]) {
  background: #000000 !important;
}

body[data-shell="vairifeye"] .shell,
body:not([data-shell]) .shell {
  /* Stronger neon edge halo — replace the existing ambient-glow-edge box-shadow */
  box-shadow:
    0 0 120px 24px rgba(91, 184, 255, 0.16),
    0 0 240px 48px rgba(91, 184, 255, 0.06) !important;
}
body[data-shell="vairifeye"] .shell::before,
body:not([data-shell]) .shell::before {
  /* DISABLED per ux-architect iOS glass diagnostic.
     This .shell::before wash sat at z-index 0 BETWEEN body::before
     (structured atmosphere) and the .glass-panel layer. backdrop-filter
     blurs whatever is rendered behind the element in the same stacking
     context — and was sampling this near-uniform cyan overlay instead
     of the structured blooms behind. Killing it lets body::before be
     the sole, structured backdrop the glass refracts. */
  display: none !important;
}

/* =====================================================================
   8. PANEL CHROME — make each .panel and .glass-panel read as a
   load-bearing HUD card with a brighter top edge + visible neon border
   + soft outer halo. This is what closes the gap between "slightly
   darker" and "obviously JARVIS-grade" on the existing app.
   ===================================================================== */
/* DARK + TRANSPARENT GLASS WITH SILVER NEON RIM (per Mat).
   Coverage extended to cover all surface classes used across all tabs
   (Mat: "the other tabs are missing all the style"). The original
   selector list (.panel, .glass-panel, etc.) only matched a few
   sections; many production surfaces (cc-task-list, cc-alert-stream,
   cc-subsys-bay, cockpit-hud, rw-live-report, jv-frame, etc.) don't
   carry .glass-panel and were unstyled.

   Default rim is SILVER (per Mat: "Silver neon subtle glow around it").
   Cyan reserved for live state, orange for human-required. Title card
   keeps its cyan glow per Mat: "I actually like the title card the most." */
.panel,
.glass-panel,
.report-stage,
.saved-runs-panel,
.modal-panel,
.launch-bar,
.cc-posture-cell,
.cc-task-list,
.cc-alert-stream,
.cc-subsys-bay,
.cc-brain-trust,
.cc-activity,
.cc-throughput,
.cc-stat-cell,
.cockpit-hud,
.cockpit-primary,
.cockpit-side,
.audit-execution-strip,
.cockpit-ignition,
.rw-live-report,
.rw-recent-panel,
.preview-stage-fullwidth,
.jv-frame,
.jv-viewport,
.kx-pane,
.kx-posture-header,
.kx-hierarchy-card,
.kx-drawer,
.ts-region,
.ts-posture-header,
/* PR #155 — Other Tabs Polish: extend silver-rim coverage to 11 missing surfaces
   per repo-auditor inventory (a032fde1b0086b36c). Reports, Settings, Metrics tabs
   were rendering without the silver rim that Command Center + Cockpit got in #145.
   The post-audit briefing surface is intentionally NOT in coverage — its current
   selector name trips doctrine_guard ai_theater_language; rename is a separate
   doctrine-cleanup task in the audit lane. */
.report-stage-grid,
.report-stage-rail,
.report-stage-document,
.manual-review-panel,
.metrics-hero-strip,
.mh-card,
.an-kpi,
.an-conf-card,
.an-hero-panel,
.settings-panel {
  position: relative !important;
  isolation: isolate;
  /* PR #145 Issue 3: kill the polygon clip-paths (14px / 12px / 12px
     mismatch in app.css 17444+) so every card has the same silhouette
     top-to-bottom. cockpit-theme.css loads after app.css so the cascade
     wins WITHOUT !important on this property. Issue 6 also benefits —
     outer halo no longer clipped at the polygon edge. */
  clip-path: none;
  border-radius: 28px !important;
  /* PR #145 Issue 6: silver hairline rim via shared --glass-rim token
     (Copilot review fix-up on PR #145 — token now actually referenced
     instead of hard-coded). Supporting tier alpha 0.40; outer halo
     dialed back from 0.32α to 0.05α moonlight per ux-architect spec.
     Focal/live/human-required variants below own the brighter accent halos. */
  border: 1px solid var(--glass-rim) !important;
  background: linear-gradient(180deg,
    var(--card-bg-top) 0%,
    var(--card-bg-bottom) 100%) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  /* PR #145 Issue 6: layered shadow grammar.
     - Inset top white edge 0.10α (was 0.18 — softer, less plastic)
     - Inset 1px silver rim 0.06α (replaces app.css's stray hot-line)
     - Outer 6px silver moonlight 0.05α (the "alive" signal)
     - Outer 1px black ring 0.40α (anchors panel on dark backdrop without bloom)
     - Drop-shadow elevation softened (was -12px / 0.55α, now -12px / 0.45α)
     - prefers-reduced-transparency variant below drops the moonlight */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 6px var(--glass-rim-bloom),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 16px 40px -12px rgba(0, 0, 0, 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.30) !important;
}

/* — LIVE variant: keeps base card shape; swaps silver rim for cyan rim
     + adds soft cyan moonlight (8px / 0.10α) for the "alive" pulse signal.
     Coverage extended via :is() to cover all surface classes. */
:is(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel, .launch-bar,
    .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay, .cc-brain-trust,
    .cc-activity, .cc-throughput, .cc-stat-cell, .cockpit-hud, .cockpit-primary,
    .cockpit-side, .audit-execution-strip, .cockpit-ignition, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth,
    .jv-frame, .jv-viewport, .kx-pane, .ts-region)[data-state="live"],
.panel[data-state="live"],
.glass-panel[data-state="live"] {
  background: linear-gradient(180deg,
    rgba(20, 40, 64, 0.06) 0%,
    rgba(0, 0, 0, 0.30) 100%) !important;
  border: 1px solid rgba(91, 184, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(91, 184, 255, 0.10),
    0 0 8px rgba(91, 184, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 16px 40px -12px rgba(0, 0, 0, 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.30) !important;
}

/* — FOCAL variant: stronger cyan rim + brighter cyan moonlight (10px / 0.18α).
     The single panel the operator should land on first.  */
:is(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel, .launch-bar,
    .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay, .cc-brain-trust,
    .cc-activity, .cc-throughput, .cc-stat-cell, .cockpit-hud, .cockpit-primary,
    .cockpit-side, .audit-execution-strip, .cockpit-ignition, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth,
    .jv-frame, .jv-viewport, .kx-pane, .ts-region)[data-panel-weight="focal"],
.panel[data-panel-weight="focal"],
.glass-panel[data-panel-weight="focal"] {
  background: linear-gradient(180deg,
    rgba(16, 32, 56, 0.06) 0%,
    rgba(0, 0, 0, 0.30) 100%) !important;
  border: 1px solid rgba(91, 184, 255, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(91, 184, 255, 0.12),
    0 0 10px rgba(91, 184, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 24px 60px -12px rgba(0, 0, 0, 0.55),
    0 8px 24px -8px rgba(0, 0, 0, 0.35) !important;
}

/* — HUMAN-REQUIRED variant: orange rim + orange moonlight (8px / 0.18α). */
:is(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel, .launch-bar,
    .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay, .cc-brain-trust,
    .cc-activity, .cc-throughput, .cc-stat-cell, .cockpit-hud, .cockpit-primary,
    .cockpit-side, .audit-execution-strip, .cockpit-ignition, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth,
    .jv-frame, .jv-viewport, .kx-pane, .ts-region)[data-state="human-required"],
.panel[data-state="human-required"],
.glass-panel[data-state="human-required"] {
  background: linear-gradient(180deg,
    rgba(56, 26, 16, 0.06) 0%,
    rgba(0, 0, 0, 0.30) 100%) !important;
  border: 1px solid rgba(255, 122, 58, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 122, 58, 0.12),
    0 0 8px rgba(255, 122, 58, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 16px 40px -12px rgba(0, 0, 0, 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.30) !important;
}

/* — Specular sheen overlay — the missing layer per ux-architect.
     A 135deg light rake from upper-left catches eye and sells "physical
     glass plate." Renders ABOVE backdrop, UNDER content (z-index: 0).
     mix-blend-mode: screen brightens existing pixels without flat overlay.
     Applies on all panels; bracket-corner ::after stays separate. */
.panel > .vf-glass-sheen,
.glass-panel > .vf-glass-sheen,
.report-stage > .vf-glass-sheen,
.saved-runs-panel > .vf-glass-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 22%,
    transparent 45%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* — Fallback for browsers without backdrop-filter — coverage parity per
     ux-architect (Defect B from PR #141 Copilot review). Extended to
     match the main panel selector list so all surfaces degrade honestly.
     PR #145 Copilot fix-up: `.vf-chrome-band` added to keep header band
     in lockstep with other glass surfaces under no-blur degradation. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .glass-panel, .report-stage, .saved-runs-panel,
  .modal-panel, .launch-bar,
  .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
  .cc-brain-trust, .cc-activity, .cc-throughput, .cc-stat-cell,
  .cockpit-hud, .cockpit-primary, .cockpit-side, .audit-execution-strip,
  .cockpit-ignition, .rw-live-report, .rw-recent-panel,
  .preview-stage-fullwidth, .jv-frame, .jv-viewport,
  .kx-pane, .kx-posture-header, .ts-region, .ts-posture-header,
  .vf-chrome-band {
    background: linear-gradient(180deg,
      rgba(18, 24, 44, 0.92) 0%,
      rgba(10, 14, 28, 0.96) 100%) !important;
  }
}

/* — Honor user's reduced-transparency preference (coverage parity).
     PR #145 Copilot fix-up: `.vf-chrome-band` added so the header band
     degrades with the rest of the glass family. */
@media (prefers-reduced-transparency: reduce) {
  .panel, .glass-panel, .report-stage, .saved-runs-panel,
  .modal-panel, .launch-bar,
  .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
  .cc-brain-trust, .cc-activity, .cc-throughput, .cc-stat-cell,
  .cockpit-hud, .cockpit-primary, .cockpit-side, .audit-execution-strip,
  .cockpit-ignition, .rw-live-report, .rw-recent-panel,
  .preview-stage-fullwidth, .jv-frame, .jv-viewport,
  .kx-pane, .kx-posture-header, .ts-region, .ts-posture-header,
  .vf-chrome-band {
    background: rgba(10, 14, 28, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Top-edge silver spine on every panel — coverage parity per ux-architect.
   Single hairline that catches the eye and gives every panel the same
   "command surface" cap. Sub-cells (.cc-stat-cell, .cockpit-primary,
   .cockpit-side, .cockpit-ignition, .jv-viewport) excluded — they're
   inside parent panels, would double-stripe. */
.panel::before,
.glass-panel::before,
.report-stage::before,
.saved-runs-panel::before,
.cc-posture-cell::before,
.cc-task-list::before,
.cc-alert-stream::before,
.cc-subsys-bay::before,
.cc-brain-trust::before,
.cc-activity::before,
.cc-throughput::before,
.cockpit-hud::before,
.audit-execution-strip::before,
.rw-live-report::before,
.rw-recent-panel::before,
.preview-stage-fullwidth::before,
.jv-frame::before,
.kx-pane::before,
.ts-region::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 12px !important; right: 12px !important;
  height: 1px !important;
  /* Silver default — matches the rim color scheme. State variants
     (live / focal / human-required) override below to their accent. */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 220, 230, 0.65) 50%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Spine accent color follows the variant tier */
:is(.panel, .glass-panel, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
    .cc-brain-trust, .cc-activity, .cc-throughput, .cc-posture-cell,
    .cockpit-hud, .audit-execution-strip, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth, .jv-frame,
    .kx-pane, .ts-region)[data-state="live"]::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 184, 255, 0.65) 50%,
    transparent 100%) !important;
}
:is(.panel, .glass-panel, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
    .cc-brain-trust, .cc-activity, .cc-throughput, .cc-posture-cell,
    .cockpit-hud, .audit-execution-strip, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth, .jv-frame,
    .kx-pane, .ts-region)[data-panel-weight="focal"]::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 184, 255, 0.65) 50%,
    transparent 100%) !important;
}
:is(.panel, .glass-panel, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
    .cc-brain-trust, .cc-activity, .cc-throughput, .cc-posture-cell,
    .cockpit-hud, .audit-execution-strip, .rw-live-report,
    .rw-recent-panel, .preview-stage-fullwidth, .jv-frame,
    .kx-pane, .ts-region)[data-state="human-required"]::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 122, 58, 0.65) 50%,
    transparent 100%) !important;
}

/* =====================================================================
   9. NAV TABS — Command Center / Audit Cockpit / Training Studio /
   Knowledge / Agents read as HUD command buttons.
   ===================================================================== */
.command-nav button,
.command-nav [role="tab"],
.tab-btn,
.role-btn {
  border: 1px solid rgba(91, 184, 255, 0.18) !important;
  background: rgba(8, 10, 24, 0.72) !important;
  transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.command-nav button:hover,
.command-nav [role="tab"]:hover,
.tab-btn:hover,
.role-btn:hover {
  border-color: rgba(91, 184, 255, 0.45) !important;
  box-shadow: 0 0 18px rgba(91, 184, 255, 0.25) !important;
}
.command-nav button[aria-current="page"],
.command-nav button.is-active,
.command-nav [role="tab"][aria-selected="true"],
.tab-btn.is-active,
.role-btn.is-active {
  border-color: rgba(91, 184, 255, 0.65) !important;
  background: linear-gradient(180deg,
    rgba(91, 184, 255, 0.18) 0%,
    rgba(8, 10, 24, 0.85) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 28px rgba(91, 184, 255, 0.32) !important;
  color: #d6ecff !important;
}

/* =====================================================================
   10. PRIMARY CTAs — buttons with class .primary, .ghost-button,
   .cta become focal HUD action buttons with neon glow.
   ===================================================================== */
/* Glass action buttons — primary / CTA, per ux-architect spec.
   Mat: "buttons are too bright now the best way would be to adopt the
   glass feature and have the words in the middle be neon silver lines
   ... outline of the buttons be a silver glow as well." Body adopts
   panel glass family, rim is 1px silver @ 0.65α (matches HUMAN REQUIRED
   pill anchor + panel rim system), label is "neon silver" with subtle
   white halo. Brightness comes from rim/halo, never from fill.

   PR #145 Issue 4: extended selector list per repo-auditor inventory —
   the production page uses `.cc-demo-launch-button`, `.primary-button`,
   `.btn-sm`, `.btn-action`, `.btn-primary`, `.vf-btn`, `.vf-btn-primary`,
   `.cc-btn` and ALL of those were outside the silver-glass coverage.
   This extends the family without changing any of the established
   visual locks (rim α, halo px, padding, transition timing). */
.primary,
.cta-button,
button.primary,
.cc-demo-launch-button,
.primary-button,
.btn-primary,
.btn-action,
.vf-btn,
.vf-btn-primary,
.cc-btn {
  background: linear-gradient(180deg,
    rgba(8, 14, 28, 0.42) 0%,
    rgba(8, 14, 28, 0.30) 100%) !important;
  backdrop-filter: blur(40px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(120%) !important;
  border: 1px solid rgba(207, 214, 226, 0.65) !important;
  border-radius: 6px !important;
  color: rgba(207, 214, 226, 1) !important;
  text-shadow: 0 0 6px rgba(207, 214, 226, 0.45) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 14px rgba(207, 214, 226, 0.28) !important;
  padding: 0.65rem 1.4rem !important;
  cursor: pointer !important;
  transition:
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.primary:hover,
.cta-button:hover,
button.primary:hover,
.cc-demo-launch-button:hover,
.primary-button:hover,
.btn-primary:hover,
.btn-action:hover,
.vf-btn:hover,
.vf-btn-primary:hover,
.cc-btn:hover {
  border-color: rgba(207, 214, 226, 0.85) !important;
  text-shadow: 0 0 8px rgba(207, 214, 226, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 18px rgba(207, 214, 226, 0.36) !important;
}
.primary:focus-visible,
.cta-button:focus-visible,
button.primary:focus-visible,
.cc-demo-launch-button:focus-visible,
.primary-button:focus-visible,
.btn-primary:focus-visible,
.btn-action:focus-visible,
.vf-btn:focus-visible,
.vf-btn-primary:focus-visible,
.cc-btn:focus-visible {
  outline: 2px solid rgba(207, 214, 226, 0.90) !important;
  outline-offset: 2px !important;
}
.primary:active,
.cta-button:active,
button.primary:active,
.cc-demo-launch-button:active,
.primary-button:active,
.btn-primary:active,
.btn-action:active,
.vf-btn:active,
.vf-btn-primary:active,
.cc-btn:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 8px rgba(207, 214, 226, 0.20) !important;
}
.primary:disabled,
.cta-button:disabled,
button.primary:disabled,
.primary[aria-disabled="true"],
.cta-button[aria-disabled="true"],
.cc-demo-launch-button:disabled,
.primary-button:disabled,
.btn-primary:disabled,
.btn-action:disabled,
.vf-btn:disabled,
.vf-btn-primary:disabled,
.cc-btn:disabled,
.cc-demo-launch-button[aria-disabled="true"],
.primary-button[aria-disabled="true"],
.btn-primary[aria-disabled="true"] {
  border-color: rgba(207, 214, 226, 0.20) !important;
  color: rgba(207, 214, 226, 0.45) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Small button tier — same glass family but tighter padding + smaller font.
   The .btn-sm class drives action rows inside cards (e.g. agent-findings-refresh
   at index.html:2681). No app.css rule for .btn-sm so cascade specificity
   is sufficient — no !important required. */
.btn-sm {
  background: linear-gradient(180deg,
    rgba(8, 14, 28, 0.30) 0%,
    rgba(8, 14, 28, 0.20) 100%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(207, 214, 226, 0.40);
  border-radius: 6px;
  color: rgba(207, 214, 226, 0.86);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-sm:hover {
  border-color: rgba(207, 214, 226, 0.65);
  color: rgba(207, 214, 226, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 8px rgba(207, 214, 226, 0.20);
}
.btn-sm:focus-visible {
  outline: 2px solid rgba(207, 214, 226, 0.90);
  outline-offset: 2px;
}

/* Ghost / secondary tier — same language, halo only on hover */
.ghost-button,
button.ghost {
  background: linear-gradient(180deg,
    rgba(8, 14, 28, 0.30) 0%,
    rgba(8, 14, 28, 0.20) 100%) !important;
  backdrop-filter: blur(40px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(120%) !important;
  border: 1px solid rgba(207, 214, 226, 0.40) !important;
  border-radius: 6px !important;
  color: rgba(207, 214, 226, 0.78) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  padding: 0.65rem 1.4rem !important;
  cursor: pointer !important;
  transition:
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.ghost-button:hover,
button.ghost:hover {
  border-color: rgba(207, 214, 226, 0.65) !important;
  color: rgba(207, 214, 226, 1) !important;
  text-shadow: 0 0 6px rgba(207, 214, 226, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 14px rgba(207, 214, 226, 0.28) !important;
}
.ghost-button:focus-visible,
button.ghost:focus-visible {
  outline: 2px solid rgba(207, 214, 226, 0.90) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  .primary, .cta-button, button.primary,
  .ghost-button, button.ghost,
  .cc-demo-launch-button, .primary-button, .btn-primary,
  .btn-action, .btn-sm, .vf-btn, .vf-btn-primary, .cc-btn {
    transition: none !important;
  }
}

/* =====================================================================
   11. PILLS / STATE BADGES — the CSS truth-state pill (.vf-truth-pill,
   .pw-status-pill, .state-pill) carries data-state and pops with
   the canonical color + bloom.
   ===================================================================== */
/* PR #145 Issues 2 + 5 (pill shadow + text alignment).
   - Base rule: dropped the 1px solid border; rim is now an inset shadow
     so the pseudo-element glyph and label share a single flex baseline.
   - display: inline-flex + align-items: center + line-height: 1 +
     min-height: 20px → guaranteed centered glyph + label across browsers.
   - State rules below: layered inset rim + outer halo at calibrated alpha;
     awaiting/preview/not-configured/planned get rim only (no halo) since
     they're informational, not signaling activity. */
.vf-truth-pill,
.pw-status-pill,
.state-pill,
.shell-badge,
.header-badge,
.tier-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  padding: 4px 10px;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(8, 10, 24, 0.78);
  color: #d6ecff;
  box-shadow:
    inset 0 0 0 1px var(--pill-rim),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Pill state rules scoped to pill/badge selectors only — bare attribute
   selectors would match every panel with `data-state` and spill `color`
   onto card content (Copilot review on PR #145 caught this). */
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="live"] {
  color: #b9dd90;
  box-shadow:
    inset 0 0 0 1px rgba(185, 221, 144, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 6px rgba(185, 221, 144, 0.18);
}
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="awaiting"],
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="preview"] {
  color: #d8a83a;
  box-shadow:
    inset 0 0 0 1px rgba(216, 168, 58, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="human-required"] {
  color: #ff7a3a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 122, 58, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 6px rgba(255, 122, 58, 0.22);
}
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="offline"] {
  color: #e84a4b;
  box-shadow:
    inset 0 0 0 1px rgba(232, 74, 75, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 4px rgba(232, 74, 75, 0.16);
}
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="not-configured"],
:is(.vf-truth-pill, .pw-status-pill, .state-pill, .shell-badge,
    .header-badge, .tier-badge, .cockpit-truth-pill)[data-state="planned"] {
  color: var(--muted);
  opacity: 0.86;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* — Glyph affordances on truth-state pills (per ux-architect a11y audit).
   Color alone fails for deuteranopia / tritanopia; every state carries a
   glyph in ::before so the meaning is non-color-encoded. Glyphs are
   inline-block, mono, slightly less prominent than the label text. The
   selector matches truth-pill classes specifically, NOT every element
   with a data-state attribute (e.g. avoids tagging panels themselves). */
/* PR #145 Issue 5: glyph + label flex-centered.
   Dropped margin-right (gap on the parent owns spacing) and
   vertical-align (only applies in inline context, not flex). */
.vf-truth-pill::before,
.pw-status-pill::before,
.state-pill::before,
.shell-badge::before,
.tier-badge::before,
.cockpit-truth-pill::before {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: var(--font-mono);
  font-weight: 600;
  opacity: 0.85;
}
.vf-truth-pill[data-state="live"]::before,
.pw-status-pill[data-state="live"]::before,
.state-pill[data-state="live"]::before,
.cockpit-truth-pill[data-state="live"]::before                  { content: "\25CF"; }   /* solid dot ● */
.vf-truth-pill[data-state="awaiting"]::before,
.pw-status-pill[data-state="awaiting"]::before,
.state-pill[data-state="awaiting"]::before,
.cockpit-truth-pill[data-state="awaiting"]::before              { content: "\25D0"; }   /* half-circle ◐ */
.vf-truth-pill[data-state="preview"]::before,
.pw-status-pill[data-state="preview"]::before,
.state-pill[data-state="preview"]::before,
.cockpit-truth-pill[data-state="preview"]::before               { content: "\25C8"; }   /* diamond ◈ */
.vf-truth-pill[data-state="human-required"]::before,
.pw-status-pill[data-state="human-required"]::before,
.state-pill[data-state="human-required"]::before,
.cockpit-truth-pill[data-state="human-required"]::before        { content: "!"; }       /* exclamation */
.vf-truth-pill[data-state="offline"]::before,
.pw-status-pill[data-state="offline"]::before,
.state-pill[data-state="offline"]::before,
.cockpit-truth-pill[data-state="offline"]::before               { content: "\2717"; }   /* ✗ */
.vf-truth-pill[data-state="not-configured"]::before,
.pw-status-pill[data-state="not-configured"]::before,
.state-pill[data-state="not-configured"]::before,
.cockpit-truth-pill[data-state="not-configured"]::before        { content: "\2014"; }   /* em-dash — */
.vf-truth-pill[data-state="planned"]::before,
.pw-status-pill[data-state="planned"]::before,
.state-pill[data-state="planned"]::before,
.cockpit-truth-pill[data-state="planned"]::before               { content: "\2026"; }   /* ellipsis … */

/* =====================================================================
   12. DECORATIVE CHROME — bracket corners + dot grid + hex stamps.
   These are the JARVIS-grade decorations that close the gap between
   "themed panels" and "tactical HUD card." Pure CSS, no template edits.
   ===================================================================== */

/* — Bracket corners on every .panel / .glass-panel / .report-stage.
     Drawn via pseudo-element ::after with 8 background-image gradients
     (one per corner-segment: 2 segments × 4 corners). This stacks under
     content (z-index: 0) and never catches pointer events. */
/* Bracket corners: scoped to focal panels only per ux-architect Gap 6
   ("when every card has neon corners, none feel special — wallpaper").
   Apply via `data-panel-weight="focal"` opt-in. The 9-selector blast was
   removed; panels that need to read as focal mark themselves explicitly.
   Cargo-culted !important flags removed per governance-auditor §!important
   audit (brand-new pseudo-element selector, zero cascade pressure). */
/* Bracket corners removed per Mat: "the first tab Demo Path the 4 corners
   all are different with the thin blue lines... it's the only box with
   those and doesn't make any sense." Reading as inconsistent decoration
   instead of focal indicator. The neon rim outline (silver default,
   cyan for focal/live) is enough to mark the panel; brackets were
   redundant + visually noisy. */
/* Defect A fix per Copilot review on PR #141:
   `::after--disabled` was invalid CSS (pseudo-elements only accept
   ::before / ::after, not custom suffixes). The bracket-corner rule
   matched zero elements as written, but the original ::after rule
   wasn't replaced — so brackets continued to apply via earlier rule
   in the cascade. Proper fix: explicitly null the ::after content
   on focal panels. */
.panel[data-panel-weight="focal"]::after,
.glass-panel[data-panel-weight="focal"]::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* The DELETED bracket-corner rule below stays for git-history reference
   but is intentionally inert — selector points at nothing matchable. */
.panel--legacy-brackets-disabled,
.glass-panel--legacy-brackets-disabled {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to bottom, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to right, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to bottom, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to right, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to bottom, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to right, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65)),
    linear-gradient(to bottom, rgba(91, 184, 255, 0.65), rgba(91, 184, 255, 0.65));
  background-size:
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px;
  background-position:
    8px 8px,
    8px 8px,
    calc(100% - 8px - 18px) 8px,
    calc(100% - 8px - 1.5px) 8px,
    8px calc(100% - 8px - 1.5px),
    8px calc(100% - 8px - 18px),
    calc(100% - 8px - 18px) calc(100% - 8px - 1.5px),
    calc(100% - 8px - 1.5px) calc(100% - 8px - 18px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(91, 184, 255, 0.45));
}

/* — Dot-grid backdrop. Replaces / augments the existing line grid in
     body::before. Cleaner tactical-surface depth than 1px lines.
     Scoped to Vairifeye shell only per shell_branding_rule memory. */
body[data-shell="vairifeye"]::before,
body:not([data-shell])::before {
  /* Structured atmospheric backdrop — load-bearing for iOS-glass refraction.
     Per ux-architect spec: alphas bumped (cyan bloom 0.22→0.42, orange
     0.14→0.28, dot grid 0.18→0.30) so 32px backdrop-filter blur diffuses
     them into a soft cyan-tinted material rather than a flat dark plate.
     Test by setting backdrop-filter:none — bright structured blooms
     should be clearly visible behind the glass. */
  background:
    /* TRON-STYLE GRID LINES — subtle vector lattice (Mat: "perfect
       opportunity for a subtle Tron style background"). Vertical +
       horizontal lines at 56px tile at 0.05α cyan, on top of the dot
       grid that anchors at line intersections. */
    linear-gradient(0deg,
      transparent 0px,
      transparent 55px,
      rgba(91, 184, 255, 0.055) 55px,
      rgba(91, 184, 255, 0.055) 56px,
      transparent 56px),
    linear-gradient(90deg,
      transparent 0px,
      transparent 55px,
      rgba(91, 184, 255, 0.055) 55px,
      rgba(91, 184, 255, 0.055) 56px,
      transparent 56px),
    /* Architectural dot grid — bumped 0.022 → 0.14α (Mat: "the glow just
       hides it" — visible now). Aligns to the Tron line lattice (56px). */
    radial-gradient(circle at 2px 2px,
      rgba(180, 220, 255, 0.14) 1px, transparent 1.5px),
    /* FAINT cyan ambient corner — small, doesn't obscure the lattice */
    radial-gradient(ellipse 45% 40% at 12% 14%,
      rgba(91, 184, 255, 0.05) 0%,
      rgba(91, 184, 255, 0.02) 22%,
      transparent 40%),
    /* Faint orange counter — opposite corner */
    radial-gradient(ellipse 40% 35% at 88% 86%,
      rgba(255, 122, 58, 0.04) 0%,
      rgba(255, 122, 58, 0.015) 22%,
      transparent 40%),
    /* Floor/ceiling depth — minimal */
    linear-gradient(180deg,
      rgba(91, 184, 255, 0.02) 0%,
      transparent 28%,
      transparent 72%,
      rgba(255, 122, 58, 0.015) 100%) !important;
  background-size: 56px 56px, 56px 56px, 28px 28px, auto, auto, auto !important;
  background-attachment: fixed !important;
}

/* — Topbar Vairifeye logo: add a wider faint OUTER ring around the
     existing .jv-topbar-ring SVG. Vairifeye-only chrome (per memory rule
     shell_branding_rule); customer shells default-hide this halo. The
     unnecessary !important flags called out by the governance audit are
     dropped here — this is a brand-new pseudo-element with no cascade
     pressure, so plain declarations win. */
body[data-shell="vairifeye"] .brand-lockup.jv-topbar-lockup,
body:not([data-shell]) .brand-lockup.jv-topbar-lockup {
  position: relative;
}
body[data-shell="vairifeye"] .brand-lockup.jv-topbar-lockup::before,
body:not([data-shell]) .brand-lockup.jv-topbar-lockup::before {
  /* Centered outer halo around the ring stack. Sized to 200px (just
     slightly larger than the existing 188px ring) so it doesn't overflow
     the topbar vertically — Mat caught the 280px version extending off
     the top of the screen. */
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(91, 184, 255, 0.10);
  box-shadow:
    inset 0 0 24px rgba(91, 184, 255, 0.05),
    0 0 30px rgba(91, 184, 255, 0.10);
  pointer-events: none;
  z-index: 0;
}

/* — Eye-vs-ring concentric alignment fix.
     The .jv-topbar-lockup is 226×188 with display:flex/center. The
     .vairifeye-brand stack (eye image + wordmark) overflows 188 tall,
     so flex `align-items: center` puts the STACK centroid at lockup
     center — but visually that pushes the eye into the upper portion
     of the ring while the wordmark hangs at/below the ring bottom.
     Mat sees this as "ring off-center from logo" because the eye
     (which IS the logo to the operator) is not at the ring center.
     Fix: extract the wordmark into absolute positioning below the eye,
     so flex-centering treats the eye alone — eye then sits at the
     true ring center. Vairifeye-shell-scoped per shell-branding rule. */
body[data-shell="vairifeye"] .jv-topbar-lockup .vairifeye-brand,
body:not([data-shell]) .jv-topbar-lockup .vairifeye-brand {
  position: relative;
  /* The brand-copy (wordmark) gets pulled out of flow */
}
body[data-shell="vairifeye"] .jv-topbar-lockup .vairifeye-brand .brand-copy,
body:not([data-shell]) .jv-topbar-lockup .vairifeye-brand .brand-copy {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

/* — Demo path orbit (VAIRIFEYE seal) text alignment fix.
     The existing app.css uses `display: grid; place-items: center` with
     auto-flow rows, which puts core + meta into separate row tracks.
     Each row is independently centered in its half of the container,
     leaving a gap between core and meta and empty space above core /
     below meta. Switch to `align-content: center` so the row group
     packs at the container's vertical center, OR collapse to a flex
     column. Going with align-content: center to minimize disruption
     to the existing decorative ring positioning. */
body[data-shell="vairifeye"] .cc-demo-launch-orbit,
body:not([data-shell]) .cc-demo-launch-orbit {
  align-content: center !important;
}

/* — Topbar middle real-estate fill: centered active-tab title.
     Mat caught two issues with the prior scan-line attempt: (1) the
     line didn't align with the badges' vertical center because the
     topbar's effective midline is offset by the lockup overflow, and
     (2) the empty space wants TEXT not just a line. Switching to a
     centered ALL-CAPS mono title that auto-swaps based on the active
     command-nav tab via :has(). No JS, no template edits required.
     Vairifeye-shell-scoped per shell-branding rule. */
/* TITLE — single pseudo carries 4 visual layers via background-image:
     diamond glyph anchors at left/right, side ticks extending outward,
     and a baseline hairline underline. Per ux-architect spec dispatched
     after Mat called the prior treatment "bland word art." */
body[data-shell="vairifeye"] .topbar.glass-panel,
body:not([data-shell]) .topbar.glass-panel {
  position: relative;
}
body[data-shell="vairifeye"] .topbar.glass-panel::after,
body:not([data-shell]) .topbar.glass-panel::after {
  /* Title v3 per ux-architect (Mat said v2 was "cleaner but underwhelming").
     Diagnosis: title was isolated, watermark-quiet, no companion.
     v3 fixes:
     - Typography SPLIT: title → humane DISPLAY font (Segoe UI Variable
       Display), subtitle stays mono. The width contrast between display
       title + mono subtitle is what reads as cinematic vs institutional.
     - Color bump 0.62 → 0.86α (presence without volume)
     - 8s breath animation on text-shadow (subtle but visible identity)
     - Tiny status dot companion left of title text via radial-gradient
       in background (live=green, anchors title to a real state)
     - Anchor mark right of title (small cyan diamond as terminator) */
  /* Title v4 per ux-architect (Mat: "100% bigger and centered with a
     little style to the text itself"). Bahnschrift SemiLight 33px,
     condensed proportion, silver-cyan tint, single 14px halo.
     Status dot + tick chrome rescaled for the larger title.
     Note: gradient-text + chrome-background combo creates a CSS conflict
     (background-clip:text would clip BOTH). Using solid color matched
     to the gradient midpoint (rgba 190,220,240,0.92) — close enough
     visually, much simpler cascade. */
  content: "VAIRIFEYE";
  position: absolute;
  left: 50%;
  top: calc(50% - 8px);
  transform: translate(-50%, -50%);
  padding: 0 60px 0 36px;
  font-family: "Bahnschrift SemiLight", "Segoe UI Variable Display",
               "Segoe UI", system-ui, sans-serif;
  font-size: 33px;
  font-weight: 350;
  font-stretch: 87.5%;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212, 232, 248, 0.94);
  text-shadow:
    0 0 1px rgba(232, 244, 255, 0.40),
    0 0 14px rgba(120, 200, 230, 0.28);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  /* Side chrome — bigger live dot + anchor diamond + tick */
  background:
    radial-gradient(circle at 14px 50%, rgba(102, 217, 154, 0.95) 0 3px, rgba(102, 217, 154, 0.30) 3.5px 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 16px) 50%, rgba(91, 184, 255, 0.75) 0 3px, transparent 4px),
    linear-gradient(270deg, transparent 0 28px, rgba(91, 184, 255, 0.55) 28px 52px, transparent 52px);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  animation: topbarTitleBreath 8s ease-in-out infinite;
}

/* Breath animation — subtle text-shadow oscillation, gives the title
   life without making it move. 8s cycle so it never dominates. */
@keyframes topbarTitleBreath {
  0%, 100% {
    text-shadow:
      0 0 1px rgba(232, 244, 255, 0.30),
      0 0 12px rgba(91, 184, 255, 0.22);
  }
  50% {
    text-shadow:
      0 0 1px rgba(232, 244, 255, 0.42),
      0 0 20px rgba(91, 184, 255, 0.40);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="vairifeye"] .topbar.glass-panel::after,
  body:not([data-shell]) .topbar.glass-panel::after {
    animation: none !important;
  }
}

/* SUBTITLE — refined per ux-architect v3: shrink to 9.5px / 0.42em
   letter-spacing for the cinematic display+mono width contrast.
   Subtitle = machine metadata under humane display title. Verified
   AA contrast on the lit-glass topbar background (0.62α blue is fine
   on near-black at 9.5px when the surface itself is the chrome,
   not load-bearing copy). */
body[data-shell="vairifeye"] .topbar.glass-panel::before,
body:not([data-shell]) .topbar.glass-panel::before {
  content: "COMPLIANCE INTELLIGENCE ENGINE";
  position: absolute;
  left: 50%;
  top: calc(50% + 14px);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.42em;
  color: rgba(91, 184, 255, 0.62);
  text-shadow: 0 0 6px rgba(91, 184, 255, 0.18);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Active-tab TITLE swap via body:has() — no JS needed. The seven values
   match the data-tab attributes in templates/index.html:129-152. */
body:has(.command-nav-item.is-active[data-tab="dashboard"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="dashboard"]) .topbar.glass-panel::after { content: "COMMAND CENTER"; }
body:has(.command-nav-item.is-active[data-tab="audit"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="audit"]) .topbar.glass-panel::after { content: "AUDIT COCKPIT"; }
body:has(.command-nav-item.is-active[data-tab="training"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="training"]) .topbar.glass-panel::after { content: "TRAINING STUDIO"; }
body:has(.command-nav-item.is-active[data-tab="knowledge"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="knowledge"]) .topbar.glass-panel::after { content: "KNOWLEDGE"; }
body:has(.command-nav-item.is-active[data-tab="agents"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="agents"]) .topbar.glass-panel::after { content: "AGENTS"; }
body:has(.command-nav-item.is-active[data-tab="admin"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="admin"]) .topbar.glass-panel::after { content: "ADMIN CONSOLE"; }
body:has(.command-nav-item.is-active[data-tab="settings"]) .topbar.glass-panel::after,
body:has(.command-nav-item[aria-current="page"][data-tab="settings"]) .topbar.glass-panel::after { content: "USER SETTINGS"; }

/* Active-tab SUBTITLE swap — paired eyebrow under each title */
body:has(.command-nav-item.is-active[data-tab="dashboard"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="dashboard"]) .topbar.glass-panel::before { content: "OPERATIONAL TRUTH OVERVIEW"; }
body:has(.command-nav-item.is-active[data-tab="audit"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="audit"]) .topbar.glass-panel::before { content: "MULTI-MODAL TRUTH ENFORCEMENT"; }
body:has(.command-nav-item.is-active[data-tab="training"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="training"]) .topbar.glass-panel::before { content: "DETERMINISTIC RULE CURATION"; }
body:has(.command-nav-item.is-active[data-tab="knowledge"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="knowledge"]) .topbar.glass-panel::before { content: "STANDARDS & EVIDENCE LIBRARY"; }
body:has(.command-nav-item.is-active[data-tab="agents"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="agents"]) .topbar.glass-panel::before { content: "RESPONSIBILITY REGISTRY"; }
body:has(.command-nav-item.is-active[data-tab="admin"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="admin"]) .topbar.glass-panel::before { content: "TENANT & CAPABILITY CONFIG"; }
body:has(.command-nav-item.is-active[data-tab="settings"]) .topbar.glass-panel::before,
body:has(.command-nav-item[aria-current="page"][data-tab="settings"]) .topbar.glass-panel::before { content: "OPERATOR PREFERENCES"; }

/* Viewport guard — at <1280px hide subtitle to prevent overlap with lockup/actions */
@media (max-width: 1180px) {
  body[data-shell="vairifeye"] .topbar.glass-panel::before,
  body:not([data-shell]) .topbar.glass-panel::before { display: none; }
  body[data-shell="vairifeye"] .topbar.glass-panel::after,
  body:not([data-shell]) .topbar.glass-panel::after { top: 50%; }
}
@media (max-width: 1024px) {
  body[data-shell="vairifeye"] .topbar.glass-panel::after,
  body:not([data-shell]) .topbar.glass-panel::after {
    font-size: 16px; letter-spacing: 0.24em; padding: 0 32px;
  }
}

/* — ALL CAPS mono labels for the JARVIS readout look. Apply where the
     existing classes carry low-info eyebrow text. */
.cc-triage-head,
.panel header,
.glass-panel header,
.report-stage header,
.cockpit-step-body-head {
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: rgba(91, 184, 255, 0.85) !important;
}

/* — Tighter status-row stat cells. The 5 cards (CD Corpus, Pathwave,
     Standards, Vision Pipeline, Memory Store) become tactical readouts
     with brighter labels + dual-line layout. */
.cc-posture-ribbon .stat-cell,
.cc-posture-cell {
  position: relative;
  padding: 10px 14px !important;
  border: 1px solid rgba(91, 184, 255, 0.18) !important;
  background: rgba(8, 10, 24, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.cc-posture-ribbon .stat-cell::before,
.cc-posture-cell::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 30% !important;
  bottom: 30% !important;
  width: 2px !important;
  background: rgba(91, 184, 255, 0.65) !important;
  box-shadow: 0 0 6px rgba(91, 184, 255, 0.65) !important;
}

/* — Buttons (.button, .btn, .ghost-button) carry a subtle neon underline
     on hover so they feel like HUD interactive elements. */
.button:not(.primary):not(.cta-button),
.btn:not(.primary):not(.cta-button),
.ghost-button {
  border: 1px solid rgba(91, 184, 255, 0.18) !important;
  background: rgba(8, 10, 24, 0.65) !important;
  color: #d6ecff !important;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.button:not(.primary):not(.cta-button):hover,
.btn:not(.primary):not(.cta-button):hover,
.ghost-button:hover {
  border-color: rgba(91, 184, 255, 0.40) !important;
  box-shadow: 0 0 14px rgba(91, 184, 255, 0.18) !important;
}

/* =====================================================================
   13. REDUCED MOTION — short-circuit all motion (CLAUDE.md §6.7).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vf-state-dot { animation: none; }
}

/* =====================================================================
   14. PR #145 — Issue 1 (grid alignment) + Issue 7 (header merge).
   Synthesized from product-architect spec (path C — hybrid wrapper) and
   ux-architect rail/gutter contract. Specificity > !important: descendant
   chains beat single-class app.css rules without inflating the budget.
   ===================================================================== */

/* — Issue 1: page rail. Shell wrapper drives a consistent left/right edge
     so every section block aligns to the same column. Token-based so PR #146
     per-tab work inherits the rhythm. */
body[data-shell="vairifeye"] .shell,
body:not([data-shell]) .shell {
  padding-inline: var(--rail);
}

/* — Issue 7: header merge. The `.vf-chrome-band` wrapper (added in
     templates/index.html below) collapses the topbar + audit-board hero
     + command-nav into a single chrome unit. Per-child rim suppression
     uses descendant-class specificity (no !important) — cockpit-theme.css
     loads after app.css, so these rules win on cascade order. */
.vf-chrome-band {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0.22) 100%);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 6px var(--glass-rim-bloom),
    0 0 0 1px rgba(0, 0, 0, 0.40),
    0 16px 40px -12px rgba(0, 0, 0, 0.45);
  margin-bottom: var(--gutter);
}

/* Strip the per-child rim so the wrapper owns the chrome.
   Per Copilot review on PR #145: the silver-rim coverage at lines 407-462
   uses !important on every property, so cascade specificity alone can't
   win — these suppression rules need !important to actually take effect.
   Constrained scope (4 selectors × 7 properties) and tight budget impact. */
.vf-chrome-band > .topbar.glass-panel,
.vf-chrome-band > .hero.glass-panel,
.vf-chrome-band > .hero.hero-slim.glass-panel,
.vf-chrome-band > .command-nav {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
}

/* Internal hairline divider between the three rows — single seam, not
   three. Hero-slim (audit-board metrics) and command-nav each get a
   1px top hairline; topbar gets nothing (it's the leading row).
   !important needed for the same reason: overrides the base panel
   border-bottom that already carries !important. */
.vf-chrome-band > .hero.glass-panel,
.vf-chrome-band > .hero.hero-slim.glass-panel,
.vf-chrome-band > .command-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Suppress the silver-rim coverage's outer shadow + outer black ring
   on chrome-band children — they'd render INSIDE the wrapper and create
   tiny seams between rows. */
.vf-chrome-band > .panel,
.vf-chrome-band > .glass-panel {
  outline: 0;
}

/* Sub-cell ::before spine treatments ride on the wrapper too — the
   topbar.glass-panel::before exists in app.css but its visibility is
   intentional (the brand title centerline). Don't touch it; just ensure
   nothing else escapes. */

/* Mobile collapse: at narrow viewports, let the band release its
   backdrop and become contents-only so the existing flex-column rules
   on the children can flow naturally. */
@media (max-width: 768px) {
  .vf-chrome-band {
    border-radius: 16px;
  }
}
@media (max-width: 480px) {
  .vf-chrome-band {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
  }
}

/* — Reduced-transparency variant: chrome-band background + backdrop-filter
     are now handled by the parity block above (with `.vf-chrome-band`
     joined to the canonical glass family). Here we suppress the band's
     box-shadow so the inset rim becomes the sole edge anchor. */
@media (prefers-reduced-transparency: reduce) {
  .vf-chrome-band {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      0 0 0 1px rgba(0, 0, 0, 0.40);
  }
}

/* — Reduced-motion: chrome-band has no animations of its own, but suppress
     any inherited transitions from card glow / button hover so the band
     stays static. */
@media (prefers-reduced-motion: reduce) {
  .vf-chrome-band,
  .vf-chrome-band * {
    transition: none;
  }
}

/* =====================================================================
   15. PR #147 — AUDIT COCKPIT POLISH (compact subset of full team spec).
   Per locked memory `pr146_all_tabs_polish` and `team_dispatch_every_pr`,
   the audit-cockpit deepest treatment lands incrementally. This PR ships:
     A) Evidence Drawer always-visible (locked-memory `evidence_drawer_fixed`)
     B) data-panel-weight="focal" cinematic halo on Cockpit's primary panel
     C) BorderBeam-style focal accent (calibrated under the 4-10px halo lock)

   Greenfield (Truth Spine, Throughput sparkline, Vision overlay, Backdrop)
   deferred to PR #148 per scope discipline (CLAUDE.md §4.5).
   ===================================================================== */

/* — A. Evidence Drawer always-visible (locked memory fix).
     app.css:5347-5351 hides .rw-columns when the workspace is idle, which
     also hides .rw-right (the evidence rail). Per `evidence_drawer_fixed`
     memory: "drawer is permanently always-visible; no slide-to-close, no
     collapse, no minimize."

     Strategy (per Copilot review on PR #147 — comments 1+2+4):
     Use `display: contents` on .rw-columns when idle. The container
     becomes layout-transparent; its children render directly in the
     parent's flow. Left + center columns hidden via their own selectors.
     .rw-right keeps its own `display: flex; flex-direction: column` from
     app.css — NO override on the drawer itself (was breaking the internal
     vertical layout). The drawer's existing content ("CURRENT VERDICT" +
     verdict chips like "Awaiting" / "None" / "No photo loaded") is
     already informative for both visual and screen-reader users — no
     pseudo-element label needed (which was invisible to AT anyway). */
.review-workspace[data-rw-state="idle"] .rw-columns {
  display: contents !important;
}
.review-workspace[data-rw-state="idle"] .rw-left,
.review-workspace[data-rw-state="idle"] .rw-center {
  display: none !important;
}
.review-workspace[data-rw-state="idle"] .rw-right .rw-verdict-value {
  color: var(--muted);
}

/* — B. data-panel-weight="focal" cinematic halo for cockpit-primary.
     The audit-cockpit's hero panel deserves the focal cinematic treatment.
     The base focal rule at lines 491-511 already paints rim + halo; this
     adds a subtle BorderBeam-style sweep on the focal panel only. */
.cockpit-primary[data-panel-weight="focal"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  /* Conic gradient creates the rotating beam effect. Calibration locked
     within the 0.55α peak (vs Magic UI's typical 0.9) per the 4-10px halo
     and ≤0.07α bloom budget — beam is a TRACE not a wash. */
  background: conic-gradient(
    from 0deg,
    rgba(91, 184, 255, 0) 0deg,
    rgba(91, 184, 255, 0.55) 30deg,
    rgba(91, 184, 255, 0) 90deg,
    rgba(91, 184, 255, 0) 360deg
  );
  /* Standard `mask` AND `-webkit-mask` per Copilot review on PR #147 —
     Firefox needs unprefixed mask + mask-composite, otherwise the
     conic-gradient renders as a full overlay washing out panel content. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vfBorderBeam 7.5s linear infinite;
  z-index: 1;
}
@keyframes vfBorderBeam {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Human-required focal: orange beam variant. */
.cockpit-primary[data-panel-weight="focal"][data-state="human-required"]::after {
  background: conic-gradient(
    from 0deg,
    rgba(255, 122, 58, 0) 0deg,
    rgba(255, 122, 58, 0.55) 30deg,
    rgba(255, 122, 58, 0) 90deg,
    rgba(255, 122, 58, 0) 360deg
  );
}

/* — C. Reduced-motion fallback for the BorderBeam.
     Per CLAUDE.md §6.7 + governance verdict: every motion needs a degraded
     variant. Static rim at 0.35 opacity replaces the rotation. */
@media (prefers-reduced-motion: reduce) {
  .cockpit-primary[data-panel-weight="focal"]::after {
    animation: none;
    opacity: 0.35;
  }
}

/* — D. Reduced-transparency fallback intentionally omitted here:
     - .rw-columns uses `display: contents`, so it has no own visual surface
     - .rw-right inherits its app.css base layout; reduced-transparency
       fallbacks for the drawer's parent container live in section 13's
       canonical glass-family parity block.
     - The pseudo-element empty-state label was removed per Copilot review
       (it was invisible to assistive tech anyway — drawer's own content
       informs both visual + AT users). */

/* =====================================================================
   16. PR #156 — CINEMATIC TOP 5 (Patterns A, B, C).
   Per ux-architect spec a13bbf35a941f1f99. Patterns D + E ship in
   cockpit-beams.css (Background Beams) and app.js (NumberTicker)
   respectively. Calibration locked under bloom budget (≤0.07α blooms,
   4-10px halos, no Vegas effects).
   ===================================================================== */

/* — Pattern A: BorderBeam extension to live-state hero panels per tab.
     Same calibration as cockpit-primary[data-panel-weight="focal"] — the
     auditor pattern-matches the beam as "this is the live focal," one
     signal across all tabs. State-gated by data-state so the beam
     vanishes when the surface goes offline / not-configured.
     Selector list is currently scoped to the focal panels that ACTUALLY
     ship today (.kx-pane-library). Other tabs' focal selectors will be
     added back here as their hero panels land — adding a non-existent
     selector now would only create dead CSS. */
.kx-pane-library[data-state="live"]::after,
.kx-pane-library[data-state="human-required"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vfBorderBeam 7.5s linear infinite;
  z-index: 1;
}
.kx-pane-library[data-state="live"]::after {
  background: conic-gradient(
    from 0deg,
    rgba(91, 184, 255, 0) 0deg,
    rgba(91, 184, 255, 0.55) 30deg,
    rgba(91, 184, 255, 0) 90deg,
    rgba(91, 184, 255, 0) 360deg
  );
}
.kx-pane-library[data-state="human-required"]::after {
  background: conic-gradient(
    from 0deg,
    rgba(255, 122, 58, 0) 0deg,
    rgba(255, 122, 58, 0.55) 30deg,
    rgba(255, 122, 58, 0) 90deg,
    rgba(255, 122, 58, 0) 360deg
  );
}
@media (prefers-reduced-motion: reduce) {
  .kx-pane-library[data-state="live"]::after,
  .kx-pane-library[data-state="human-required"]::after {
    animation: none;
    opacity: 0.18;
  }
}

/* — Pattern B: Animated Grid breath. Modify existing body::before so the
     Tron grid pulses gently. Opacity-only animation (GPU-composited;
     no layout thrash on Render free-tier). 8s cadence reads as ambient
     breath, not a flicker. Stays under 0.07α bloom budget. */
@keyframes vf-grid-breath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
body::before {
  animation: vf-grid-breath 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
/* Suppress on config-heavy tabs where ambient motion competes with dense data. */
body[data-active-tab="admin"]::before,
body[data-active-tab="diagnostic"]::before,
body[data-active-tab="settings"]::before {
  animation: none;
}

/* — Pattern C: Spotlight follow-cursor on the Audit Cockpit's review
     center panel. Single panel scope = no Vegas effect. JS pointer
     listener in app.js sets --mx / --my CSS variables. */
.rw-center {
  position: relative;
  isolation: isolate;
}
.rw-center::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(91, 184, 255, 0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 240ms ease-out;
  z-index: 0;
}
.rw-center:hover::before {
  opacity: 1;
}
.rw-center > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce),
       (prefers-reduced-transparency: reduce) {
  .rw-center::before { display: none; }
}

/* =====================================================================
   COCKPIT VISION OVERLAY — Phase B-4a
   SVG layer painted over .rw-photo. Three rendering bands:
     1. Concentric scanning rings (decorative, gated by data-state)
     2. Sweeping scan line (decorative, motion-gated)
     3. Per-detection corner-bracket marks (.cc-vision-mark groups)
   Numeric per-detection scores are NEVER rendered here per spec §A-5
   — those numerics are dropped at the cockpit seam.
   Truth-state grammar: data-state on the <svg> drives visual treatment.
   `not-configured` (default) is muted; `live` reveals rings + scan;
   `offline` opaques the layer red.
   ===================================================================== */

.rw-photo-wrap {
  position: relative;
  isolation: isolate;
}

.cc-vision-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.cc-vision-overlay[data-state="live"],
.cc-vision-overlay[data-state="preview"],
.cc-vision-overlay[data-state="offline"],
.cc-vision-overlay[data-state="human-required"] {
  opacity: 1;
}

.cc-vision-overlay .cc-vision-ring {
  stroke: rgba(91, 184, 255, 0.55);
  stroke-width: 0.35;
  stroke-dasharray: 1.5 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: ccVisionRingPulse 4200ms ease-in-out infinite;
}
.cc-vision-overlay[data-state="live"] .cc-vision-ring,
.cc-vision-overlay[data-state="preview"] .cc-vision-ring {
  opacity: 0.9;
}
.cc-vision-overlay .cc-vision-ring--mid { animation-delay: 700ms; }
.cc-vision-overlay .cc-vision-ring--inner { animation-delay: 1400ms; }
.cc-vision-overlay[data-state="offline"] .cc-vision-ring {
  stroke: rgba(255, 99, 99, 0.55);
  opacity: 0.9;
}

.cc-vision-overlay .cc-vision-scan-line {
  stroke: rgba(91, 184, 255, 0.42);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1.4px rgba(91, 184, 255, 0.55));
  transform: translateY(-2%);
  opacity: 0;
  animation: ccVisionScan 2800ms cubic-bezier(.5,.05,.5,.95) infinite;
}
.cc-vision-overlay[data-state="live"] .cc-vision-scan-line {
  opacity: 1;
}

@keyframes ccVisionRingPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.04); }
}
@keyframes ccVisionScan {
  0%   { transform: translateY(-2%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(102%); opacity: 0; }
}

/* Per-detection bracket group. Wave 1: no marks rendered (the cockpit
   hydrator populates #rw-vision-marks at runtime once detector outputs
   exist). Each <g class="cc-vision-mark"> contains four corner paths;
   color is data-state driven on the parent group. */
.cc-vision-overlay .cc-vision-mark {
  transition: opacity 220ms ease-out;
  opacity: 0;
}
.cc-vision-overlay[data-state="live"] .cc-vision-mark,
.cc-vision-overlay[data-state="preview"] .cc-vision-mark {
  opacity: 0.95;
}
.cc-vision-overlay .cc-vision-mark__corner {
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.cc-vision-overlay .cc-vision-mark[data-state="preview"] .cc-vision-mark__corner {
  stroke: rgba(91, 184, 255, 0.85);
}
.cc-vision-overlay .cc-vision-mark[data-state="human-required"] .cc-vision-mark__corner {
  stroke: rgba(255, 99, 99, 0.95);
}
.cc-vision-overlay .cc-vision-mark[data-state="live"] .cc-vision-mark__corner {
  stroke: rgba(110, 235, 169, 0.95);
}

.cc-vision-overlay .cc-vision-mark__tag {
  font-size: 2.2px;
  font-family: "JetBrains Mono", monospace;
  fill: rgba(196, 220, 240, 0.92);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Caption strip below photo. Copy is hydrated by app.js based on
   #rw-vision-overlay's data-state. The default text comes from the
   template (not-configured copy). */
.cc-vision-summary {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: rgba(196, 220, 240, 0.78);
  letter-spacing: 0.04em;
  border: 1px solid rgba(91, 184, 255, 0.18);
  border-radius: 4px;
  background: rgba(11, 22, 36, 0.45);
}
.cc-vision-summary[data-state="not-configured"] {
  border-color: rgba(120, 134, 152, 0.22);
  color: rgba(160, 176, 196, 0.7);
}
.cc-vision-summary[data-state="offline"] {
  border-color: rgba(255, 99, 99, 0.42);
  color: rgba(255, 168, 168, 0.92);
}

/* Detector pill in .jv-eye — the canonical state badge for detector
   status. Sits next to the existing .ts pill but uses vf-truth-pill
   styling so its data-state participates in the doctrine-grammar set. */
.cc-detector-pill {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Reduced-motion + reduced-transparency contract.
   - Motion: rings + scan line stop animating; static fade-in only.
   - Transparency: the .rw-photo backdrop opaques (handled via
     existing reduced-transparency rules elsewhere); overlay layer
     keeps its strokes but loses the drop-shadow glow.            */
@media (prefers-reduced-motion: reduce) {
  .cc-vision-overlay .cc-vision-ring,
  .cc-vision-overlay .cc-vision-scan-line {
    animation: none;
  }
  .cc-vision-overlay .cc-vision-mark {
    transition: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cc-vision-overlay .cc-vision-scan-line {
    filter: none;
  }
  .cc-vision-summary {
    background: rgba(11, 22, 36, 0.92);
  }
}

/* =====================================================================
   PR3 Audit Cockpit — Severity-coded Unresolved Blockers row
   + Canonical Report Dock. States are hydrated from review_items,
   saved_report_binding, current report, and run identity. Cockpit-
   namespaced classes only — no .vf-* primitives.
   ===================================================================== */

.cockpit-blockers-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  margin: 10px 0 0;
  border: 1px solid rgba(91, 184, 255, 0.18);
  border-radius: 4px;
  background: rgba(11, 22, 36, 0.55);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cockpit-blockers-row[data-state="planned"] {
  border-color: rgba(120, 134, 152, 0.22);
  background: rgba(11, 22, 36, 0.3);
}
.cockpit-blockers-row[data-state="awaiting"] {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(75, 52, 10, 0.14);
}
.cockpit-blockers-row[data-state="live"] {
  border-color: rgba(110, 235, 169, 0.35);
  background: rgba(20, 83, 45, 0.10);
}
.cockpit-blockers-row[data-state="human-required"] {
  border-color: rgba(255, 99, 99, 0.55);
}
.cockpit-blockers__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  color: rgba(196, 220, 240, 0.7);
}
.cockpit-blockers__title {
  text-transform: uppercase;
}
.cockpit-blockers__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255, 99, 99, 0.18);
  color: rgba(255, 168, 168, 0.92);
  font-weight: 700;
}
.cockpit-blockers-row[data-state="planned"] .cockpit-blockers__badge {
  background: rgba(120, 134, 152, 0.18);
  color: rgba(196, 220, 240, 0.7);
}
.cockpit-blockers__chips {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.cockpit-blocker-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  border: 1px solid rgba(91, 184, 255, 0.28);
  background: rgba(11, 22, 36, 0.45);
  color: rgba(196, 220, 240, 0.78);
}
.cockpit-blocker-chip--empty[data-state="planned"] {
  border-color: rgba(120, 134, 152, 0.22);
  color: rgba(160, 176, 196, 0.7);
}
.cockpit-blocker-chip--empty[data-state="live"] {
  border-color: rgba(110, 235, 169, 0.32);
  color: rgba(196, 244, 214, 0.88);
}
.cockpit-blocker-chip[data-severity="high"] {
  border-color: rgba(255, 99, 99, 0.55);
  color: rgba(255, 168, 168, 0.92);
}
.cockpit-blocker-chip[data-severity="medium"] {
  border-color: rgba(245, 158, 11, 0.55);
  color: rgba(255, 211, 138, 0.92);
}
.cockpit-blocker-chip[data-severity="low"] {
  border-color: rgba(91, 184, 255, 0.4);
  color: rgba(170, 210, 240, 0.9);
}

.cockpit-canonical-dock {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 24px;
  margin: 10px 0 0;
  border: 1px solid rgba(91, 184, 255, 0.22);
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    rgba(11, 22, 36, 0.78),
    rgba(7, 14, 24, 0.88)
  );
  isolation: isolate;
}
.cockpit-canonical-dock[data-state="planned"] {
  border-color: rgba(120, 134, 152, 0.28);
}
.cockpit-canonical-dock[data-state="awaiting"] {
  border-color: rgba(245, 158, 11, 0.32);
}
.cockpit-canonical-dock[data-state="live"] {
  border-color: rgba(110, 235, 169, 0.4);
}
.cockpit-dock__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: rgba(196, 220, 240, 0.78);
}
.cockpit-dock__section--center {
  justify-self: center;
  align-items: center;
  gap: 4px;
}
.cockpit-dock__section--exports {
  align-items: flex-end;
  gap: 8px;
}
.cockpit-dock__meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.cockpit-dock__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(160, 176, 196, 0.7);
}
.cockpit-dock__value {
  font-family: "JetBrains Mono", monospace;
  color: rgba(220, 232, 244, 0.92);
}
.cockpit-dock__metadata {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 4px;
  margin: 0;
}
.cockpit-dock__metadata dt {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(160, 176, 196, 0.7);
}
.cockpit-dock__metadata dd {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  color: rgba(220, 232, 244, 0.92);
  font-size: 12px;
}
.cockpit-mono {
  font-family: "JetBrains Mono", monospace;
}
.cockpit-dock__pill-row {
  display: flex;
  gap: 6px;
}
.cockpit-dock__export-btn {
  padding: 8px 14px;
  border: 1px solid rgba(91, 184, 255, 0.32);
  border-radius: 4px;
  background: rgba(11, 22, 36, 0.55);
  color: rgba(196, 220, 240, 0.78);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: opacity 200ms ease-out, border-color 200ms ease-out;
}
.cockpit-dock__export-btn[disabled] {
  opacity: 0.6;
}
.cockpit-canonical-dock[data-state="live"] .cockpit-dock__export-btn:not([disabled]) {
  border-color: rgba(110, 235, 169, 0.55);
  color: rgba(196, 244, 214, 0.95);
  cursor: pointer;
}

/* Holographic lock-pad — concentric segmented rings + inner shield.
   On data-state="live" the rings rotate slowly; on "planned" they
   are static at low opacity. SVG itself is aria-hidden. */
.cockpit-lock-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cockpit-lock-pad__svg {
  width: 56px;
  height: 56px;
  overflow: visible;
}
.cockpit-lock-pad__ring {
  stroke: rgba(91, 184, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
}
.cockpit-lock-pad__ring--mid {
  stroke: rgba(91, 184, 255, 0.4);
  stroke-dasharray: 2 4;
}
.cockpit-lock-pad__ring--inner {
  stroke: rgba(110, 235, 169, 0.5);
  stroke-dasharray: 1 2;
}
.cockpit-lock-pad__ticks line {
  stroke: rgba(91, 184, 255, 0.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cockpit-lock-pad__shield {
  stroke: rgba(110, 235, 169, 0.7);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1.4px rgba(110, 235, 169, 0.45));
}
.cockpit-lock-pad__core {
  fill: rgba(110, 235, 169, 0.8);
}
.cockpit-lock-pad__caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(160, 176, 196, 0.62);
  text-transform: uppercase;
}
.cockpit-lock-pad[data-state="planned"] .cockpit-lock-pad__shield,
.cockpit-lock-pad[data-state="planned"] .cockpit-lock-pad__core {
  stroke: rgba(120, 134, 152, 0.55);
  fill: rgba(120, 134, 152, 0.55);
  filter: none;
}
.cockpit-lock-pad[data-state="planned"] .cockpit-lock-pad__ring,
.cockpit-lock-pad[data-state="planned"] .cockpit-lock-pad__ring--mid,
.cockpit-lock-pad[data-state="planned"] .cockpit-lock-pad__ring--inner {
  stroke: rgba(120, 134, 152, 0.38);
}
.cockpit-lock-pad[data-state="live"] .cockpit-lock-pad__ring--outer {
  animation: cockpitLockRingRotate 16s linear infinite;
}
.cockpit-lock-pad[data-state="live"] .cockpit-lock-pad__ring--mid {
  animation: cockpitLockRingRotate 22s linear infinite reverse;
}
.cockpit-lock-pad[data-state="awaiting"] .cockpit-lock-pad__ring--outer {
  animation: cockpitLockRingPulse 2400ms ease-in-out infinite;
}
@keyframes cockpitLockRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cockpitLockRingPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-lock-pad[data-state="live"] .cockpit-lock-pad__ring,
  .cockpit-lock-pad[data-state="awaiting"] .cockpit-lock-pad__ring {
    animation: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cockpit-canonical-dock {
    background: rgba(7, 14, 24, 0.96);
  }
  .cockpit-blockers-row {
    background: rgba(11, 22, 36, 0.92);
  }
}

/* =====================================================================
   PR8 complete-app polish pass. These rules only tune chrome, hierarchy,
   route continuity, responsive fit, and preference-gated motion. They do
   not introduce new data, product authority, provider calls, or status
   semantics.
   ===================================================================== */

body[data-shell="vairifeye"],
body:not([data-shell]) {
  --vf-route-accent: var(--jv-blue, #5EA1FF);
  --vf-route-accent-rgb: 94, 161, 255;
  --vf-route-accent-2: var(--jv-cyan, #5EDFFF);
  --vf-route-panel-glow: rgba(94, 161, 255, 0.16);
  --vf-route-panel-line: rgba(94, 161, 255, 0.34);
}

body[data-active-tab="dashboard"] {
  --vf-route-accent: #5EDFFF;
  --vf-route-accent-rgb: 94, 223, 255;
  --vf-route-accent-2: #39D353;
  --vf-route-panel-glow: rgba(94, 223, 255, 0.18);
  --vf-route-panel-line: rgba(94, 223, 255, 0.42);
}

body[data-active-tab="audit"] {
  --vf-route-accent: #5EA1FF;
  --vf-route-accent-rgb: 94, 161, 255;
  --vf-route-accent-2: #5EDFFF;
  --vf-route-panel-glow: rgba(94, 161, 255, 0.18);
  --vf-route-panel-line: rgba(94, 161, 255, 0.42);
}

body[data-active-tab="knowledge"] {
  --vf-route-accent: #5EDFFF;
  --vf-route-accent-rgb: 94, 223, 255;
  --vf-route-accent-2: #F0A83A;
  --vf-route-panel-glow: rgba(94, 223, 255, 0.16);
  --vf-route-panel-line: rgba(94, 223, 255, 0.38);
}

body[data-active-tab="agents"] {
  --vf-route-accent: #7BDFFF;
  --vf-route-accent-rgb: 123, 223, 255;
  --vf-route-accent-2: #39D353;
  --vf-route-panel-glow: rgba(123, 223, 255, 0.14);
  --vf-route-panel-line: rgba(123, 223, 255, 0.34);
}

body[data-active-tab="reports"] {
  --vf-route-accent: #F0A83A;
  --vf-route-accent-rgb: 240, 168, 58;
  --vf-route-accent-2: #5EDFFF;
  --vf-route-panel-glow: rgba(240, 168, 58, 0.14);
  --vf-route-panel-line: rgba(240, 168, 58, 0.34);
}

body[data-active-tab="admin"],
body[data-active-tab="settings"],
body[data-active-tab="diagnostic"] {
  --vf-route-accent: #B9C7D8;
  --vf-route-accent-rgb: 185, 199, 216;
  --vf-route-accent-2: #5EA1FF;
  --vf-route-panel-glow: rgba(185, 199, 216, 0.10);
  --vf-route-panel-line: rgba(185, 199, 216, 0.28);
}

body[data-shell="vairifeye"] .vf-chrome-band,
body:not([data-shell]) .vf-chrome-band {
  border-color: rgba(var(--vf-route-accent-rgb), 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px var(--vf-route-panel-glow);
}

body[data-shell="vairifeye"] .topbar.glass-panel,
body:not([data-shell]) .topbar.glass-panel {
  border-bottom-color: rgba(var(--vf-route-accent-rgb), 0.32);
}

body[data-active-tab="reports"] .topbar.glass-panel::after {
  content: "REPORTS";
}

body[data-active-tab="reports"] .topbar.glass-panel::before {
  content: "SAVED REPORTS & EXPORTS";
}

body[data-active-tab="metrics"] .topbar.glass-panel::after {
  content: "METRICS";
}

body[data-active-tab="metrics"] .topbar.glass-panel::before {
  content: "RULE AND SOURCE COVERAGE";
}

body[data-active-tab="diagnostic"] .topbar.glass-panel::after {
  content: "DIAGNOSTIC";
}

body[data-active-tab="diagnostic"] .topbar.glass-panel::before {
  content: "SYSTEM TRACE";
}

body[data-shell="vairifeye"] .command-nav,
body:not([data-shell]) .command-nav {
  gap: 6px;
  padding-inline: clamp(8px, 1.1vw, 16px);
}

body[data-shell="vairifeye"] .command-nav-item,
body:not([data-shell]) .command-nav-item {
  min-height: 42px;
  min-width: max-content;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(94, 223, 255, 0.06);
}

body[data-shell="vairifeye"] .command-nav-item.is-active,
body[data-shell="vairifeye"] .command-nav-item[aria-current="page"],
body:not([data-shell]) .command-nav-item.is-active,
body:not([data-shell]) .command-nav-item[aria-current="page"] {
  border-color: rgba(var(--vf-route-accent-rgb), 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(var(--vf-route-accent-rgb), 0.16),
    inset 0 -2px 0 rgba(var(--vf-route-accent-rgb), 0.65),
    0 0 22px var(--vf-route-panel-glow);
}

.tab-panel.is-active {
  position: relative;
  isolation: isolate;
}

.tab-panel.is-active::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -10px auto -10px;
  height: 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--vf-route-accent-rgb), 0.75) 18%,
      rgba(57, 211, 83, 0.55) 52%,
      rgba(240, 168, 58, 0.46) 72%,
      transparent);
  opacity: 0.55;
}

:where(.tab-panel[data-tab-panel="reports"],
       .tab-panel[data-tab-panel="admin"],
       .tab-panel[data-tab-panel="settings"],
       .tab-panel[data-tab-panel="agents"],
       .tab-panel[data-tab-panel="training"],
       .tab-panel[data-tab-panel="metrics"],
       .tab-panel[data-tab-panel="diagnostic"]) :where(.panel, .glass-panel, .report-stage, .ent-fieldset, .ent-stat-card, .agent-card, .agent-command-card) {
  border-radius: 8px;
  border-color: rgba(var(--vf-route-accent-rgb), 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 40px rgba(0, 0, 0, 0.22),
    0 0 26px var(--vf-route-panel-glow);
}

:where(.tab-panel[data-tab-panel="reports"],
       .tab-panel[data-tab-panel="admin"],
       .tab-panel[data-tab-panel="settings"],
       .tab-panel[data-tab-panel="agents"],
       .tab-panel[data-tab-panel="training"],
       .tab-panel[data-tab-panel="metrics"],
       .tab-panel[data-tab-panel="diagnostic"]) :where(.panel-header, .ent-panel-header, .report-stage-header) {
  border-bottom: 1px solid rgba(var(--vf-route-accent-rgb), 0.18);
  padding-bottom: clamp(10px, 1vw, 14px);
}

:where(.tab-panel[data-tab-panel="reports"],
       .tab-panel[data-tab-panel="admin"],
       .tab-panel[data-tab-panel="settings"],
       .tab-panel[data-tab-panel="agents"],
       .tab-panel[data-tab-panel="training"],
       .tab-panel[data-tab-panel="metrics"],
       .tab-panel[data-tab-panel="diagnostic"]) :where(.section-label, .ent-section-tag, .cc-triage-tag) {
  color: color-mix(in srgb, var(--vf-route-accent) 82%, #E4EAF5 18%);
}

.report-stage-shell,
.report-stage-grid,
.admin-stats-grid,
.ent-permission-grid,
.ent-policy-grid,
.agent-grid,
.agent-command-grid {
  min-width: 0;
}

.report-stage-document,
.report-stage-rail,
.ent-table-wrap,
.admin-table-wrap,
.agent-card,
.agent-command-card,
.kx-pane,
.kx-drawer,
.cc-task-body,
.cc-subsys-list {
  min-width: 0;
}

.vf-empty-card,
.ent-empty-state,
.rw-idle-card {
  border-color: rgba(var(--vf-route-accent-rgb), 0.24);
  background:
    linear-gradient(135deg, rgba(var(--vf-route-accent-rgb), 0.08), transparent 42%),
    rgba(7, 14, 24, 0.72);
}

.cc-throughput-row {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.cc-through-stat {
  min-width: 0;
}

.cc-through-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

@keyframes vfPr8RouteWake {
  0% { opacity: 0.88; filter: saturate(0.9); }
  100% { opacity: 1; filter: saturate(1); }
}

.tab-panel.is-active :where(.vf-panel-entrance, .report-stage, .kx-pane, .agent-card, .ent-section, .cockpit-canonical-dock) {
  animation: vfPr8RouteWake 260ms ease-out both;
}

@media (max-width: 1080px) {
  body[data-shell="vairifeye"] .command-nav,
  body:not([data-shell]) .command-nav {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  body[data-shell="vairifeye"] .command-nav-item,
  body:not([data-shell]) .command-nav-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .tab-panel.is-active::before {
    inset-inline: 0;
  }

  body[data-shell="vairifeye"] .vf-chrome-band,
  body:not([data-shell]) .vf-chrome-band {
    gap: 8px;
  }

  body[data-shell="vairifeye"] .command-nav-item,
  body:not([data-shell]) .command-nav-item {
    min-height: 38px;
    font-size: 11px;
  }

  .cc-throughput {
    padding: 12px;
  }

  .cc-throughput-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cc-through-stat,
  .cc-through-stat:first-child {
    padding: 8px;
    border-left: 0;
    border-top: 1px solid rgba(var(--vf-route-accent-rgb), 0.16);
    background: rgba(5, 12, 22, 0.42);
  }

  .cc-through-val {
    font-size: 20px;
  }

  :where(.tab-panel[data-tab-panel="reports"],
         .tab-panel[data-tab-panel="admin"],
         .tab-panel[data-tab-panel="settings"],
         .tab-panel[data-tab-panel="agents"],
         .tab-panel[data-tab-panel="training"],
         .tab-panel[data-tab-panel="metrics"],
         .tab-panel[data-tab-panel="diagnostic"]) :where(.panel, .glass-panel, .report-stage, .ent-fieldset, .ent-stat-card, .agent-card, .agent-command-card) {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.025),
      0 12px 24px rgba(0, 0, 0, 0.20);
  }
}

@media (max-width: 420px) {
  .cc-throughput-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.is-active :where(.vf-panel-entrance, .report-stage, .kx-pane, .agent-card, .ent-section, .cockpit-canonical-dock) {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-shell="vairifeye"] .vf-chrome-band,
  body:not([data-shell]) .vf-chrome-band,
  :where(.tab-panel[data-tab-panel="reports"],
         .tab-panel[data-tab-panel="admin"],
         .tab-panel[data-tab-panel="settings"],
         .tab-panel[data-tab-panel="agents"],
         .tab-panel[data-tab-panel="training"],
         .tab-panel[data-tab-panel="metrics"],
         .tab-panel[data-tab-panel="diagnostic"]) :where(.panel, .glass-panel, .report-stage, .ent-fieldset, .ent-stat-card, .agent-card, .agent-command-card) {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  }
}

/* =====================================================================
   RX3 — Vairifeye visual-system reset foundation.
   Scope: visual tokens, shell chrome, HUD panel grammar, typography,
   spacing, status colors, and reduced-motion-safe presence only.
   No product state, Pathwave contract, Training repair, Agents runtime,
   Ask authority, dependency, or backend semantics live in this block.
   ===================================================================== */

body[data-shell="vairifeye"] {
  --vf-black: #010309;
  --vf-black-2: #030714;
  --vf-ink: #eef7ff;
  --vf-ink-soft: #b9c9df;
  --vf-ink-dim: #7f92ad;
  --vf-cyan: #64d8ff;
  --vf-cyan-rgb: 100, 216, 255;
  --vf-blue: #4c8dff;
  --vf-green: #54f58a;
  --vf-amber: #ffb22d;
  --vf-red: #ff4f46;
  --vf-panel: rgba(2, 7, 16, 0.82);
  --vf-panel-2: rgba(6, 14, 27, 0.76);
  --vf-panel-edge: rgba(100, 216, 255, 0.34);
  --vf-panel-hairline: rgba(189, 235, 255, 0.12);
  --vf-panel-glow: rgba(42, 176, 255, 0.20);
  --vf-radius: 6px;
  --vf-rail: 14px;
  --bg-top: #000;
  --bg-mid: #02050d;
  --bg-bottom: #000;
  --surface: var(--vf-panel);
  --surface-strong: rgba(3, 8, 17, 0.92);
  --surface-soft: rgba(5, 13, 25, 0.70);
  --ink: var(--vf-ink-soft);
  --ink-strong: var(--vf-ink);
  --muted: var(--vf-ink-dim);
  --brand: var(--vf-cyan);
  --brand-strong: var(--vf-blue);
  --brand-rgb: var(--vf-cyan-rgb);
  --brand-soft: rgba(var(--vf-cyan-rgb), 0.11);
  --accent: var(--vf-cyan);
  --accent-soft: rgba(var(--vf-cyan-rgb), 0.10);
  --success: var(--vf-green);
  --success-soft: rgba(84, 245, 138, 0.10);
  --warning: var(--vf-amber);
  --warning-soft: rgba(255, 178, 45, 0.11);
  --danger: var(--vf-red);
  --danger-soft: rgba(255, 79, 70, 0.12);
  --line: rgba(126, 215, 255, 0.10);
  --line-strong: rgba(168, 232, 255, 0.20);
  --glass-blur: blur(20px) saturate(145%);
  --glass-border: 1px solid var(--vf-panel-hairline);
  --glass-border-active: 1px solid rgba(var(--vf-cyan-rgb), 0.42);
  --glass-border-glow: 1px solid rgba(var(--vf-cyan-rgb), 0.22);
  --shadow-panel:
    0 18px 48px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-shell="vairifeye"] {
  background-color: #000;
  background-image:
    radial-gradient(circle at 50% 7%, rgba(var(--vf-cyan-rgb), 0.12), transparent 28%),
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--vf-cyan-rgb), 0.020) 1px, transparent 1px),
    linear-gradient(180deg, #000 0%, #030713 48%, #000 100%);
  background-size: auto, 36px 36px, 36px 36px, auto;
}

body[data-shell="vairifeye"]::before {
  opacity: 0.62;
  background:
    radial-gradient(circle at 14% 12%, rgba(var(--vf-cyan-rgb), 0.10), transparent 20%),
    radial-gradient(circle at 82% 86%, rgba(255, 178, 45, 0.055), transparent 24%),
    linear-gradient(90deg, transparent 0 79px, rgba(var(--vf-cyan-rgb), 0.026) 79px 80px, transparent 80px),
    linear-gradient(0deg, transparent 0 79px, rgba(var(--vf-cyan-rgb), 0.022) 79px 80px, transparent 80px);
  background-size: auto, auto, 80px 80px, 80px 80px;
}

body[data-shell="vairifeye"] .shell {
  width: min(100%, 1720px);
  max-width: none;
  padding: var(--vf-rail);
  gap: 14px;
}

body[data-shell="vairifeye"] .vf-chrome-band {
  border-radius: var(--vf-radius);
  border: 1px solid rgba(var(--vf-cyan-rgb), 0.24);
  background:
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.10), transparent 18%, transparent 82%, rgba(var(--vf-cyan-rgb), 0.08)),
    linear-gradient(180deg, rgba(8, 18, 31, 0.88), rgba(2, 6, 13, 0.92));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 42px rgba(var(--vf-cyan-rgb), 0.09);
  overflow: clip;
}

body[data-shell="vairifeye"] .topbar.glass-panel {
  min-height: 96px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  align-items: center;
  gap: 18px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.12), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.36);
  box-shadow: inset 0 -1px 0 rgba(var(--vf-cyan-rgb), 0.26);
}

body[data-shell="vairifeye"] .topbar.glass-panel::after {
  top: 45%;
  font-size: 30px;
  letter-spacing: 0;
  color: rgba(229, 248, 255, 0.96);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.70),
    0 0 18px rgba(var(--vf-cyan-rgb), 0.42);
  background:
    linear-gradient(90deg, transparent, rgba(var(--vf-cyan-rgb), 0.55), transparent) bottom / 100% 1px no-repeat,
    radial-gradient(circle at 10px 50%, var(--vf-green) 0 3px, rgba(84, 245, 138, 0.22) 4px 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 12px) 50%, var(--vf-cyan) 0 3px, transparent 4px);
}

body[data-shell="vairifeye"] .topbar.glass-panel::before {
  top: 68%;
  font-size: 10px;
  letter-spacing: 0;
  color: rgba(var(--vf-cyan-rgb), 0.72);
}

body[data-shell="vairifeye"] .brand-lockup {
  min-width: 0;
  align-items: center;
  gap: 12px;
}

body[data-shell="vairifeye"] .brand-lockup.jv-topbar-lockup {
  width: 280px !important;
  height: 74px !important;
  min-height: 74px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  overflow: visible;
}

body[data-shell="vairifeye"] .brand-lockup.jv-topbar-lockup::before {
  width: 74px !important;
  height: 74px !important;
  left: 37px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(var(--vf-cyan-rgb), 0.18);
  box-shadow:
    inset 0 0 18px rgba(var(--vf-cyan-rgb), 0.08),
    0 0 24px rgba(var(--vf-cyan-rgb), 0.15);
}

body[data-shell="vairifeye"] .jv-topbar-ring {
  left: 37px !important;
  top: 50% !important;
  width: 70px !important;
  height: 70px !important;
  transform: translate(-50%, -50%) !important;
  filter: drop-shadow(0 0 14px rgba(var(--vf-cyan-rgb), 0.28));
}

body[data-shell="vairifeye"] .vairifeye-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

body[data-shell="vairifeye"] .jv-topbar-lockup .vairifeye-brand .brand-copy {
  position: static !important;
  transform: none !important;
  white-space: nowrap;
  pointer-events: auto;
}

body[data-shell="vairifeye"] .brand-mark {
  width: 88px;
  max-width: 88px;
}

body[data-shell="vairifeye"] .vairifeye-mark {
  width: 86px;
  max-width: 86px;
  filter: drop-shadow(0 0 12px rgba(var(--vf-cyan-rgb), 0.24));
}

body[data-shell="vairifeye"] .vairifeye-wordmark {
  font-size: 22px;
  letter-spacing: 0;
  color: rgba(238, 247, 255, 0.94);
}

body[data-shell="vairifeye"] .topbar-actions {
  justify-self: end;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body[data-shell="vairifeye"] .header-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-shell="vairifeye"] .identity {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 18, 0.72);
}

body[data-shell="vairifeye"] .hero-slim {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.20);
  box-shadow: inset 0 -1px 0 rgba(var(--vf-cyan-rgb), 0.18);
}

body[data-shell="vairifeye"] .command-nav {
  min-height: 52px;
  padding: 8px 14px 10px;
  gap: 8px;
  border-top: 1px solid rgba(var(--vf-cyan-rgb), 0.12);
  background:
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.055), transparent 30%, transparent 70%, rgba(var(--vf-cyan-rgb), 0.035)),
    rgba(0, 0, 0, 0.28);
}

body[data-shell="vairifeye"] .command-nav-item {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 4px;
  border-color: rgba(var(--vf-cyan-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(4, 11, 22, 0.70);
  color: rgba(206, 225, 242, 0.76);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-shell="vairifeye"] .command-nav-item.is-active,
body[data-shell="vairifeye"] .command-nav-item[aria-current="page"] {
  color: var(--vf-ink);
  border-color: rgba(var(--vf-cyan-rgb), 0.64);
  background:
    linear-gradient(180deg, rgba(var(--vf-cyan-rgb), 0.16), rgba(var(--vf-cyan-rgb), 0.04)),
    rgba(6, 17, 32, 0.90);
}

body[data-shell="vairifeye"] :where(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel,
       .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
       .cc-brain-trust, .cc-activity, .cc-throughput, .cc-stat-cell,
       .cc-command-header, .cc-truth-topology, .cc-topology-node,
       .cc-queue-row, .cc-gate-row, .cockpit-hud, .cockpit-primary,
       .cockpit-side, .audit-execution-strip, .cockpit-ignition,
       .rw-live-report, .rw-recent-panel, .preview-stage-fullwidth,
       .jv-frame, .jv-viewport, .kx-pane, .kx-posture-header, .kx-drawer,
       .agent-card, .agent-command-card, .admin-card, .settings-panel,
       .ts-region, .ts-posture-header) {
  border-radius: var(--vf-radius);
  border-color: rgba(var(--vf-cyan-rgb), 0.22);
  background:
    linear-gradient(135deg, rgba(var(--vf-cyan-rgb), 0.055), transparent 38%),
    linear-gradient(180deg, rgba(8, 17, 31, 0.72), rgba(1, 4, 10, 0.86));
  box-shadow:
    var(--shadow-panel),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 28px rgba(var(--vf-cyan-rgb), 0.055);
}

body[data-shell="vairifeye"] :where(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel,
       .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
       .cc-brain-trust, .cc-activity, .cc-throughput, .cc-command-header,
       .cc-truth-topology, .cockpit-hud, .cockpit-primary, .audit-execution-strip,
       .rw-live-report, .kx-pane, .kx-posture-header, .agent-card, .admin-card,
       .settings-panel, .ts-region) {
  position: relative;
  overflow: clip;
}

body[data-shell="vairifeye"] :where(.panel, .glass-panel, .report-stage, .saved-runs-panel, .modal-panel,
       .cc-posture-cell, .cc-task-list, .cc-alert-stream, .cc-subsys-bay,
       .cc-brain-trust, .cc-activity, .cc-throughput, .cc-command-header,
       .cc-truth-topology, .cockpit-hud, .cockpit-primary, .audit-execution-strip,
       .rw-live-report, .kx-pane, .kx-posture-header, .agent-card, .admin-card,
       .settings-panel, .ts-region)::before {
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--vf-cyan-rgb), 0.72) 18%,
      rgba(84, 245, 138, 0.42) 50%,
      rgba(255, 178, 45, 0.36) 72%,
      transparent);
  opacity: 0.78;
}

body[data-shell="vairifeye"] :where(.panel-header h2, .panel-header h3, .cc-command-title h2,
       .cc-triage-title, .report-stage-title, .kx-pane h2, .kx-pane h3,
       .agent-card h3, .admin-card h3, .settings-panel h2,
       .cockpit-primary h2, .cockpit-hud h2) {
  color: var(--vf-ink);
  font-family: var(--font-display);
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(var(--vf-cyan-rgb), 0.10);
}

body[data-shell="vairifeye"] :where(.cc-triage-tag, .section-label, .eyebrow, .panel-eyebrow,
       .report-stage-eyebrow, .kx-kicker, .agent-kicker,
       .cockpit-step-body-head, .cc-posture-eyebrow, .cc-through-label,
       .cc-node-label, .cc-gate-name, .rw-sc-k) {
  color: rgba(var(--vf-cyan-rgb), 0.88);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-shell="vairifeye"] :where(.vf-truth-pill, .pw-status-pill, .state-pill, .header-badge,
       .shell-badge, .cc-subsys-state, .cc-node-state) {
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-shell="vairifeye"] .vf-truth-pill[data-state="live"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="live"] {
  color: var(--vf-green);
  border-color: rgba(84, 245, 138, 0.58);
  background: rgba(84, 245, 138, 0.08);
  box-shadow: 0 0 14px rgba(84, 245, 138, 0.20);
}

body[data-shell="vairifeye"] .vf-truth-pill[data-state="awaiting"],
body[data-shell="vairifeye"] .vf-truth-pill[data-state="preview"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="awaiting"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="preview"] {
  color: var(--vf-amber);
  border-color: rgba(255, 178, 45, 0.52);
  background: rgba(255, 178, 45, 0.08);
}

body[data-shell="vairifeye"] .vf-truth-pill[data-state="human-required"],
body[data-shell="vairifeye"] .vf-truth-pill[data-state="offline"],
body[data-shell="vairifeye"] .vf-truth-pill[data-state="not-configured"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="human-required"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="offline"],
body[data-shell="vairifeye"] :where(.pw-status-pill, .state-pill)[data-state="not-configured"] {
  color: var(--vf-red);
  border-color: rgba(255, 79, 70, 0.55);
  background: rgba(255, 79, 70, 0.075);
}

body[data-shell="vairifeye"] :where(.primary-button, .btn-primary, .btn-action, .vf-btn-primary,
       .cc-demo-launch-button, .cc-btn, .ghost-button, button) {
  border-radius: 4px;
}

body[data-shell="vairifeye"] :where(.primary-button, .btn-primary, .btn-action, .vf-btn-primary,
       .cc-demo-launch-button, .cc-btn) {
  background:
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.25), rgba(255, 255, 255, 0.06) 50%, rgba(var(--vf-cyan-rgb), 0.18)),
    rgba(5, 12, 24, 0.82);
  border-color: rgba(var(--vf-cyan-rgb), 0.48);
  color: var(--vf-ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 18px rgba(var(--vf-cyan-rgb), 0.14);
}

body[data-shell="vairifeye"] .cc-command-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 148px;
}

body[data-shell="vairifeye"] .cc-command-title h2 {
  font-size: 30px;
  line-height: 1.05;
}

body[data-shell="vairifeye"] .cc-posture-ribbon {
  gap: 12px;
}

body[data-shell="vairifeye"] .cc-posture-cell {
  min-height: 82px;
  border-left-width: 2px;
}

body[data-shell="vairifeye"] .cc-topology-map {
  min-height: 330px;
}

body[data-shell="vairifeye"] .tab-panel {
  padding-block: 14px 24px;
}

body[data-shell="vairifeye"] .tab-panel.is-active::before {
  height: 1px;
  opacity: 0.72;
}

@keyframes vfRx3FieldSweep {
  0% {
    transform: translateX(-45%);
    opacity: 0;
  }
  18% {
    opacity: 0.42;
  }
  100% {
    transform: translateX(145%);
    opacity: 0;
  }
}

body[data-shell="vairifeye"] .tab-panel.is-active::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 34%;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(var(--vf-cyan-rgb), 0.055), transparent);
  animation: vfRx3FieldSweep 11s linear infinite;
}

@media (max-width: 1180px) {
  body[data-shell="vairifeye"] .topbar.glass-panel {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body[data-shell="vairifeye"] .topbar-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
  }

  body[data-shell="vairifeye"] .topbar.glass-panel::after {
    font-size: 23px;
  }
}

@media (max-width: 720px) {
  body[data-shell="vairifeye"] .shell {
    padding: 0;
    gap: 10px;
  }

  body[data-shell="vairifeye"] .topbar.glass-panel {
    min-height: 150px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 12px;
  }

  body[data-shell="vairifeye"] .brand-lockup {
    justify-content: center;
  }

  body[data-shell="vairifeye"] .jv-topbar-ring {
    width: 58px;
    height: 58px;
  }

  body[data-shell="vairifeye"] .brand-mark {
    width: 118px;
    max-width: 118px;
  }

  body[data-shell="vairifeye"] .vairifeye-mark {
    width: 112px;
    max-width: 112px;
  }

  body[data-shell="vairifeye"] .topbar.glass-panel::after {
    position: static;
    transform: none;
    order: 2;
    font-size: 17px;
    letter-spacing: 0;
    padding: 0 28px;
  }

  body[data-shell="vairifeye"] .topbar-actions {
    justify-content: center;
  }

  body[data-shell="vairifeye"] .hero-slim,
  body[data-shell="vairifeye"] .command-nav {
    border-radius: 0;
  }

  body[data-shell="vairifeye"] .cc-command-header {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-shell="vairifeye"] .tab-panel.is-active::after,
  body[data-shell="vairifeye"] .topbar.glass-panel::after {
    animation: none !important;
  }
}

/* =====================================================================
   RX6 - target surface structural alignment.
   Scope: Audit Cockpit, Command Center, and Knowledge / Ask surface
   structure only. Existing state remains the only source for rendered
   values; this layer changes composition, density, rails, and hierarchy.
   ===================================================================== */

body[data-shell="vairifeye"] {
  --vf-rx6-board-bg:
    linear-gradient(135deg, rgba(var(--vf-cyan-rgb), 0.075), transparent 34%),
    linear-gradient(180deg, rgba(4, 12, 24, 0.92), rgba(1, 4, 10, 0.96));
  --vf-rx6-board-line: rgba(var(--vf-cyan-rgb), 0.28);
  --vf-rx6-board-soft: rgba(var(--vf-cyan-rgb), 0.075);
  --vf-rx6-amber-soft: rgba(255, 178, 45, 0.10);
}

body[data-shell="vairifeye"] :where(.cc-command-header, .cc-task-list,
       .cc-truth-topology, .cc-subsys-bay, .cc-alert-stream,
       .cc-brain-trust, .cc-activity, .cc-throughput,
       .cockpit-activation, .review-workspace[data-rw-state="loaded"],
       .kx-pane-ask, .kx-ask-context-builder, .kx-ask-composer,
       .kx-ask-citation-panel, .kx-ask-future) {
  border-color: var(--vf-rx6-board-line);
  background: var(--vf-rx6-board-bg);
  box-shadow:
    var(--shadow-panel),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 30px rgba(var(--vf-cyan-rgb), 0.06);
}

body[data-shell="vairifeye"] .cc-surface {
  display: grid;
  gap: 12px;
}

body[data-shell="vairifeye"] .cc-command-header {
  min-height: 126px;
  padding: 16px 18px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr) auto;
  align-items: stretch;
  overflow: hidden;
}

body[data-shell="vairifeye"] .cc-command-header::after,
body[data-shell="vairifeye"] .cc-truth-topology::after,
body[data-shell="vairifeye"] .kx-pane-ask::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 1px solid rgba(var(--vf-cyan-rgb), 0.12);
  background:
    linear-gradient(90deg, transparent, rgba(var(--vf-cyan-rgb), 0.06), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%);
  opacity: 0.72;
}

body[data-shell="vairifeye"] .cc-command-title h2 {
  font-size: 29px;
}

body[data-shell="vairifeye"] .cc-posture-ribbon {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

body[data-shell="vairifeye"] .cc-posture-cell {
  min-height: 70px;
  padding: 10px 12px;
  border-left-width: 3px;
}

body[data-shell="vairifeye"] .cc-topology-grid {
  grid-template-columns: minmax(280px, 0.76fr) minmax(560px, 1.5fr) minmax(280px, 0.76fr);
  gap: 12px;
  margin-bottom: 12px;
}

body[data-shell="vairifeye"] .cc-command-lower {
  grid-template-columns: minmax(320px, 0.92fr) minmax(540px, 1.08fr);
  gap: 12px;
}

body[data-shell="vairifeye"] .cc-task-list,
body[data-shell="vairifeye"] .cc-subsys-bay,
body[data-shell="vairifeye"] .cc-alert-stream,
body[data-shell="vairifeye"] .cc-brain-trust,
body[data-shell="vairifeye"] .cc-activity,
body[data-shell="vairifeye"] .cc-throughput {
  padding: 14px;
}

body[data-shell="vairifeye"] .cc-truth-topology {
  min-height: 430px;
  padding: 14px;
}

body[data-shell="vairifeye"] .cc-topology-map {
  min-height: 350px;
  margin-top: 12px;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--vf-cyan-rgb), 0.18), transparent 28%),
    radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(var(--vf-cyan-rgb), 0.07) 35% 36%, transparent 37%),
    linear-gradient(rgba(var(--vf-cyan-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--vf-cyan-rgb), 0.07) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}

body[data-shell="vairifeye"] .cc-topology-node {
  border-color: rgba(var(--vf-cyan-rgb), 0.28);
  background:
    linear-gradient(135deg, rgba(var(--vf-cyan-rgb), 0.09), transparent 45%),
    rgba(2, 9, 18, 0.86);
}

body[data-shell="vairifeye"] .cc-topology-node--primary {
  border-color: rgba(var(--vf-cyan-rgb), 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 26px rgba(var(--vf-cyan-rgb), 0.16);
}

body[data-shell="vairifeye"] .cc-alert-body,
body[data-shell="vairifeye"] .cc-task-body,
body[data-shell="vairifeye"] .cc-subsys-grid {
  gap: 7px;
}

body[data-shell="vairifeye"] .cc-throughput-row {
  gap: 8px;
}

body[data-shell="vairifeye"] .cc-through-stat {
  padding: 8px 10px;
  border: 1px solid rgba(var(--vf-cyan-rgb), 0.12);
  background: rgba(0, 0, 0, 0.18);
}

body[data-shell="vairifeye"] .cockpit-activation {
  padding: 18px;
  gap: 12px;
}

body[data-shell="vairifeye"] .tab-panel[data-tab-panel="audit"].is-active {
  display: grid;
  gap: 14px;
}

body[data-shell="vairifeye"] .tab-panel[data-tab-panel="audit"].is-active:has(.review-workspace[data-rw-state="loaded"]) .cockpit-throughput {
  order: 0;
}

body[data-shell="vairifeye"] .tab-panel[data-tab-panel="audit"].is-active:has(.review-workspace[data-rw-state="loaded"]) .cockpit-truth-spine {
  order: 1;
}

body[data-shell="vairifeye"] .tab-panel[data-tab-panel="audit"].is-active:has(.review-workspace[data-rw-state="loaded"]) .review-workspace[data-rw-state="loaded"] {
  order: 2;
}

body[data-shell="vairifeye"] .tab-panel[data-tab-panel="audit"].is-active:has(.review-workspace[data-rw-state="loaded"]) .cockpit-activation {
  order: 3;
}

body[data-shell="vairifeye"] .audit-execution-strip {
  padding: 10px 12px;
}

body[data-shell="vairifeye"] .audit-execution-context {
  gap: 8px;
}

body[data-shell="vairifeye"] .cockpit-activation-deck {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 12px;
}

body[data-shell="vairifeye"] .cockpit-steps {
  gap: 6px;
  margin-bottom: 10px;
}

body[data-shell="vairifeye"] .cockpit-step {
  min-height: 62px;
  padding: 8px 10px;
}

body[data-shell="vairifeye"] .cockpit-step-body-panel {
  padding: 10px 12px;
  margin-bottom: 8px;
}

body[data-shell="vairifeye"] .cockpit-primary--stacked {
  padding: 16px;
}

body[data-shell="vairifeye"] .cockpit-primary--stacked .cockpit-primary-body {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
}

body[data-shell="vairifeye"] .cockpit-primary .jv-gauge {
  width: 212px;
  height: 212px;
}

body[data-shell="vairifeye"] .cockpit-side--stacked {
  gap: 12px;
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] {
  border-color: rgba(255, 178, 45, 0.34);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 178, 45, 0.11), transparent 30%),
    linear-gradient(180deg, rgba(5, 11, 20, 0.94), rgba(1, 4, 9, 0.97));
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-columns {
  grid-template-columns: minmax(220px, 0.58fr) minmax(560px, 1.82fr) minmax(340px, 0.9fr);
  min-height: 630px;
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-center {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 178, 45, 0.10), transparent 34%),
    #05070b;
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-photo-wrap {
  min-height: 520px;
  background:
    linear-gradient(rgba(255, 178, 45, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 178, 45, 0.055) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255, 178, 45, 0.08), transparent 52%);
  background-size: 36px 36px, 36px 36px, auto;
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-right {
  background:
    linear-gradient(180deg, rgba(255, 178, 45, 0.08), transparent 32%),
    rgba(4, 9, 16, 0.9);
}

body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-live-report,
body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-recent-panel {
  border-color: rgba(255, 178, 45, 0.24);
}

body[data-shell="vairifeye"] .cockpit-canonical-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 0.58fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 178, 45, 0.28);
  background:
    linear-gradient(90deg, rgba(255, 178, 45, 0.10), transparent 45%, rgba(var(--vf-cyan-rgb), 0.08)),
    rgba(2, 7, 14, 0.92);
}

body[data-shell="vairifeye"] .kx-layout {
  grid-template-columns: minmax(300px, 0.55fr) minmax(820px, 1.45fr);
  gap: 12px;
}

body[data-shell="vairifeye"] .kx-sidecol {
  display: grid;
  gap: 12px;
}

body[data-shell="vairifeye"] .kx-pane-ask {
  order: -1;
  display: grid;
  gap: 10px;
  padding: 16px;
}

body[data-shell="vairifeye"] .kx-ask-banner {
  margin-bottom: 0;
  border-left-width: 2px;
  background:
    linear-gradient(90deg, var(--vf-rx6-amber-soft), transparent 62%),
    rgba(0, 0, 0, 0.18);
}

body[data-shell="vairifeye"] .kx-ask-workbench {
  grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.08fr) minmax(240px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

body[data-shell="vairifeye"] .kx-ask-context-builder,
body[data-shell="vairifeye"] .kx-ask-composer,
body[data-shell="vairifeye"] .kx-ask-citation-panel {
  min-height: 100%;
  border-color: rgba(var(--vf-cyan-rgb), 0.24);
}

body[data-shell="vairifeye"] .kx-ask-context-builder {
  grid-column: 1;
}

body[data-shell="vairifeye"] .kx-ask-composer {
  grid-column: 2;
}

body[data-shell="vairifeye"] .kx-ask-citation-panel {
  grid-column: 3;
}

body[data-shell="vairifeye"] .kx-ask-run-strip,
body[data-shell="vairifeye"] .kx-ask-identity-grid,
body[data-shell="vairifeye"] .kx-ask-count-grid,
body[data-shell="vairifeye"] .kx-ask-field-row {
  gap: 6px;
}

body[data-shell="vairifeye"] .kx-ask-future {
  margin: 0;
  border-style: solid;
  background:
    linear-gradient(90deg, rgba(255, 178, 45, 0.08), transparent 58%),
    rgba(0, 0, 0, 0.18);
}

@media (max-width: 1180px) {
  body[data-shell="vairifeye"] .cc-command-header,
  body[data-shell="vairifeye"] .cc-topology-grid,
  body[data-shell="vairifeye"] .cc-command-lower,
  body[data-shell="vairifeye"] .cockpit-activation-deck,
  body[data-shell="vairifeye"] .kx-layout,
  body[data-shell="vairifeye"] .kx-ask-workbench {
    grid-template-columns: 1fr;
  }

  body[data-shell="vairifeye"] .cc-truth-topology {
    order: -2;
  }

  body[data-shell="vairifeye"] .cc-task-list {
    order: -1;
  }

  body[data-shell="vairifeye"] .kx-ask-context-builder,
  body[data-shell="vairifeye"] .kx-ask-composer,
  body[data-shell="vairifeye"] .kx-ask-citation-panel {
    grid-column: auto;
  }

  body[data-shell="vairifeye"] .review-workspace[data-rw-state="loaded"] .rw-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body[data-shell="vairifeye"] .cc-command-header,
  body[data-shell="vairifeye"] .cc-task-list,
  body[data-shell="vairifeye"] .cc-truth-topology,
  body[data-shell="vairifeye"] .cc-subsys-bay,
  body[data-shell="vairifeye"] .cc-alert-stream,
  body[data-shell="vairifeye"] .cc-brain-trust,
  body[data-shell="vairifeye"] .cc-activity,
  body[data-shell="vairifeye"] .cc-throughput,
  body[data-shell="vairifeye"] .cockpit-activation,
  body[data-shell="vairifeye"] .kx-pane-ask {
    padding: 12px;
  }

  body[data-shell="vairifeye"] .cc-posture-ribbon,
  body[data-shell="vairifeye"] .cockpit-steps,
  body[data-shell="vairifeye"] .audit-execution-context,
  body[data-shell="vairifeye"] .cockpit-canonical-dock {
    grid-template-columns: 1fr;
  }

  body[data-shell="vairifeye"] .cc-topology-map {
    min-height: auto;
  }

  body[data-shell="vairifeye"] .cockpit-primary--stacked .cockpit-primary-body {
    grid-template-columns: 1fr;
  }

  body[data-shell="vairifeye"] .cockpit-primary .jv-gauge {
    width: 184px;
    height: 184px;
  }
}