/* ══════════════════════════════════════════════════════════════
   Securetheory design-system components — extracted static CSS
   (Button · Badge · Terminal · Card)
   ══════════════════════════════════════════════════════════════ */

/* ── Button ─────────────────────────────────────────────────── */
.st-btn{
  --_bg: var(--accent);
  --_fg: var(--on-accent);
  --_bd: var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3);
  font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-sm);
  letter-spacing:var(--ls-caps); text-transform:uppercase; text-decoration:none;
  line-height:1; white-space:nowrap; cursor:pointer; user-select:none;
  padding:11px 18px; border:var(--bw) solid var(--_bd); border-radius:0;
  background:var(--_bg); color:var(--_fg);
  box-shadow:var(--shadow-pixel-sm);
  transition:transform var(--dur-fast) var(--ease-snap),
             box-shadow var(--dur-fast) var(--ease-snap),
             background var(--dur-fast);
}
.st-btn:hover{ transform:translate(-1px,-1px); box-shadow:var(--shadow-pixel); }
.st-btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 0 var(--st-black); }
.st-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.st-btn[disabled]{ cursor:not-allowed; opacity:.45; transform:none; box-shadow:none; filter:grayscale(.4); }

.st-btn--primary{ --_bg:var(--accent); --_fg:var(--on-accent); --_bd:var(--accent); }
.st-btn--primary:hover{ --_bg:var(--accent-hover); box-shadow:var(--shadow-pixel), var(--glow-green); }

.st-btn--secondary{ --_bg:transparent; --_fg:var(--accent); --_bd:var(--accent); }
.st-btn--secondary:hover{ --_bg:var(--st-green-900); }

.st-btn--ghost{ --_bg:transparent; --_fg:var(--text-body); --_bd:var(--border-strong); box-shadow:none; }
.st-btn--ghost:hover{ --_fg:var(--text-strong); --_bd:var(--text-muted); box-shadow:none; transform:none; }

.st-btn--danger{ --_bg:transparent; --_fg:var(--signal-danger); --_bd:var(--signal-danger); }
.st-btn--danger:hover{ --_bg:var(--st-red-700); --_fg:var(--st-fg-bright); }

.st-btn--sm{ padding:7px 12px; font-size:var(--fs-xs); }
.st-btn--lg{ padding:15px 26px; font-size:var(--fs-body); }
.st-btn--block{ display:flex; width:100%; }
.st-btn__icon{ font-family:var(--font-mono); font-size:1.05em; line-height:1; }

/* ── Badge ──────────────────────────────────────────────────── */
.st-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-xs);
  letter-spacing:var(--ls-caps); text-transform:uppercase; line-height:1;
  padding:4px 8px; border:var(--bw-hair) solid currentColor; border-radius:0;
  color:var(--text-muted);
}
.st-badge__dot{ width:7px; height:7px; background:currentColor; display:inline-block; }
.st-badge--solid{ color:var(--on-accent); background:currentColor; border-color:transparent; }
.st-badge--solid .st-badge__label{ color:var(--st-black); }
.st-badge--ok{ color:var(--signal-ok); }
.st-badge--info{ color:var(--signal-info); }
.st-badge--warn{ color:var(--signal-warn); }
.st-badge--danger{ color:var(--signal-danger); }
.st-badge--neutral{ color:var(--text-muted); }
.st-badge--blink .st-badge__dot{ animation:st-badge-blink var(--blink) var(--ease-step) infinite; }
@keyframes st-badge-blink{ 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .st-badge--blink .st-badge__dot{ animation:none; } }

/* ── Terminal ───────────────────────────────────────────────── */
.st-term{
  font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.65;
  background:var(--surface-inset); color:var(--text-body);
  border:var(--bw) solid var(--border-strong); box-shadow:var(--shadow-pixel);
  position:relative; overflow:hidden;
}
.st-term::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--tex-scanline); opacity:.5; mix-blend-mode:multiply;
}
.st-term__bar{
  display:flex; align-items:center; gap:8px; position:relative; z-index:1;
  padding:7px 12px; border-bottom:var(--bw-hair) solid var(--border-hairline); background:var(--surface-raised);
  font-size:var(--fs-xs); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted);
}
.st-term__dots{ display:inline-flex; gap:5px; }
.st-term__dots i{ width:9px; height:9px; display:inline-block; }
.st-term__dots i:nth-child(1){ background:var(--signal-danger); }
.st-term__dots i:nth-child(2){ background:var(--signal-warn); }
.st-term__dots i:nth-child(3){ background:var(--signal-ok); }
.st-term__body{ position:relative; z-index:1; padding:14px 16px; white-space:pre-wrap; word-break:break-word; }
.st-term__line{ display:block; }
.st-term__line .pmt{ color:var(--accent); user-select:none; }
.st-term__line--cmd{ color:var(--text-strong); }
.st-term__line--out{ color:var(--text-body); }
.st-term__line--comment{ color:var(--text-faint); }
.st-term__line--ok{ color:var(--signal-ok); }
.st-term__line--warn{ color:var(--signal-warn); }
.st-term__line--err{ color:var(--signal-danger); }
.st-term__cursor{ display:inline-block; width:.6em; height:1.05em; vertical-align:-.18em; background:var(--accent); margin-left:2px; animation:st-term-blink var(--blink) var(--ease-step) infinite; }
@keyframes st-term-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .st-term__cursor{ animation:none; } }

/* ── Card ───────────────────────────────────────────────────── */
.st-card{
  background:var(--surface-card);
  border:var(--bw) solid var(--border-strong);
  border-radius:0;
  box-shadow:var(--shadow-pixel);
  color:var(--text-body);
  display:flex; flex-direction:column;
}
.st-card--flat{ box-shadow:none; }
.st-card--accent{ border-color:var(--accent); box-shadow:var(--shadow-pixel-accent); }
.st-card--inset{ background:var(--surface-inset); }
.st-card__bar{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:8px 12px; border-bottom:var(--bw-hair) solid var(--border-hairline);
  background:var(--surface-raised);
  font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-xs);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted);
}
.st-card__dots{ display:inline-flex; gap:5px; }
.st-card__dots i{ width:9px; height:9px; display:inline-block; border:var(--bw-hair) solid var(--border-strong); }
.st-card__dots i:nth-child(1){ background:var(--signal-danger); border-color:var(--signal-danger); }
.st-card__dots i:nth-child(2){ background:var(--signal-warn); border-color:var(--signal-warn); }
.st-card__dots i:nth-child(3){ background:var(--signal-ok); border-color:var(--signal-ok); }
.st-card__title{ flex:1; }
.st-card__body{ padding:var(--sp-6); }
.st-card__body--tight{ padding:var(--sp-4); }