@layer components {
  /* ─── Client bar ─────────────────────────── */

  /* An accountant inside a client: the client's sections as tabs under the
     bar. Full-bleed, its content on the content column. */
  /* A grid item of the body, which would otherwise stretch the page to the
     links' width on a phone: zero lets the links scroll inside it instead. */
  .client-bar {
    background: var(--color-brand-tint);
    border-block-end: 1px solid var(--color-border-subtle);
    min-inline-size: 0;
  }

  .client-bar__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    inline-size: 100%;
    margin: 0 auto;
    max-inline-size: var(--content-max-inline-size);
    padding: 0 var(--gutter);
  }

  .client-bar__links {
    display: flex;
    gap: 0.25rem;
    min-inline-size: 0;
    overflow-x: auto;
  }

  .client-bar__link {
    align-items: center;
    border-block-end: 2px solid transparent;
    color: var(--color-ink-secondary);
    display: flex;
    font-size: 0.9375rem;
    font-weight: 500;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .client-bar__link:hover {
    color: var(--color-brand);
  }

  .client-bar__link--active {
    border-block-end-color: var(--color-brand);
    color: var(--color-brand);
    font-weight: 600;
  }

  .client-bar__icon {
    block-size: 18px;
    flex-shrink: 0;
    inline-size: 18px;
  }

  /* What the accountant may do here, as a pill at the far end. */
  .client-bar__access {
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.375rem;
    margin-inline-start: auto;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
  }

  .client-bar__access--write {
    background: var(--color-brand-tint);
    border-color: oklch(from var(--color-brand) l c h / 20%);
    color: var(--color-brand);
  }

  .client-bar__access--read {
    background: var(--color-surface-tint);
    color: var(--color-ink-secondary);
  }

  .client-bar__access-icon {
    block-size: 14px;
    flex-shrink: 0;
    inline-size: 14px;
  }

  /* The month's documents to download, at the far end. */
  .client-bar__export {
    position: relative;
  }

  .client-bar__export-panel {
    inline-size: 16rem;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    padding: 0.75rem;
  }

  .client-bar__export-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}