/* GERADO. NÃO SE EDITA À MÃO.
   =========================
   Este ficheiro é o `src/app/barra.css`, copiado para o `site/` pelo
   `scripts/cabecalho-para-a-app.mjs`, porque o site é servido como ficheiros
   estáticos e não alcança o `src/`.

   🔴 A FONTE É A DA APP, e isso é o contrário do cabeçalho: a marcação viaja do
   site para a app, e a barra viaja da app para o site. A razão está escrita no
   gerador, e resume-se a uma medição: a versão que estava na home era a VELHA.

   ⬜ Muda-se o `src/app/barra.css`, corre-se o gerador, e comita-se o
   resultado. Há uma guarda no `npm test` que chumba quando os dois divergem.
*/

/* ===== Barra de deslocamento =====
   ---------------------------------------------------------------------------
   FICHEIRO PRÓPRIO, importado pelo backoffice e pela página pública da
   proposta. Antes vivia só no globals.css, e por isso a página pública, que
   não carrega o CSS da aplicação, não tinha regra nenhuma: o browser desenhava
   a barra clássica dele, 15px, enquanto a aplicação desenhava 12px. Três
   pixéis não são um detalhe quando é a única coisa que o cliente vê ao lado do
   documento que lhe mandámos.
   O aspeto é o mesmo do codenumber.pt: carril na cor de fundo, puxador
   arredondado, com uma margem à volta que o faz parecer uma pastilha a
   flutuar. A margem é feita com uma borda transparente recortada ao conteúdo,
   e não com uma borda da cor do carril como no site: assim o puxador fica
   certo por cima de qualquer fundo, e no backoffice há vários.

   QUEM DECIDE A COR é quem importa este ficheiro, por --scroll-thumb e
   --scroll-track. No backoffice o puxador é a cor da organização, de propósito.
   No documento que vai para um cliente NÃO É: o cromo do browser não é sítio
   para a marca de ninguém, e um puxador cor de marca num documento é a única
   parte da janela que não é o documento. */

/* O PAR DE PROPRIEDADES PADRÃO, E ESTE COMENTÁRIO TEM DUAS METADES QUE NÃO SE
   MISTURAM. Até 6/10/2026 elas estavam na mesma frase, e isso fez alguém ler um
   gosto como se fosse uma conclusão técnica. São estas:

   O FACTO, e está medido com uma captura: o Chrome moderno percebe o par
   `scrollbar-width`/`scrollbar-color`, e assim que o vê DEITA FORA as regras
   `::-webkit` abaixo e desenha a barra dele — mais larga, com uma seta nas
   pontas, o puxador sem o recorte. Com o par fechado ao Firefox por um
   `@supports`, o Chrome fica com as `::-webkit` e desenha a pastilha de 12px.
   Isto é verdade e não é opinião de ninguém.

   O GOSTO, E É DO DONO: entre as duas, o João escolheu a do par padrão. Olhou
   para o `codenumber.pt` e para o `app.codenumber.pt/auditor` lado a lado, a
   6/10/2026, e preferiu a barra larga com a seta. **A forma desta barra é uma
   decisão dele e não uma conclusão técnica**, e quem vier a seguir não tem de a
   defender: tem de a saber.

   E HÁ UM ARGUMENTO TÉCNICO DO MESMO LADO, que ninguém tinha posto na mesa: o
   par é a propriedade NORMALIZADA e as `::-webkit` são de um fornecedor. A
   escolha do dono é também a que sobrevive mais tempo.

   AS `::-webkit` FICAM COMO RECURSO, para quem ainda não entenda o padrão: um
   browser que ignore o par continua a receber a pastilha, e nenhum fica com a
   barra crua.

   A LARGURA DEIXA DE SE PODER DIZER EM PIXÉIS, e isso é o preço: o
   `scrollbar-width` só aceita `auto`, `thin` ou `none`. Fica `auto`, que é o que
   a home do codenumber.pt tinha antes de 6/10 e, portanto, o que o João viu
   quando escolheu. Medido nesse dia, num Chrome que a desenha: `auto` dá 15px e
   `thin` dá 10px, com a mesma seta e o mesmo desenho: o que muda é só a
   largura. */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--scroll-thumb), color-mix(in srgb, var(--scroll-thumb) 70%, #000));
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb); background-clip: content-box; }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
/* Sem as setas das pontas: o Chrome desenha-as com o estilo dele e estragavam
   a pastilha logo nos dois extremos, que é onde ela mais se vê. */
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { display: none; width: 0; height: 0; }