/*
 * A barra de acessibilidade da casa (`a11y.js`), no desenho da MegaMidia.
 *
 * A estrutura, as medidas e os recursos são os do site do Leandro, pedido
 * dele em 23/09/2026. O que muda é a identidade, "de forma muito discreta que
 * converse com tudo que estamos fazendo": as cores vêm dos tokens da própria
 * tela, e não de uma paleta da barra. Os nomes de token existem em duas
 * famílias na casa (`--tinta`/`--linha`/`--apoio` no React, `tema.css`, e
 * `--tinta`/`--fio`/`--tinta2` no app da casa, `casa/index.html`), então cada
 * cor pergunta pelas duas, com um valor de reserva no fim. Claro e escuro vêm
 * de graça: quem troca é o token.
 *
 * O laranja da marca aparece em um lugar só, que é o que está ligado: a chave
 * acesa e o traço embaixo do atalho ativo. O resto é tinta e fio.
 */

:root {
  --a11y-h: calc(32px + env(safe-area-inset-top, 0px));
}

.a11y,
.a11y-pular,
.a11y-veu {
  --a11y-ink: var(--tinta, #16181d);
  --a11y-bg: var(--tela, var(--superficie, #ffffff));
  --a11y-line: var(--linha, var(--fio, #e3e5ea));
  --a11y-muted: var(--apoio, var(--tinta2, #5c5f6b));
  --a11y-acento: var(--marca-laranja, var(--laranja, #f26c2f));
  --a11y-foco: var(--foco, var(--azul, #0076B0));
  /* As fontes da casa (`/fontes/fontes.css`): a barra lê os tokens do app
     em que está, e sem eles cai nas mesmas pilhas. O título (`--a11y-disp`)
     só aparece em 16 e 19px, acima do piso de 15px da Montserrat. */
  --a11y-face: var(--texto, 'Source Sans 3', Arial, sans-serif);
  --a11y-disp: var(--titulo, 'Montserrat', Verdana, sans-serif);
  --a11y-ease: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --a11y-pad: clamp(16px, 3vw, 40px);
}

/* A barra é um controle autônomo, pedido do Leandro em 23/09/2026: "quando
   aumenta a fonte, não aumentar em conjunto com a acessibilidade". O zoom do
   tamanho de fonte mora na raiz, e aqui ele é desfeito: zoom aninhado
   multiplica, então 1,3 vezes 1/1,3 dá o tamanho de sempre. A barra, o
   painel, o verbete, a lupa e o VLibras ficam parados; só o sistema cresce. */
.a11y,
.a11y-pular,
.a11y-veu,
div[vw] {
  zoom: calc(1 / var(--a11y-zoom, 1));
}

.a11y-filtros {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.a11y-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- o espaço da barra nas telas da casa ----------
 * A barra é fixa em cima, com 32px. Toda tela de altura cheia desconta essa
 * altura, senão a última linha some embaixo e a primeira fica por baixo da
 * barra. `.com-a11y` só existe quando o script montou a barra: sem ela
 * (teste, script bloqueado) as telas ficam exatamente como eram. */
.com-a11y body {
  padding-top: calc(var(--a11y-h) / var(--a11y-zoom, 1));
  /* O app da casa tem `body { height: 100% }`: sem `border-box`, os 32px
     somam por cima da altura cheia e a página ganha uma rolagem de 32px. */
  box-sizing: border-box;
}

/* `--a11y-zoom` é a escala do tamanho de fonte (`a11y.js`). Com a tela
   ampliada, `100dvh` também cresce na mesma proporção e passaria da tela;
   dividir pela escala devolve a altura de verdade. A barra não cresce (ver
   o zoom desfeito acima), então a altura dela também é dividida: 32px de
   barra são 32/1,3 no espaço ampliado. Sem escala, tudo vale 1. */
.com-a11y .vitrine,
.com-a11y .portao {
  top: calc(var(--a11y-h) / var(--a11y-zoom, 1));
  height: calc((100dvh - var(--a11y-h)) / var(--a11y-zoom, 1));
}

.com-a11y .app-sistemas,
.com-a11y .janela {
  height: calc((100vh - var(--a11y-h)) / var(--a11y-zoom, 1));
  height: calc((100dvh - var(--a11y-h)) / var(--a11y-zoom, 1));
}

/* ---------- pular para o conteúdo ---------- */

.a11y-pular {
  position: fixed;
  top: 6px;
  left: 50%;
  transform: translate(-50%, -160%);
  z-index: 10090;
  background: var(--a11y-ink);
  color: var(--a11y-bg);
  font: 600 12px/1 var(--a11y-face);
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s var(--a11y-ease);
}

.a11y-pular:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--a11y-bg);
  outline-offset: -5px;
}

/* ---------- a barra ---------- */

.a11y-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9100;
  height: var(--a11y-h);
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  background: color-mix(in srgb, var(--a11y-bg) 78%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--a11y-line) 70%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .a11y-bar {
    background: var(--a11y-bg);
  }
}

.a11y-bar-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--a11y-pad);
  overflow: hidden;
}

.a11y-trigger {
  flex: none;
}

.a11y-trigger,
.a11y-quick > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  min-height: 24px;
  color: color-mix(in srgb, var(--a11y-ink) 78%, transparent);
  font: 600 11.5px/1 var(--a11y-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s;
}

.a11y-trigger:hover,
.a11y-quick > button:hover,
.a11y-trigger:focus-visible,
.a11y-quick > button:focus-visible {
  color: var(--a11y-ink);
}

.a11y-trigger:focus-visible,
.a11y-quick > button:focus-visible,
.a11y-extra :focus-visible {
  outline: 2px solid var(--a11y-foco);
  outline-offset: 3px;
  border-radius: 3px;
}

.a11y-ic-main {
  width: 14px;
  height: 14px;
  flex: none;
}

.a11y-quick {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.a11y-quick::before {
  content: '';
  flex: none;
  width: 1px;
  height: 12px;
  background: var(--a11y-line);
}

.a11y-quick > button {
  flex: none;
  white-space: nowrap;
}

.a11y-quick > button[aria-pressed='true'] {
  color: var(--a11y-ink);
}

.a11y-quick > button[aria-pressed='true'] span[aria-hidden='true'],
.a11y-quick > button[aria-pressed='true'] > span:only-child {
  border-bottom: 1px solid var(--a11y-acento);
  padding-bottom: 2px;
}

.a11y-kbd {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
  font: 500 9px/1 var(--a11y-face);
  letter-spacing: 0.17em;
  color: color-mix(in srgb, var(--a11y-ink) 32%, transparent);
}

/* O canto direito: o que a tela puser aqui (a vitrine põe o tema). */
.a11y-extra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.a11y-tema {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  min-height: 24px;
  color: color-mix(in srgb, var(--a11y-ink) 78%, transparent);
  font: 600 11.5px/1 var(--a11y-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s;
}

.a11y-tema:hover {
  color: var(--a11y-ink);
}

@media (max-width: 1040px) {
  .a11y-kbd {
    display: none;
  }

  .a11y-extra {
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .a11y-quick {
    display: none;
  }
}

/* ---------- o painel ---------- */

.a11y-painel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10080;
  width: min(430px, 100vw);
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  flex-direction: column;
  background: var(--a11y-bg);
  color: var(--a11y-ink);
  border-left: 1px solid var(--a11y-line);
  transform: translateX(101%);
  /* Fechado, sem sombra. A 101% da borda, a sombra de 80px ainda vazava
     para dentro da tela e escurecia a borda direita de todos os apps. Ela
     acende junto com a abertura e só apaga depois que o painel terminou de
     sair (o atraso de 0,5s no fechar), para o painel não perder a sombra
     no meio do caminho. */
  box-shadow: none;
  transition: transform 0.5s var(--a11y-ease), box-shadow 0s linear 0.5s;
}

.a11y-painel.aberto {
  transform: none;
  box-shadow: -30px 0 80px rgba(16, 24, 40, 0.22);
  transition: transform 0.5s var(--a11y-ease), box-shadow 0s;
}

.a11y-veu {
  position: fixed;
  inset: 0;
  z-index: 10070;
  background: rgba(10, 14, 20, 0.36);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}

.a11y-veu.aberto {
  opacity: 1;
  visibility: visible;
}

.a11y-p-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--a11y-line);
}

.a11y-p-head h2 {
  font: 600 19px/1.1 var(--a11y-disp);
  letter-spacing: -0.02em;
  color: var(--a11y-ink);
  margin: 0 0 6px;
}

.a11y-p-head p {
  margin: 0;
  font: 400 12px/1.55 var(--a11y-face);
  color: var(--a11y-muted);
  max-width: 34ch;
}

.a11y-x {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-ink);
  transition: background 0.25s, transform 0.25s;
}

.a11y-x:hover {
  background: color-mix(in srgb, var(--a11y-ink) 8%, transparent);
  transform: rotate(90deg);
}

.a11y-x svg {
  width: 15px;
  height: 15px;
}

.a11y-p-corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.a11y-grupo {
  padding: 18px 0;
  border-bottom: 1px solid var(--a11y-line);
}

.a11y-grupo:last-child {
  border-bottom: 0;
}

.a11y-grupo > h3 {
  margin: 0 0 12px;
  font: 500 9px/1 var(--a11y-face);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--a11y-muted);
}

.a11y-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 11px 12px;
  margin-bottom: 7px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--a11y-line);
  border-radius: 10px;
  color: var(--a11y-ink);
  transition: border-color 0.25s, background 0.25s;
}

.a11y-item:hover {
  border-color: color-mix(in srgb, var(--a11y-ink) 36%, transparent);
}

.a11y-item[aria-pressed='true'] {
  background: color-mix(in srgb, var(--a11y-ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--a11y-ink) 70%, transparent);
}

.a11y-item-ic {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--a11y-ink);
  opacity: 0.82;
}

.a11y-item-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

.a11y-item-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.a11y-item-txt b {
  font: 600 13px/1.25 var(--a11y-face);
}

.a11y-item-txt em {
  font: 400 11px/1.4 var(--a11y-face);
  font-style: normal;
  color: var(--a11y-muted);
}

.a11y-chave {
  margin-left: auto;
  flex: none;
  width: 34px;
  height: 19px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--a11y-line);
  position: relative;
  transition: background 0.3s, border-color 0.3s;
}

.a11y-chave::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--a11y-muted);
  transform: translateY(-50%);
  transition: transform 0.3s var(--a11y-ease), background 0.3s;
}

