/* components/console.css — mission console demo card
 * Animated by js/console-demo.js. Reads as a live mission run; labelled
 * "example" so it never pretends to be real telemetry.
 */

.console {
  background: rgba(10, 20, 16, 0.85);
  border: 0.5px solid var(--qi-glass-border);
  border-radius: var(--qi-radius-xl);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.45), 0 0 0 0.5px var(--qi-glass-border-subtle);
}
.console__bar {
  display: flex;
  align-items: center;
  gap: var(--qi-space-sm);
  padding: var(--qi-space-md) var(--qi-space-lg);
  border-bottom: 0.5px solid var(--qi-glass-border-subtle);
}
.console__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--qi-glass-border); }
.console__dot--a { background: var(--qi-error); }
.console__dot--b { background: var(--qi-warm); }
.console__dot--c { background: var(--qi-energy); }
.console__title {
  margin-left: var(--qi-space-sm);
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}
.console__live {
  margin-left: auto;
  font: var(--qi-font-caption);
  color: var(--qi-energy);
  display: flex; align-items: center; gap: 6px;
}
.console__live::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--qi-energy);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.3; } }

.console__body {
  padding: var(--qi-space-xl);
  font-family: var(--qi-font-mono);
  font-size: clamp(0.72rem, 1.1vw, 0.8rem);
  line-height: 1.9;
  min-height: 15.5rem;
}
.console__line { display: flex; gap: var(--qi-space-sm); align-items: baseline; opacity: 0.35; }
.console__line.is-done { opacity: 1; }
.console__line.is-active { opacity: 1; }
.console__line.is-active .console__step { color: var(--qi-accent); }
.console__mark { color: var(--qi-energy); flex-shrink: 0; }
.console__line.is-active .console__mark { color: var(--qi-accent); }
.console__line--hit .console__mark { color: var(--qi-trust); }
.console__step { color: var(--qi-text); white-space: nowrap; }
.console__detail { color: var(--qi-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__caret {
  display: inline-block; width: 7px; height: 1em;
  background: var(--qi-accent);
  vertical-align: -0.15em; margin-left: 2px;
  animation: caret-blink 0.9s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.console__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--qi-space-md) var(--qi-space-xl);
  border-top: 0.5px solid var(--qi-glass-border-subtle);
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}
.console__foot .cost { color: var(--qi-trust); }