/* ==========================================================================
   Interactive terminal
   ========================================================================== */

.term{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: border-color var(--mid) ease, box-shadow var(--mid) ease;
}

.term:focus-within{
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}

.term-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.term-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.term-dot:nth-child(1){ background: #E9695C; }
.term-dot:nth-child(2){ background: #E0B03F; }
.term-dot:nth-child(3){ background: #62B97C; }

.term-name{
  margin-left: auto;
  font: 500 12px/1 var(--mono);
  color: var(--text-3);
}

/* --- Screen ------------------------------------------------------------- */

.term-screen{
  height: 300px;
  overflow-y: auto;
  padding: var(--s4) var(--s5);
  font: 400 13.5px/1.75 var(--mono);
  color: var(--text-2);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.term-screen::-webkit-scrollbar{ width: 8px; }
.term-screen::-webkit-scrollbar-thumb{
  background: var(--border-strong);
  border-radius: 8px;
}

.term-line{ white-space: pre-wrap; word-break: break-word; }

.term-line.cmd{ color: var(--text); }
.term-line.ok{ color: var(--accent-text); }
.term-line.warn{ color: var(--amber); }
.term-line.dim{ color: var(--text-3); }
.term-line.head{
  color: var(--text);
  font-weight: 700;
  margin-top: var(--s3);
}

.term-line a{
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.term-prompt{ color: var(--accent-text); }

/* --- Input row ---------------------------------------------------------- */

.term-form{
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s4);
  font: 400 13.5px/1.6 var(--mono);
  border-top: 1px solid var(--border);
}

.term-input{
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: var(--text);
  caret-color: var(--accent);
}
.term-input::placeholder{ color: var(--text-3); }
.term-input:focus{ outline: none; }

.term-hint{
  padding: 0 var(--s5) var(--s4);
  font: 400 11.5px/1.5 var(--mono);
  color: var(--text-3);
}

.term-hint kbd{
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  font: inherit;
  color: var(--text-2);
}

/* Static fallback shown when JS never runs */
.term-static{
  padding: var(--s4) var(--s5) var(--s5);
  font: 400 13.5px/1.75 var(--mono);
  color: var(--text-2);
  white-space: pre-wrap;
}
.js .term-static{ display: none; }
.term-live{ display: none; }
.js .term-live{ display: block; }

@media (max-width: 620px){
  .term-screen{ height: 250px; padding-inline: var(--s4); }
  .term-form,
  .term-hint{ padding-inline: var(--s4); }
}