.a11y-item[aria-pressed='true'] .a11y-chave {
  border-color: var(--a11y-acento);
  background: color-mix(in srgb, var(--a11y-acento) 14%, transparent);
}

.a11y-item[aria-pressed='true'] .a11y-chave::after {
  transform: translate(15px, -50%);
  background: var(--a11y-acento);
}

.a11y-passo {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.a11y-passo-nome {
  font: 500 12.5px/1.3 var(--a11y-face);
  color: var(--a11y-ink);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a11y-passo-nome em {
  font: 400 9.5px/1 var(--a11y-face);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a11y-muted);
}

.a11y-passo > button {
  width: 27px;
  height: 27px;
  flex: none;
  cursor: pointer;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-ink);
  font: 400 15px/1 var(--a11y-face);
  display: grid;
  place-items: center;
  transition: background 0.25s;
}

.a11y-passo > button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--a11y-ink) 10%, transparent);
}

.a11y-passo > button:disabled {
  opacity: 0.3;
  cursor: default;
}

.a11y-pontos {
  display: flex;
  gap: 4px;
}

.a11y-pontos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a11y-line);
  transition: background 0.25s;
}

.a11y-pontos i.on {
  background: var(--a11y-ink);
}

.a11y-opcoes {
  padding: 9px 0;
}

