/* ============================================================
   Settings — Honey design system (Phase 2).
   Token-driven; shared components live in components.css.

   Covers the settings hub (accounts/index), the email settings
   page, and the counterparties list.
   ============================================================ */

/* ---------- Hub list rows ---------- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: background-color 0.15s ease;
}
a.settings-item:hover,
.settings-item--hover:hover {
  background: var(--surface-2);
}

.settings-item__body {
  flex: 1;
  min-width: 0;
}

.settings-item__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--txt);
}

.settings-item__desc {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--txt-subtle);
}

/* ---------- Status pills (subscription state) ---------- */
.settings-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.settings-pill--info {
  background: var(--info-soft);
  color: var(--info);
}
.settings-pill--pos {
  background: var(--pos-soft);
  color: var(--pos);
}
.settings-pill--neg {
  background: var(--neg-soft);
  color: var(--neg);
}
.settings-pill--neutral {
  background: var(--surface-2);
  color: var(--txt-subtle);
}

/* ---------- Verification badges (emails page) ---------- */
.settings-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.settings-badge--verified {
  background: var(--pos-soft);
  color: var(--pos);
}
.settings-badge--pending {
  background: var(--warn-soft);
  color: var(--warn);
}

/* ---------- Divided list (counterparties / additional emails) ---------- */
.settings-rows > * + * {
  border-top: 1px solid var(--border);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0;
}

/* ---------- Form validation message ---------- */
.settings-error {
  margin-top: 0.5rem;
  color: var(--neg);
  font-size: 0.875rem;
}

/* ---------- Empty / muted text ---------- */
.settings-empty {
  color: var(--txt-subtle);
}

/* ---------- Page scaffold ---------- */
.settings-page {
  margin-inline: auto;
  width: 100%;
  max-width: 48rem;
}
.settings-title {
  font-size: var(--txt-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
.settings-title--spaced { margin-bottom: var(--space-4); }
.settings-title--tight { margin-bottom: var(--space-1); }

/* Sections on the emails page (each was a mb-6 block with a bold heading). */
.settings-section { margin-bottom: var(--space-6); }
.settings-section-title {
  margin-bottom: var(--space-2);
  font-size: var(--txt-lg);
  font-weight: var(--weight-bold);
}

/* Counterparties intro line under the title. */
.settings-subtitle {
  margin-bottom: var(--space-6);
  font-size: var(--txt-sm);
  color: var(--txt-subtle);
}
.counterparty__name { font-weight: var(--weight-bold); }
.counterparty__email {
  font-family: var(--font-mono);
  font-size: var(--txt-sm);
  color: var(--txt-subtle);
}

/* Centered header block on the settings hub (accounts/index). */
.settings-hub-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.settings-hub-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--txt-sm);
  color: var(--txt-subtle);
}

/* Trial countdown pill row above the hub header. */
.settings-trial {
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: center;
}
.settings-trial-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--txt-xs);
  font-weight: var(--weight-bold);
}

/* Rounded icon square inside a hub row (colour from .icon-tile). */
.settings-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-xl);
}

/* Pill buttons (colour from .btn-accent / .btn-danger). */
.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--txt-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.settings-btn:focus { outline: none; }
.settings-btn--sm { padding: var(--space-1-5) var(--space-3); }

/* Add-email form row + its input (shape only; colour from .expense-field). */
.settings-form-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.settings-input {
  border-radius: var(--radius-2xl);
  padding: var(--space-2) var(--space-3);
  font-size: var(--txt-sm);
}
/* Keep room for .expense-select's chevron: the shorthand above would
   otherwise reset the padding-right it relies on, overlapping the text. */
.expense-select.settings-input { padding-right: 2.25rem; }

/* Base-currency select + save button row (spaced below the description). */
.currency-control {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}