/* 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);
}

/* Connection health badge ("Last problem 2 days ago: 403 Forbidden",
   "Working"). The sentence is too long for the pill's default nowrap, so it
   wraps inside half the row instead of pushing past the card edge. */
.account-row-health {
  display: inline-block;
  white-space: normal;
  max-width: 60%;
  text-align: right;
  line-height: 1.35;
  border-radius: var(--radius-md);
}

/* --- Platform details table (Settings > Advanced) --- */

/* The card is ~480px wide and the automation badges are whole sentences
   ("Posts automatically, but needs a quick check"). With the default auto
   layout that one column claimed the width it wanted, the rows grew tall
   and the Status column bled outside the card. Fixed layout gives every
   column a share of the card and the badges wrap inside it. */
.platform-details-table {
  table-layout: fixed;
  width: 100%;
}

.platform-details-table th,
.platform-details-table td {
  padding: var(--space-2);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Automation is the long one, so it gets the widest share; Platform and
   Status are short enough to live in a fifth of the card each. */
.platform-details-table th:nth-child(1) { width: 20%; }
.platform-details-table th:nth-child(2) { width: 31%; }
.platform-details-table th:nth-child(3) { width: 27%; }
.platform-details-table th:nth-child(4) { width: 22%; }

.platform-details-table .badge {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  padding: 0.25em 0.6em;
  line-height: 1.35;
  border-radius: var(--radius-md);
}

/* "This Mac and fizzavo.com" (pin-calendar, U3). */
.serverlink-ok {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--success-ink);
}

/* The sidebar's red count on "Pin library" and the line under it. */
.navbadge {
  background: var(--danger);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.navtip {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--danger-ink);
  padding: 2px 0.7em 0;
}

.serverlink-msg {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  color: var(--danger-ink);
}

.serverlink-caption {
  margin: var(--space-4) 0 var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}