/* Terminal window: near-black screen, phosphor-green output. See js/terminal.js. Always labelled "Simulated output"
   unless the commands are real ones a person could run. */
.term {
  --t-border: #222d3a;
  margin: 0; background: var(--t-bg); color: var(--t-green); border: 1px solid var(--t-border); border-radius: var(--r-2);
  box-shadow: var(--e-2); overflow: hidden; font-family: var(--font-mono); min-width: 0;
}
.term-bar { display: flex; align-items: center; gap: var(--sp-1); padding: 10px var(--sp-2); background: var(--t-bar); border-bottom: 1px solid var(--t-border); min-width: 0; }
.term-dots { display: inline-flex; gap: 6px; flex: none; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2c3948; display: block; }
.term-title { flex: 1; min-width: 0; color: var(--t-dim); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-badge { flex: none; color: var(--t-dim); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #2b3a4a; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.term-static, .term-out {
  margin: 0; padding: var(--sp-2); font: 0.84rem/1.65 var(--font-mono); color: var(--t-green); white-space: pre-wrap; overflow-wrap: anywhere;
  height: 17.5em; overflow-y: auto; outline-offset: -3px; tab-size: 2;
}
.term-compact .term-static, .term-compact .term-out { height: 12.5em; }
.term-out:focus-visible, .term-static:focus-visible { outline: 2px solid var(--t-cyan); }
.tl { display: inline; }
.tl-cmd { color: var(--t-text); }
.tl-cmd .tl-pfx { color: var(--t-dim); }
.tl-out { color: var(--t-green); }
.tl-json { color: var(--t-green); }
.tj-k { color: var(--t-cyan); } .tj-n { color: var(--t-amber); }
.tl-warn { color: var(--t-amber); }
.tl-ok { color: var(--t-green); font-weight: 600; }
.tl-hint { color: var(--t-dim); }
.term-cursor { display: inline-block; color: var(--t-green); animation: term-blink 1.1s steps(1) infinite; }
.term[data-state="done"] .term-cursor { animation-duration: 1.6s; }
@keyframes term-blink { 50% { opacity: 0; } }
.term-ctl { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--sp-2); background: var(--t-bar); border-top: 1px solid var(--t-border); }
.term-btn {
  min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid #2b3a4a; background: transparent; color: var(--t-text);
  font: 600 0.78rem var(--font-mono); cursor: pointer; transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.term-btn:hover:not([disabled]) { background: #1c2735; border-color: var(--t-dim); }
.term-btn[disabled] { opacity: 0.4; cursor: default; }
.term-btn:focus-visible { outline: 2px solid var(--t-cyan); outline-offset: 2px; }
.term-btn[data-act="play"] { background: var(--t-green); color: #04130b; border-color: var(--t-green); }
.term-btn[data-act="play"]:hover { background: #6bffb7; border-color: #6bffb7; }
.term-btn[data-act="copy"] { margin-left: auto; }
@media (pointer: coarse) { .term-btn { min-height: 44px; } }
.term.is-static .term-btn:not([data-act="copy"]) { display: none; }
.term-cap { margin: 0; padding: var(--sp-1) var(--sp-2); background: var(--t-bar); border-top: 1px solid var(--t-border); color: var(--t-dim); font-size: 0.78rem; }
/* A light band that frames a terminal on marketing pages */
.term-band { background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } }