/* ═══════════════════════════════════════════════════════════════════
   /1 — ArbaEdge Demonstrator · module styles
   Relies on /assets/arba-system.css for tokens and primitives.
   ═══════════════════════════════════════════════════════════════════ */

/* Demo-specific device feed overlay — suppressed by design */
#videoStatus { display: none !important; }

/* Project card — give the default .card a subtle industrial accent bar */
#grid .card {
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
#grid .card:hover {
  transform: translateY(-2px);
  border-color: var(--hair-3);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 28px 60px -24px rgba(0,0,0,0.75);
}

/* Integrity status chips rendered inline by app.js */
#grid .card .badge[style*="color:white"] {
  color: #0a0f1c !important;
  background: var(--cyan) !important;
  border-color: var(--cyan) !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Make the demonstrator's first-run login cards feel like spec cards */
main#app > section.card:first-of-type::before {
  content: "";
  position: absolute;
  top: -1px; left: 22px;
  width: 36px; height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  border-radius: 1px;
}
main#app > section.card { position: relative; }

/* Device console output */
.console { color: var(--cyan); }