/* Settings view (mockup 07) — three-column layout: accounts | brand voice +
   this week | setup guide + upkeep + digest. Extends views.css's existing
   .settings-grid/.account-row/etc rules (frozen legacy, still used by the
   Advanced section below); this file only adds the mockup-specific
   three-column arrangement and polish. */

.settings-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.settings-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.appearance-toggle-row {
  display: flex;
  align-items: center;
}

.appearance-toggle-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.danger-zone {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.danger-zone p {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .settings-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .settings-columns {
    grid-template-columns: 1fr;
  }
}

/* --- AI providers card --- */

/* The "which AI writes for you" chooser sits above the per-provider key rows
   and is separated from them, because picking a provider and configuring one
   are different questions (see aiProviderChooser's comment). */
.ai-provider-chooser {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.settings-subhead {
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

.ai-provider-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ai-provider-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.ai-key-row {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.ai-key-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ai-key-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ai-key-form {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.ai-key-input {
  flex: 1;
}

.ai-key-toggle {
  margin-top: var(--space-1);
}

/* Connection health row's error badge (Settings > Connection health) —
   reuses the same coral "required/danger" tone as .badge-required. */
.badge-error {
  background: color-mix(in srgb, var(--coral) 22%, transparent);
  color: var(--coral-ink);
}