/* ============================================================
   terminal.css — the level-1 terminal interface
   ============================================================ */

#terminal-screen { background: var(--term-bg); }

#terminal {
  position: absolute;
  inset: 0;
  padding: 22px 26px 70px;
  overflow-y: auto;
  font-size: clamp(12px, 1.45vw, 15px);
  line-height: 1.5;
  color: var(--txt);
  text-shadow: 0 0 2px rgba(56,255,156,0.25);
  outline: none;
  scroll-behavior: smooth;
}

#term-output { white-space: pre-wrap; word-break: break-word; }

/* output line semantics */
.t-line { display: block; }
.t-green  { color: var(--green); }
.t-amber  { color: var(--amber); }
.t-cyan   { color: var(--cyan); }
.t-magenta{ color: var(--magenta); }
.t-red    { color: var(--red); }
.t-muted  { color: var(--muted); }
.t-white  { color: #eafff5; }
.t-bold   { font-weight: 700; }
.t-glow   { text-shadow: var(--glow); }
.t-dim    { opacity: 0.7; }

/* a typed command echo */
.t-echo .t-prompt { color: var(--green); }
.t-echo .t-cmd { color: #eafff5; }

/* file listing colors (ls) */
.ls-dir  { color: var(--cyan); font-weight: 600; }
.ls-file { color: var(--txt); }
.ls-md   { color: var(--amber); }
.ls-exe  { color: var(--magenta); }
.ls-lock { color: var(--red); }
.ls-grid { display: flex; flex-wrap: wrap; gap: 4px 26px; }

/* tables (ls -l, ps, etc.) */
.t-table { display: grid; gap: 0 18px; font-variant-numeric: tabular-nums; }

/* input line — block flow so each submitted command is echoed as its own
   output line directly above the next prompt, one under the other, with the
   SAME prompt string and the SAME left edge (column 0). The prompt span has
   no left padding/margin, so typed text and the echoed prompt share one x. */
.term-inputline {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
.term-prompt { color: var(--green); white-space: pre; text-shadow: var(--glow); }
.term-input {
  display: inline;
  color: #eafff5;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: transparent;
}
.term-cursor {
  display: inline;
  color: var(--green);
  animation: blink 1.05s steps(1) infinite;
  text-shadow: var(--glow);
  margin-left: 0;
}
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* While typeLines / an animation runs we lock input. Keep the row laid out
   (reserve its height + the prompt's column-0 alignment) so the screen does
   not shift vertically when the row is hidden and shown again — we only
   blank the visible glyphs, never display:none the box. */
.term-inputline.locked .term-prompt,
.term-inputline.locked .term-input,
.term-inputline.locked .term-cursor { visibility: hidden; }

/* progress bars used by commands */
.t-bar {
  display: inline-block;
  color: var(--green);
}

/* links in terminal output */
.t-link { color: var(--cyan); text-decoration: underline; cursor: pointer; }
.t-link:hover { color: var(--green); text-shadow: var(--glow); }

/* the editor (nano-like) overlay */
#editor-overlay {
  position: absolute;
  inset: 0;
  background: var(--term-bg);
  display: none;
  flex-direction: column;
  z-index: 50;
}
#editor-overlay.open { display: flex; }
#editor-top {
  background: rgba(56,255,156,0.12);
  color: var(--green);
  padding: 4px 12px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
#editor-area {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.4vw, 15px);
  line-height: 1.55;
  padding: 14px 18px;
  caret-color: var(--green);
}
#editor-bottom {
  background: rgba(0,0,0,0.4);
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
  gap: 22px;
}
#editor-bottom b { color: var(--green); }