/* Interactive terminal demo (markup in index.html, behaviour in site/src/terminal). */

.terminal {
  border: 1px solid var(--line);
  background: var(--bg-terminal);
  transition: border-color 0.25s;
  min-width: 0;
}
.terminal.is-live { border-color: var(--cyan); }

.terminal__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.terminal__path { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.terminal__chips, .terminal__controls { display: flex; align-items: center; gap: 8px; }

.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 10px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip.is-active { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.chip--ghost { color: var(--fg-2); }
.chip--ghost:hover { border-color: var(--cyan); }
.chip--speed { min-width: 44px; }
.chip--auto { color: var(--green); border-color: var(--green); }

.terminal__screen {
  position: relative;
  padding: 20px 22px;
  height: 378px;
  overflow: hidden;
  outline: none;
  cursor: text;
}
.terminal__screen:focus-visible { box-shadow: inset 0 0 0 1px var(--cyan); }

.terminal__lines { overflow-x: auto; }
.terminal__line {
  white-space: pre;
  height: 21px;
  line-height: 21px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.tone-muted { color: var(--muted); }
.tone-text { color: var(--fg-2); }
.tone-bright { color: var(--fg); }
.tone-cyan { color: var(--cyan); }
.tone-green { color: var(--green); }
.tone-lime { color: var(--lime); }
.is-bold { font-weight: 700; }

.terminal__hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan);
  border: 1px solid var(--line);
  padding: 6px 11px;
  background: rgba(13, 21, 32, 0.95);
  pointer-events: none;
  transition: color 0.2s, border-color 0.2s;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.terminal__hint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.terminal.is-live .terminal__hint { color: var(--green); border-color: var(--green); }
.terminal.is-live .terminal__hint-dot { background: var(--green); }

/* A tap cannot send arrow keys, so touch screens keep the autoplay and lose the invitation. */
@media (hover: none) and (pointer: coarse) {
  .terminal__hint { display: none; }
}

@media (max-width: 640px) {
  .terminal__screen { padding: 16px 14px; }
  .terminal__line { font-size: 12px; }
}