.a11y-opcoes > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.a11y-opcoes button {
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 999px;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-muted);
  font: 500 11px/1 var(--a11y-face);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.a11y-opcoes button:hover {
  color: var(--a11y-ink);
}

.a11y-opcoes button[aria-checked='true'] {
  color: var(--a11y-bg);
  background: var(--a11y-ink);
  border-color: var(--a11y-ink);
}

.a11y-nota {
  margin: 8px 0 0;
  font: 400 10.5px/1.55 var(--a11y-face);
  color: var(--a11y-muted);
}

.a11y-sub {
  padding: 12px;
  margin: -3px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--a11y-line);
  background: color-mix(in srgb, var(--a11y-ink) 3%, transparent);
}

.a11y-sub[hidden] {
  display: none;
}

.a11y-abas {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.a11y-abas button {
  flex: 1;
  cursor: pointer;
  padding: 7px 4px;
  border-radius: 6px;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-muted);
  font: 500 10.5px/1 var(--a11y-face);
  transition: color 0.25s, background 0.25s;
}

.a11y-abas button[aria-selected='true'] {
  color: var(--a11y-bg);
  background: var(--a11y-ink);
  border-color: var(--a11y-ink);
}

.a11y-mapa {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.a11y-mapa li {
  border-bottom: 1px solid color-mix(in srgb, var(--a11y-line) 70%, transparent);
}

.a11y-mapa li:last-child {
  border-bottom: 0;
}

.a11y-mapa button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 8px 2px;
  color: var(--a11y-ink);
  font: 400 12px/1.4 var(--a11y-face);
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: padding-left 0.2s;
}

.a11y-mapa button:hover {
  padding-left: 6px;
}

