@layer components {
  /* ─── Company switcher ──────────────────── */

  /* The company the page is in, beside the logo: a pill with the company's
     mark, its name and a caption — "My company", or "Client" above the name
     with the chip tinted, inside a client. */
  .nav-switcher {
    flex-shrink: 1;
    min-inline-size: 0;
    position: relative;
  }

  .nav-switcher__chip {
    --switcher-mark-background: var(--color-surface-inverted);

    align-items: center;
    background: var(--color-canvas);
    border: 1.5px solid oklch(from var(--color-brand) l c h / 20%);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.625rem;
    max-inline-size: 100%;
    padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
    text-align: start;
  }

  .nav-switcher__chip:hover,
  .nav-switcher__chip[aria-expanded="true"] {
    border-color: var(--color-brand);
  }

  /* Inside a client the chip is the tab the client bar hangs off: it runs
     the bar's full height, drops its bottom edge, and reaches 1px past the
     bar over its border, so the two read as one surface. */
  .nav-switcher:has(.nav-switcher__chip--client) {
    align-self: stretch;
    display: flex;
    padding-block-start: 0.625rem;
  }

  .nav-switcher__chip--client {
    --switcher-mark-background: var(--color-brand-fill);

    background: var(--color-brand-tint);
    border-block-end: 0;
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-block-end: -1px;
    padding-block-end: calc(0.3125rem + 1px);
  }

  .nav-switcher__chip--client:hover,
  .nav-switcher__chip--client[aria-expanded="true"] {
    border-color: var(--color-border-strong);
  }

  .nav-switcher__mark {
    align-items: center;
    background: var(--switcher-mark-background);
    block-size: 2rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    inline-size: 2rem;
    justify-content: center;
  }

  .nav-switcher__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-inline-size: 0;
  }

  .nav-switcher__name {
    font-size: 0.875rem;
    font-weight: 700;
    max-inline-size: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-switcher__caption {
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  @media (width >= 1280px) {
    .nav-switcher__name {
      max-inline-size: 24ch;
    }
  }

  .nav-switcher__chip--client .nav-switcher__caption {
    color: var(--color-brand);
  }

  .nav-switcher__chev {
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  /* ─── The menu ──────────────────────────── */

  .nav-switcher__panel {
    inline-size: 24rem;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    max-block-size: 70dvh;
    max-inline-size: calc(100dvw - 2 * var(--gutter, 1rem));
    overflow-y: auto;
    padding: 0.5rem;
  }

  /* The search over the clients, ruled off from the user's own companies
     above it: the glyph and the field share one grid cell, so the glyph
     sits inside the field, centred on it. */
  .nav-switcher__filter {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    display: grid;
    margin: 0.375rem 0.25rem 0;
    padding-block-start: 0.75rem;
  }

  .nav-switcher__filter-icon,
  .nav-switcher__filter-input {
    grid-area: 1 / 1;
  }

  .nav-switcher__filter-icon {
    color: var(--color-ink-muted);
    margin-inline-start: 0.875rem;
    pointer-events: none;
    z-index: 1;
  }

  .nav-switcher__filter-input {
    padding-inline-start: 2.5rem;
  }

  .nav-switcher__heading {
    margin: 0.25rem 0.25rem 0;
    padding: 0.75rem 0.5rem 0.375rem;
  }

  .nav-switcher__entry {
    gap: 0.75rem;
  }

  .nav-switcher__entry--current {
    background: var(--color-brand-tint);
  }

  .nav-switcher__entry-mark {
    align-items: center;
    background: var(--color-surface-tint);
    block-size: 2rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    display: flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    inline-size: 2rem;
    justify-content: center;
  }

  .nav-switcher__entry--current .nav-switcher__entry-mark {
    background: var(--color-surface-inverted);
    color: var(--color-ink-inverted);
  }

  .nav-switcher__entry-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
  }

  .nav-switcher__entry-name {
    color: var(--color-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-switcher__entry--current .nav-switcher__entry-name {
    color: var(--color-brand);
  }

  .nav-switcher__entry-id {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
  }

  .nav-switcher__entry-check {
    color: var(--color-brand);
    flex-shrink: 0;
  }

  .nav-switcher__all {
    color: var(--color-brand);
    font-weight: 600;
  }

  /* With the switcher in it the bar holds five sections and the actions
     only once it is drawn a little tighter below 1280px; on a phone it is
     the logo, the switcher's mark and name, and the hamburger. */
  @media (1024px <= width < 1280px) {
    .nav-container:has(.nav-switcher) {
      gap: 0.75rem;

      .nav-link {
        padding-inline: 0.625rem;
      }
    }

    .nav-switcher__caption {
      display: none;
    }
  }

  @media (width < 480px) {
    .nav-switcher__caption,
    .nav-switcher__chev {
      display: none;
    }

    .nav-switcher__name {
      max-inline-size: 10ch;
    }
  }
}