/* Shared CLI/terminal mode used by /public, /monitor, /public-incident.
 * Pages opt-in by linking this stylesheet and including <script src="shared/terminal.js"></script>. */

body.term-mode { background: #07090d !important; color-scheme: dark; }
body.term-mode > *:not(.term-wrap):not(script) { display: none !important; }
body.term-mode .term-wrap { display: block; }

.term-wrap {
  display: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 14px 60px;
}

.term-bar {
  background: linear-gradient(180deg, #2a2f3a 0%, #1d2230 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.term-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.term-bar .dot.r { background: #ff5f57; }
.term-bar .dot.y { background: #febc2e; }
.term-bar .dot.g { background: #28c840; }
.term-bar .title {
  flex: 1; text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; color: #8e98a8; user-select: none;
}
.term-bar button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #c5d1de;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  padding: 4px 9px; border-radius: 4px;
  cursor: pointer;
}
.term-bar button:hover { background: rgba(255,255,255,0.06); }

.term-body {
  margin: 0;
  background: #0a0e1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.7;
  color: #c5d1de;
  min-height: 60vh;
}

#termOut {
  margin: 0; padding: 22px 24px 8px;
  white-space: pre;
  overflow-x: auto;
}

.term-repl {
  display: flex; align-items: center;
  padding: 6px 24px 22px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.term-repl .pmt { color: #c084fc; font-weight: 600; margin-right: 8px; }
.term-repl input {
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: #e2e8f0;
  font-family: inherit; font-size: 13px;
  caret-color: #c5d1de;
}
.term-repl input::placeholder { color: #4a5468; }

#termOut .t-ok    { color: #4ade80; }
#termOut .t-warn  { color: #fbbf24; }
#termOut .t-err   { color: #ff6770; }
#termOut .t-dim   { color: #5a6779; }
#termOut .t-cmd   { color: #e2e8f0; font-weight: 500; }
#termOut .t-pmt   { color: #c084fc; font-weight: 600; }
#termOut .t-cy    { color: #67e8f9; }
#termOut .t-mt    { color: #fbbf24; }
#termOut .t-url   { color: #94a3b8; }
#termOut .t-link  {
  color: inherit; text-decoration: none;
  border-bottom: 1px dashed rgba(103, 232, 249, 0.25);
  cursor: pointer;
}
#termOut .t-link:hover { background: rgba(103, 232, 249, 0.08); }
#termOut .t-bar { color: #4ade80; letter-spacing: -1px; }
#termOut .t-bar.warn { color: #fbbf24; }
#termOut .t-bar.err  { color: #ff6770; }

.term-toggle {
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  color: var(--fg-1, #c5d1de);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 4px;
}
.term-toggle:hover { background: var(--bg-1, rgba(255,255,255,0.04)); }

@media (max-width: 720px) {
  .term-wrap { padding: 12px 10px 40px; }
  .term-body { font-size: 11.5px; }
  #termOut { padding: 14px 16px 6px; line-height: 1.65; }
  .term-repl { padding: 4px 16px 14px; }
  .term-repl input { font-size: 11.5px; }
  .term-bar .title { display: none; }
}