/* Settings > Control Surface — layout only (Phase 0b C3.2).
   Components (.card/.btn/.pill/.badge) + tokens come from omni-ui.css / shell.css.
   This file adds ONLY layout for the panel; no colors are hardcoded. */

.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-5); align-items: start; }
.cs-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }

/* The card-head adds its own padding/border; the form + list sit below it. */
.cs-form { display: flex; flex-direction: column; gap: var(--space-3); }
.cs-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cs-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.cs-input {
  width: 100%; padding: 8px var(--space-3); font: inherit; color: var(--text);
  background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cs-input:focus-visible { border-color: var(--border-accent); }
.cs-input[readonly] { color: var(--text-dim); }

.cs-scopes { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.cs-scopes legend { padding: 0 var(--space-1); }
.cs-check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: 12px; }
.cs-check input { margin-top: 2px; accent-color: var(--accent); }
.cs-check span span { display: block; }
.cs-hint { font-size: 11px; }

.cs-actions { display: flex; gap: var(--space-2); }
.cs-err { margin: 0; font-size: 12px; }

/* Reveal-once block (token / secret). */
.cs-reveal { border: 1px solid var(--border-accent); border-radius: var(--r); padding: var(--space-3); background: var(--accent-wash); display: flex; flex-direction: column; gap: var(--space-2); }
.cs-note { margin: 0; font-size: 12px; color: var(--text-dim); }
.cs-copyrow { display: flex; gap: var(--space-2); }
.cs-copyrow .cs-input { flex: 1; }

/* Lists of tokens / webhooks. */
.cs-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-inset); }
.cs-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cs-row-title { font-weight: 600; word-break: break-all; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cs-row-meta { font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-row-actions { flex: none; }
.cs-empty, .cs-loading { padding: var(--space-4); text-align: center; font-size: 12px; }