/*
  Barra de acessibilidade compartilhada pelos dois shells (portal e painel).
  Estrutura em `components`; as preferências em si vivem em `@layer a11y` (ADR-016).
*/
@layer components {
  .a11y-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding-inline: var(--space-container);
    padding-block: 0.375rem;
    background-color: var(--ink);
    color: var(--surface);
    font-size: 0.75rem;
  }

  .a11y-bar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .a11y-bar__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 1.5rem;
    padding: 0.25rem 0.5rem;
    color: inherit;
    background: none;
    border: 0.0625rem solid transparent;
    border-radius: var(--tenant-radius);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  .a11y-bar__button:hover {
    border-color: var(--tenant-accent);
    color: var(--tenant-accent);
  }

  .a11y-bar__button[aria-pressed='true'] {
    background-color: var(--tenant-accent);
    color: var(--ink);
  }

  .a11y-bar__icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }
}