/* SettingsPage layout — @argentum/ui tokens only; ag-* component classes (ag-card,
   ag-field, ag-input, ag-textarea, ag-btn, ag-select, ag-switch, ag-alert) carry the
   actual visual styling from argentum-ui.css. This file only arranges them. */

.settings-page {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-4);
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block-end: var(--ag-space-8);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: var(--ag-space-3);
  flex-wrap: wrap;
}

.settings-actions .ag-input {
  flex: 1;
  min-inline-size: 10rem;
}

.settings-birthday-fields {
  display: flex;
  gap: var(--ag-space-3);
}

.settings-birthday-fields > * {
  flex: 1;
}

.settings-privacy-rows {
  display: flex;
  flex-direction: column;
}

.settings-privacy-row {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-2);
  padding-block: var(--ag-space-3);
  border-block-end: var(--ag-border-width) solid var(--ag-border-subtle);
}

.settings-privacy-row:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.settings-privacy-row__main {
  display: flex;
  align-items: center;
  gap: var(--ag-space-3);
}

.settings-privacy-row__label {
  flex: 1;
  min-inline-size: 0;
  color: var(--ag-text);
  font-size: var(--ag-text-sm);
}

.settings-privacy-row__main .ag-select {
  flex: none;
  max-inline-size: 14rem;
}

.settings-subheading {
  margin: 0;
  color: var(--ag-text-subtle);
  font-size: var(--ag-text-xs);
  font-weight: var(--ag-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ag-tracking-wide);
}

.settings-emoji-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-2);
}

/* Two classes combined beats the plain `.ag-card` base rule regardless of
   stylesheet order, so the danger tint always wins. */
.ag-card.settings-card--danger {
  border-color: var(--ag-danger-border);
}