/* ============================================================
   vox-settings.css — Vox Ordo design applied to the settings panel.
   Settings already inherits Phase-1 tokens+fonts; this refines the
   settings-specific components to the cockpit grammar. Visual-only.
   ============================================================ */

/* left nav — mono, tracked section titles + clean items */
.nav-section-title { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--fg-faint) !important; font-weight: 600 !important; }
.nav-item { border-radius: var(--radius-sm) !important; font-size: 13px !important; color: var(--fg-muted) !important; }
.nav-item:hover { background: var(--bg-elevate) !important; color: var(--fg) !important; }
.nav-item.active { background: var(--accent-soft) !important; color: var(--fg) !important; }

/* cards — hairline, surface, soft radius */
.card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; }

/* rows — quiet hairline dividers */
.toggle-row, .row, .hook-row, .copy-row { border-bottom: 1px solid var(--border-soft) !important; }
.toggle-row:last-child, .row:last-child, .hook-row:last-child { border-bottom: 0 !important; }

/* code / kbd / copy values in mono */
.copy-row code, .copy-row input, kbd { font-family: var(--font-mono) !important; }

/* theme swatch cards — active edge in cyan (the cockpit active signal) */
.theme-card { border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; }
.theme-card:hover { border-color: var(--border-hover) !important; }
.theme-card.active, .theme-card.selected { border-color: var(--vo-active) !important; }