/* ============================================================
   lilharper.dev — infrastructure page: live terminal widget
   ------------------------------------------------------------
   Page-specific (only infrastructure.html links this), same
   pattern as js/infra-data.js + js/infra-topology.js. Shows the
   real curl call against /api/status typing out, then the actual
   response — a live demo of the request path the page describes,
   using the same real endpoint js/api.js and the topology's VPS
   status dot already read.
   ============================================================ */

.iw-terminal {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 640px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.iw-term-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

.iw-term-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.iw-term-dot--r { background: #f87171; }
.iw-term-dot--y { background: var(--amber); }
.iw-term-dot--g { background: var(--green); }

.iw-term-path {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.iw-term-body {
  padding: 16px 18px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.7;
}

.iw-term-prompt { color: var(--purple-bright); margin-right: 8px; }
.iw-term-command { color: var(--text); }

.iw-term-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--cyan);
  animation: iw-blink 1s step-end infinite;
}

.iw-term-output { margin-top: 10px; }

.iw-term-row { display: flex; gap: 10px; }
.iw-term-key { color: var(--text-dim); min-width: 90px; }
.iw-term-value { color: var(--text); }
.iw-term-value--online { color: var(--green); }
.iw-term-value--offline { color: #f87171; }
.iw-term-value--err { color: #f87171; }

@keyframes iw-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}