/* ══════════════════════════════════════════════════════════
   CodingInABox — Account settings page styles
   Layers on top of tokens.css + lms.css (do not redeclare tokens).
   ══════════════════════════════════════════════════════════ */

.acct-wrap { max-width: 880px; margin: 0 auto; }

/* Section header */
.acct-section-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 1.05rem; font-weight: 700; color: var(--text-1);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4);
}
.acct-section-title .material-symbols-outlined { color: var(--color-primary); font-size: 22px; }

/* Form field */
.acct-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.acct-field > label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--color-primary); font-family: var(--font-mono);
}
.acct-field input, .acct-field select {
  width: 100%; padding: 10px 12px; font-size: 14px;
}
.acct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .acct-grid-2 { grid-template-columns: 1fr; } }

.acct-help { font-size: 12px; color: var(--text-3); margin-top: -2px; }

/* Inline status line under a form */
.acct-status { font-size: 13px; min-height: 18px; margin-top: var(--space-2); font-family: var(--font-mono); }
.acct-status.ok { color: var(--color-success); }
.acct-status.err { color: var(--color-error); }
.acct-status.muted { color: var(--text-3); }

/* Plan summary */
.acct-plan-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.acct-plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-round);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-family: var(--font-mono);
  background: var(--color-primary-soft); color: var(--color-primary);
  border: 1px solid var(--border-strong);
}
.acct-plan-badge.inactive { background: rgba(148,163,184,0.1); color: var(--text-3); border-color: rgba(148,163,184,0.3); }

.acct-enroll-list { display: grid; gap: 10px; margin-top: var(--space-4); }
.acct-enroll-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-1);
  background: var(--color-surface-3); border: 1px solid var(--border);
}
.acct-enroll-item .material-symbols-outlined { color: var(--color-primary); }

.acct-billing-note { font-size: 12px; color: var(--text-3); margin-top: var(--space-3); font-family: var(--font-mono); }