.a11y-mapa button small {
  flex: none;
  font: 500 8.5px/1 var(--a11y-face);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a11y-muted);
  border: 1px solid var(--a11y-line);
  border-radius: 3px;
  padding: 3px 4px;
}

.a11y-mapa button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a11y-mapa .vazio {
  padding: 10px 2px;
  color: var(--a11y-muted);
  font: 400 11.5px/1.5 var(--a11y-face);
}

.a11y-p-pe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--a11y-line);
}

.a11y-reset {
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 999px;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-ink);
  font: 500 11px/1 var(--a11y-face);
  transition: background 0.25s;
}

.a11y-reset:hover {
  background: color-mix(in srgb, var(--a11y-ink) 8%, transparent);
}

.a11y-marca {
  margin-left: auto;
  font: 500 8.5px/1 var(--a11y-face);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--a11y-muted);
  opacity: 0.6;
}

.a11y-painel :focus-visible {
  outline: 2px solid var(--a11y-foco);
  outline-offset: 2px;
}

.a11y-atalhos {
  margin-top: 4px;
}

.a11y-atalhos-h {
  display: block;
  margin-bottom: 10px;
  font: 500 9px/1 var(--a11y-face);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--a11y-muted);
}

.a11y-atalhos dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: baseline;
}

.a11y-atalhos dt {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.a11y-atalhos dd {
  margin: 0;
  font: 400 11.5px/1.4 var(--a11y-face);
  color: var(--a11y-ink);
}

.a11y-atalhos kbd {
  font: 500 9.5px/1 var(--a11y-face);
  color: var(--a11y-ink);
  border: 1px solid var(--a11y-line);
  border-radius: 4px;
  padding: 5px 6px;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--a11y-line);
}

@media (hover: none) and (pointer: coarse) {
  .a11y-item[data-a11y-alterna='teclado'],
  .a11y-atalhos {
    display: none;
  }
}

/* ---------- os efeitos na página ---------- */

:root[data-a11y-linhas] :is(p, li, dd, dt, figcaption, blockquote, td, th, label, summary, h1, h2, h3, h4, h5, h6):not(.a11y *):not([vw] *) {
  line-height: var(--a11y-lh) !important;
}
:root[data-a11y-linhas='1'] { --a11y-lh: 1.7; }
:root[data-a11y-linhas='2'] { --a11y-lh: 2.1; }

:root[data-a11y-letras] :is(p, li, dd, dt, figcaption, blockquote, td, th, label, summary, a, span, b, strong, em, button):not(.a11y *):not([vw] *) {
  letter-spacing: var(--a11y-ls) !important;
}
:root[data-a11y-letras='1'] { --a11y-ls: 0.06em; }
:root[data-a11y-letras='2'] { --a11y-ls: 0.12em; }

:root[data-a11y-links] :is(a, button, [role='button'], summary):not(.a11y *):not(.a11y-pular) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 2px !important;
  outline: 1px dashed color-mix(in srgb, currentColor 55%, transparent);
  outline-offset: 2px;
}

:root[data-a11y-links] a[target='_blank']:not(.a11y *)::after {
  content: ' ↗';
}

/* Contraste: preto e branco puros. Os tokens das duas famílias da casa são
   redefinidos juntos, e `html:root` pesa mais que os blocos de tema de
   `tema.css`, para o contraste vencer o tema qualquer que seja. */
html:root[data-a11y-contraste='1'] {
  color-scheme: dark;
  --fundo: #000; --superficie: #000; --base: #000; --tela: #000; --sutil: #000; --afundado: #000; --fundo-fundo: #000;
  --tinta: #fff; --apoio: #e9e9e9; --tinta2: #e9e9e9; --tinta3: #d6d6d6;
  --linha: #fff; --linha-forte: #fff; --fio: #fff; --fio-forte: #fff;
  --preto: #fff; --preto-tinta: #000;
}

html:root[data-a11y-contraste='2'] {
  color-scheme: light;
  --fundo: #fff; --superficie: #fff; --base: #fff; --tela: #fff; --sutil: #fff; --afundado: #fff; --fundo-fundo: #fff;
  --tinta: #000; --apoio: #111; --tinta2: #111; --tinta3: #222;
  --linha: #000; --linha-forte: #000; --fio: #000; --fio-forte: #000;
  --preto: #000; --preto-tinta: #fff;
}

