/**
 * Comms Hub brand overlay — charcoal chassis, gold kickers, blue pills,
 * teal rail you-are-here only. Does not change Comms IA.
 * SOT: COMMS_SURFACE_COLOR.v1 · Hub look (void/space/surface).
 */
:root {
  --void-950: #141413;
  --space-900: #1c1c1b;
  --surface-800: #262624;
  --surface-700: #2a2a28;
  --text-primary: #f5f5f2;
  --text-secondary: #a8a8a4;
  --text-tertiary: #8a8a86;
  --hub-nav: #00e5ff;
  --hub-kicker: #fbbf24;
  --hub-execute: #3b82f6;
  --hub-pill: rgba(59, 130, 246, 0.16);
  --hub-pill-border: color-mix(in srgb, #3b82f6 50%, transparent);
  --hub-pill-on: #3b82f6;
  --select-execute: #3b82f6;
  --kicker-gold: #fbbf24;
  --signal-green: #22c55e;
  --signal-amber: #fbbf24;
  --signal-red: #ef4444;
  --pane-edge: #7a7a72;
  --pane-rail-bg: #141413;
  --pane-queue-bg: #1c1c1b;
  --pane-inspector-bg: #1c1c1b;
  --border-color: #3a3a38;
  --surface-genie: #fbbf24;
  --surface-genie-light: #fef3c7;
  --surface-genie-border: rgba(251, 191, 36, 0.45);
  --surface-genie-bg: #1c1c1b;
  --surface-genie-bg-soft: #262624;
  --surface-actions: #fbbf24;
  --surface-actions-light: #fef3c7;
  --surface-actions-border: rgba(251, 191, 36, 0.45);
  --surface-actions-bg: #1c1c1b;
  --surface-actions-bg-soft: #262624;
  --surface-actions-wash: #1c1c1b;
  --surface-actions-glow: rgba(251, 191, 36, 0.16);
  color-scheme: dark;
}

html,
body,
.comms-root {
  background: #141413 !important;
  color: #f5f5f2 !important;
}

.comms-header {
  background: #1c1c1b !important;
  border-bottom: 2px solid #7a7a72 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.comms-brand-mark {
  background: #262624 !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35) !important;
}
.comms-brand h1,
.fact-feed-kicker,
.raw-msg-kicker,
.graph-action-section-label,
.comms-inspector .kicker,
[class*="-kicker"] {
  color: #fbbf24 !important;
}

.comms-rail {
  background: #141413 !important;
  border-right: 2px solid #7a7a72 !important;
}
.comms-rail-item.is-active {
  background: rgba(0, 229, 255, 0.12) !important;
  box-shadow: inset 2px 0 0 #00e5ff !important;
}

.comms-queue,
.comms-stage,
.comms-inspector,
.comms-inspector-col {
  background: #1c1c1b !important;
}
.comms-inspector-col,
.comms-inspector {
  border-left: 2px solid #7a7a72 !important;
}
.comms-queue {
  border-right: 2px solid #7a7a72 !important;
}

/* Mode pills — Hub ghost / solid blue (not purple Archive). */
.comms-mode-tab {
  background: rgba(59, 130, 246, 0.16) !important;
  border: 1px solid color-mix(in srgb, #3b82f6 50%, transparent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.comms-mode-tab.is-active,
.comms-mode-tab[data-mode="raw"].is-active,
.comms-mode-tab[data-mode="feed"].is-active,
.comms-mode-tab[data-mode="archive"].is-active {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
  box-shadow: none !important;
}

.comms-util-panel,
.comms-util-panel[data-mode="feed"],
.comms-util-panel[data-mode="archive"] {
  background: #262624 !important;
  border: 1px solid #3a3a38 !important;
  box-shadow: none !important;
}
.comms-util-head,
.comms-util-panel[data-mode="feed"] .comms-util-head,
.comms-util-panel[data-mode="archive"] .comms-util-head {
  background: #1c1c1b !important;
  color: #f5f5f2 !important;
}

.channel-glance,
.raw-message-block,
.empty-card,
.empty-card[data-mode="feed"],
.empty-card[data-mode="archive"] {
  background: #262624 !important;
  border: 1px solid #3a3a38 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.fact-feed-card,
.fact-feed-card.is-traffic-todo {
  background: #262624 !important;
  border: 1px solid #3a3a38 !important;
  background-image: none !important;
}
.fact-feed-card.is-traffic-complete {
  background: #262624 !important;
  background-image: none !important;
  border: 1px solid #3a3a38 !important;
  box-shadow: inset 3px 0 0 #22c55e !important;
}
.fact-feed-card.is-traffic-pending,
.fact-feed-card.is-traffic-review {
  background: #262624 !important;
  background-image: none !important;
  border: 1px solid #3a3a38 !important;
  box-shadow: inset 3px 0 0 #fbbf24 !important;
}
.fact-feed-card.is-traffic-fail {
  background: #262624 !important;
  background-image: none !important;
  border: 1px solid #3a3a38 !important;
  box-shadow: inset 3px 0 0 #ef4444 !important;
}
.fact-feed-dot.is-traffic-complete,
.fact-feed-legend-item.is-complete::before {
  border-color: #22c55e !important;
  background: #22c55e !important;
  box-shadow: none !important;
}
.fact-feed-line.is-done {
  background: #22c55e !important;
  background-image: none !important;
}

.genie-float-pill,
.genie-float-bar {
  background: #1c1c1b !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fef3c7 !important;
  backdrop-filter: none !important;
}
.genie-float-pill:hover,
.genie-float-action:hover {
  background: #262624 !important;
  border-color: rgba(251, 191, 36, 0.75) !important;
}

.graph-action-slider-tab,
.graph-action-slider-body,
.graph-action-slider-head {
  background: #1c1c1b !important;
  background-image: none !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  color: #fef3c7 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.graph-action-slider-tab:hover {
  background: #262624 !important;
  background-image: none !important;
}
.graph-action-chip {
  background: rgba(59, 130, 246, 0.16) !important;
  border: 1px solid color-mix(in srgb, #3b82f6 50%, transparent) !important;
  color: #fff !important;
}
.graph-action-chip.is-active {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}
.graph-action-slider-body select,
.graph-action-slider-body .comms-motion-select {
  background: #141413 !important;
  color: #e2e8f0 !important;
  border-color: #3a3a38 !important;
}
.graph-node-action-row {
  background: rgba(59, 130, 246, 0.16) !important;
  border: 1px solid color-mix(in srgb, #3b82f6 50%, transparent) !important;
  color: #fff !important;
}
.graph-node-action-row:hover:not(:disabled) {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary,
.comms-run,
[class*="run-next"] {
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}