/* Account, onboarding, settings and legal pages. Uses the design tokens and logical properties only. */
@layer components {
  /* Long-form text (privacy policy, terms). */
  .legal h2 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
  .legal p, .legal li { max-inline-size: 75ch; color: var(--text); }
  /* Legal documents use the screen: wide container, sticky table of contents beside the text from tablet width up. */
  .container--legal { inline-size: min(100%, 72rem); }
  .legal__layout { display: grid; gap: var(--s-6); }
  .legal__toc { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--fs-sm); }
  .legal__toc-title { font-weight: 750; margin-block-end: var(--s-2); }
  .legal__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); counter-reset: toc; }
  .legal__toc li { counter-increment: toc; }
  .legal__toc li::before { content: counter(toc) ". "; color: var(--text-subtle); }
  .legal__toc a { color: var(--text-muted); text-decoration: none; padding-block: var(--s-1); display: inline-block; }
  .legal__toc a:hover, .legal__toc a:focus-visible { color: var(--brand-text); text-decoration: underline; }
  .legal section { scroll-margin-block-start: var(--s-20, 5rem); }
  @media (min-width: 56em) {
    .legal__layout { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-10); align-items: start; }
    .legal__toc { position: sticky; inset-block-start: var(--s-20, 5rem); max-block-size: calc(100dvh - 7rem); overflow: auto; }
  }
  .legal ul { list-style: disc; padding-inline-start: var(--s-6); display: grid; gap: var(--s-2); }
  .legal a { overflow-wrap: anywhere; }

  /* Settings: inline row of a label and a status badge. */
  .card .badge { flex: none; }
  fieldset.field { min-inline-size: 0; }

  /* Disabled switches (features that are coming soon) stay readable. */
  .switch:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }

  /* Placeholder slot reserved for the future "Import my history" step. */
  [data-slot="history-import"] { font-size: var(--fs-sm); }
}