:root[data-a11y-contraste='1'] body { background: #000; }
:root[data-a11y-contraste='2'] body { background: #fff; }
:root[data-a11y-contraste] .a11y-bar { background: var(--a11y-bg); border-bottom-color: var(--a11y-ink); }
:root[data-a11y-contraste] .vit-fundo { display: none !important; }

:root[data-a11y-teclado] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta, #16181d) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tela, #fff) 80%, transparent) !important;
}

:root[data-a11y-teclado] :target {
  scroll-margin-top: calc(var(--a11y-h) / var(--a11y-zoom, 1) + 80px);
}

.a11y-apontado {
  animation: a11y-pisca 1.8s cubic-bezier(0.62, 0.05, 0.01, 0.99) 2;
  scroll-margin-top: calc(var(--a11y-h) + 90px);
}

@keyframes a11y-pisca {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 4px var(--marca-laranja, var(--laranja, #f26c2f)); }
}

.a11y-lupa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10060;
  padding: 16px clamp(14px, 3vw, 40px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--a11y-bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--a11y-line);
  transform: translateY(101%);
  transition: transform 0.35s var(--a11y-ease);
  pointer-events: none;
}

.a11y-lupa.on {
  transform: none;
}

.a11y-lupa span {
  max-width: 1100px;
  margin: 0 auto;
  font: 500 clamp(19px, 2.4vw, 30px)/1.35 var(--a11y-face);
  color: var(--a11y-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.a11y-verbete {
  position: fixed;
  z-index: 10085;
  width: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--a11y-bg);
  color: var(--a11y-ink);
  border: 1px solid var(--a11y-line);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.24);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}

.a11y-verbete.on {
  opacity: 1;
  transform: none;
}

.a11y-verbete[hidden] {
  display: none;
}

.a11y-v-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.a11y-v-topo strong {
  font: 600 16px/1.2 var(--a11y-disp);
  color: var(--a11y-ink);
  letter-spacing: -0.01em;
}

.a11y-v-topo i {
  font: 400 10.5px/1 var(--a11y-face);
  font-style: normal;
  color: var(--a11y-muted);
}

.a11y-v-topo button {
  margin-left: auto;
  cursor: pointer;
  background: none;
  border: 1px solid var(--a11y-line);
  color: var(--a11y-ink);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.a11y-verbete ol {
  margin: 6px 0 0;
  padding-left: 16px;
}

.a11y-verbete li {
  font: 400 12px/1.6 var(--a11y-face);
  color: var(--a11y-ink);
  margin-bottom: 3px;
}

.a11y-v-sin {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--a11y-line);
}

.a11y-v-sin b {
  display: block;
  font: 500 8.5px/1 var(--a11y-face);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--a11y-muted);
  margin-bottom: 6px;
}

.a11y-v-sin span {
  display: inline-block;
  font: 400 11px/1 var(--a11y-face);
  color: var(--a11y-ink);
  border: 1px solid var(--a11y-line);
  border-radius: 999px;
  padding: 5px 9px;
  margin: 0 4px 4px 0;
}

.a11y-v-fonte {
  margin: 9px 0 0;
  font: 400 9.5px/1.4 var(--a11y-face);
  color: var(--a11y-muted);
}

.a11y-v-vazio {
  font: 400 12px/1.5 var(--a11y-face);
  color: var(--a11y-muted);
  margin: 4px 0 0;
}

:root[data-a11y-dic] body {
  cursor: help;
}

[data-a11y-vw][hidden] {
  display: none;
}

div[vw] {
  z-index: 10050 !important;
}

@media (prefers-reduced-motion: reduce) {
  .a11y-painel,
  .a11y-lupa,
  .a11y-verbete,
  .a11y-pular,
  .a11y-x {
    transition-duration: 0.01ms;
  }

  .a11y-apontado {
    animation: none;
    outline: 3px solid var(--tinta, #16181d);
  }
}

@media (max-width: 620px) {
  :root {
    --a11y-h: calc(30px + env(safe-area-inset-top, 0px));
  }

  .a11y-painel {
    width: 100vw;
    border-left: 0;
  }

  .a11y-lupa span {
    -webkit-line-clamp: 2;
  }
}

/* No toque, o alvo da casa é de 44 px: a barra cresce junto, como já faz no Manual.
   Vem depois da barra de 30 px do celular para valer sobre ela. */
@media (pointer: coarse) {
  :root {
    --a11y-h: calc(44px + env(safe-area-inset-top, 0px));
  }

  .a11y-trigger,
  .a11y-quick > button,
  .a11y-tema {
    min-height: 44px;
  }
}

@media print {
  .a11y,
  .a11y-pular,
  .a11y-veu,
  div[vw] {
    display: none !important;
  }

  .com-a11y body {
    padding-top: 0;
  }
}