/* Unified controls (rework §5.2). One button vocabulary, one status line, one
   field row — retiring the ad-hoc per-panel palette (btn-lock / btn-window /
   btn-fault-set / lock-status / fault-status / fault-inject-row / …). Loaded
   after style.css so it wins; the retired rules are removed from style.css. */

/* ---- Buttons: semantic, at most one --primary per card -------------- */
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn--secondary { background: var(--bg-panel); color: var(--brand); border: 1px solid var(--brand); }
.btn--secondary:hover:not(:disabled) { background: var(--brand-bg-soft); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn--warn { background: var(--warning); color: #fff; }
.btn--warn:hover:not(:disabled) { background: var(--warning-hover); }
.btn--ghost { background: var(--bg-control); color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-control-hover); }
.btn--sm { padding: 3px 10px; font-size: var(--font-2xs); }
/* copy-to-clipboard success feedback (was .btn-copy.copied) */
.btn.copied { background: var(--success); color: #fff; }
/* push the API Log "Clear" button to the right of its heading (was .btn-clear-log) */
.log-section h2 .btn { margin-left: auto; }

/* ---- Status line: one component, colour + text (never colour alone) - */
.status-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  font-size: var(--font-sm);
  color: var(--text);
}
.status-line::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6b7280; /* idle */
}
.status-line[data-state="ok"]::before { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-line[data-state="warn"]::before { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.status-line[data-state="error"]::before { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.status-line[data-state="busy"]::before { background: var(--warning); animation: pulse 1.5s infinite; }
.status-line a { color: var(--brand); }

/* ---- Field row / label ---------------------------------------------- */
.field-row { display: flex; gap: var(--space-2); align-items: center; }
.field-row > select,
.field-row > input,
.field-row > textarea { flex: 1; min-width: 0; }
.field-row > .btn { flex: 0 0 auto; }
.field-col { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: var(--font-xs); font-weight: 600; color: var(--text-soft); }