@layer components {
  /* Segmented control — switch views without leaving the page. */
  .tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--control-bg);
    border-radius: var(--radius);
  }
  .tab {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"] {
    color: var(--ink);
    font-weight: 500;
    background: var(--surface-raised);
    box-shadow: 0 1px 2px rgba(20, 18, 12, 0.08);
  }

  /* A page-level switcher (the statistics pages) breathes before the content. */
  .tabs--page { margin-bottom: var(--space-5); }
}