@layer components {
  /* Tabs — switching between sibling screens.
   *
   * These are links, not buttons: each tab is a URL an operator can bookmark,
   * reload, and open in a second window, and the current one is marked with
   * aria-current="page" by the server. Nothing here needs JavaScript, which is
   * why there is no tabs controller.
   */
  .tabs {
    --tabs-text: var(--text-normal);
    --tabs-gap: var(--space-quarter);
    --tabs-padding-block: 0.5em;
    --tabs-padding-inline: 0.9em;
    --tabs-indicator: var(--color-accent);

    display: flex;
    gap: var(--tabs-gap);
    border-block-end: var(--border);
    font-size: var(--tabs-text);
    /* A row of tabs that outgrows a phone scrolls sideways rather than
       wrapping into a second row that shifts the page down. */
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs__tab {
    padding: var(--tabs-padding-block) var(--tabs-padding-inline);
    /* Pulled down over the container's rule so the indicator replaces it
       rather than stacking a second line underneath. */
    margin-block-end: calc(var(--border-width) * -1);
    border-block-end: var(--border-width-heavy) solid transparent;
    color: var(--color-ink-soft);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink);
      }
    }

    &[aria-current] {
      border-block-end-color: var(--tabs-indicator);
      color: var(--color-ink);
    }
  }

  .tabs--compact {
    --tabs-text: var(--text-small);
  }

  /* No rule underneath, and each tab wearing its own outline instead.
   *
   * For a row of them standing over a list as its filter, or switching a view
   * inside a panel — anywhere a second horizontal line would be one line too
   * many, or would draw a border between the filter and the thing it filters.
   *
   * The current one is filled rather than tinted, which the underlined variant
   * would never need: a tab in a rule has the rule to sit in, and one of these
   * has nothing but the others beside it. When this row is the only thing on the
   * screen saying what the list below it is narrowed to, a tint no stronger than
   * its neighbours makes the most important fact on the page the hardest to read.
   *
   * Sized off --control-padding-*, so a pill and the search field beside it in a
   * filter bar are the same height without either one naming a number. */
  .tabs--pills {
    --tabs-gap: var(--space-half);
    --tabs-padding-block: var(--control-padding-block);
    --tabs-padding-inline: var(--control-padding-inline);

    border-block-end: none;

    .tabs__tab {
      margin-block-end: 0;
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-canvas);
      color: var(--color-ink);

      @media (any-hover: hover) {
        &:hover {
          border-color: var(--color-ink-faint);
        }
      }

      &[aria-current] {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-accent-ink);
      }
    }
  }

  /* A strip standing over the screen it switches, rather than inside a filter
     row. The content under it needs air, or the first field reads as part of the
     current tab — which is what a name field directly under "Account" looked
     like. `--pills` deliberately does not get this: those sit in a filter bar
     whose own gap already spaces them. */
  .tabs--screen {
    margin-block-end: var(--space-and-half);
  }
}