/* Landing, terminal transcripts of the hero and the examples.
   Only var(--...) from /brand/tokens.css. */

.screen {
  background: var(--color-term-bg);
  color: var(--color-term-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  padding: var(--space-4);
  white-space: pre;
  overflow-x: auto;
  min-height: 22rem;
}

/* The hero box always holds its whole transcript: a dimmed copy sits under
   the lines being typed, so the box is never empty and never changes size.
   Both layers share one grid cell and scroll together. */
.hero-term {
  display: grid;
  min-height: 0;
}

.hero-term > * {
  grid-area: 1 / 1;
}

.hero-term .ghost,
.hero-term .ghost * {
  color: var(--color-term-muted);
}

.hero-term .ghost {
  opacity: 0.35;
}

@media (min-width: 40rem) {
  .hero-term {
    min-height: 22rem;
  }
}

.t-muted { color: var(--color-term-muted); }
.t-add,
.t-ok { color: var(--color-term-add); }
.t-del { color: var(--color-term-del); }
.t-ask { color: var(--color-term-ask); }
.t-you { color: var(--color-term-you); }
.ta { color: var(--color-term-text); }

.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--color-term-ask);
}

@media (prefers-reduced-motion: no-preference) {
  .caret {
    animation: blink 1s steps(1) 3;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}