@layer components {
  .setting {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-top: 1px solid var(--line);

    & > .icon:first-child { color: var(--ink-muted); }
  }

  .card__title + .setting, .card--list > .setting:first-child { border-top: 0; }
  .setting__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .setting__name { font-weight: 600; overflow-wrap: anywhere; }
  .setting__meta { font-size: var(--text-sm); color: var(--ink-muted); overflow-wrap: anywhere; }

  .setting-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--line);

    & > .input { flex: 1 1 12rem; }
  }

  .setting__name--warn { color: var(--warn); }
  .setting-alert { border-color: var(--warn); background: var(--warn-soft); font-size: var(--text-sm); }

  .recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-2);
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
  }

  .totp { justify-items: center; text-align: center; }
  .totp > .form { width: 100%; text-align: start; }
  .totp__qr { width: 200px; padding: var(--space-3); border-radius: var(--radius-control); background: white; }
  .totp__secret { font-size: var(--text-md); letter-spacing: 0.05em; overflow-wrap: anywhere; }
}