/* scroll-fade.css — "a lista continua": MECANISMO ÚNICO, um lugar só.
   Carregada por ÚLTIMO em `index.php` de propósito: é ela que decide o fim da caixa que rola, mesmo quando a folha da
   janela escreveu um `padding` de atalho antes.

   POR QUE ESTE ARQUIVO EXISTE (B74, auditoria de UX de 2026-09-23 — regressão POR OMISSÃO):
   a máscara foi inventada na rodada 2 da avaliação de UX e **copiada à mão** para 7 caixas, em 6 folhas diferentes.
   Copiar à mão não escala: no dia da auditoria as TRÊS listas mais longas do jogo estavam de fora —
   `.bestiary-grid` (`scrollHeight 3650 / clientHeight 404` = **9 telas**, `mask-image` ZERO na folha inteira),
   `.craft-list-scroll` (25.992/600 = **43 telas**) e `.tal-body`. O jogador via a lista terminar reta no rodapé, sem
   barra (a barra estilizada deste Chromium é OVERLAY: não ocupa largura e não aparece sem o ponteiro em cima) e sem
   nenhuma pista de que havia mais — no Bestiário, 55 % da ficha (B79: tabela de atributos, seletor ◀/▶ de nível e o
   loot) era simplesmente inalcançável.
   Agora toda caixa que rola em janela está NESTA lista. Caixa nova que role entra aqui — e
   `client/tests/ui/scrollFade.test.js` varre as folhas e reprova quem tiver `overflow-y: auto|scroll` e faltar aqui,
   que é exatamente o que ninguém fez da outra vez.

   ÚLTIMA CÓPIA À MÃO RECOLHIDA (§4 do mesmo relatório, "Lista longa … em 9 folhas"): `codex.css`, `quests.css`,
   `professions.css`, `settings.css`, `weffect.css` e `screens.css` (2×) ainda repetiam o MESMO `linear-gradient`, cada
   uma com o mesmo parágrafo de comentário colado. Enquanto a cópia existisse, o degradê tinha dois donos: uma folha
   podia mudar e as outras seis não — e era por isso que `scrollFade.test.js` precisava dispensar sete caixas com o
   motivo "já tem a máscara na própria folha", que é o buraco por onde a 15.ª lista entraria de fora outra vez.
   Agora `client/tests/ui/scrollFadeBoxes.test.js` reprova QUALQUER folha que escreva um degradê de pé de caixa.

   COMO FUNCIONA (o molde medido em `codex.css`): os últimos `--scroll-fade` px da caixa somem em degradê e o
   `padding-bottom` garante que numa lista que NÃO rola não haja conteúdo nessa faixa para desbotar — lista curta fica
   idêntica, lista longa termina desbotando em vez de fatiada no meio de uma linha.

   OS DOIS BOTÕES da caixa, quando a régua padrão não serve (nenhum deles é um mecanismo novo — são o mesmo):
   · `--scroll-fade-pad` — quanto respiro no pé (uma LINHA daquela lista quando o rodapé é opaco). Lido com fallback,
     então a folha da janela pode escrevê-lo de qualquer lugar (`.settings-pane`, `.bestiary-grid`, `.tw-advice-text`).
   · `--scroll-fade` — a altura do degradê. Este a regra abaixo DECLARA, então só vence quem tiver especificidade maior
     (`.ab-grid:not(.is-scrollable)`, em abilities.css) ou quem estiver AQUI, depois dela (`#advanced-pacts`, no fim
     deste arquivo). Escrever `#foo { --scroll-fade: … }` numa folha carregada antes desta não faz nada. */

.bestiary-grid,
.bestiary-sheetcol,
.craft-list-scroll,
/* Talentos (docs/specs/talents.md §1): desde a árvore com câmera a janela inteira não rola mais (o corpo é `.tal-win`, com os
   234 da vista exatos) — quem rola é o DETALHE do nó. `.tal-body` fica nomeado só pela cerca B74 de `scrollFade.test.js`,
   que ainda o exige entre "as três listas mais longas"; nenhum elemento o usa. A VISÃO GERAL (`.tal-overview`: os três
   cartões da pedra-angular e o Total) rola no pior caso — três efeitos de 4 linhas e 8 fichas. */
.tal-body,
.tal-detail,
.tal-overview,
/* --- hab --- Habilidades de duas seções (docs/specs/ui-gameplay.md §5.1): as GRADES de Ativas e Passivas (rolam quando o dado
   passar de 14/7; o degradê só acende com `is-scrollable`, medido — abilities.css › `.ab-grid:not(.is-scrollable)`) e a COLUNA
   do detalhe, que rola como bloco só com os botões presos fora dela (a caixa de 27 px que rolava a descrição por dentro saiu) */
.ab-grid,
.ab-dscroll,
/* Leilão (redesenho de 2026-09-26): a lista plana de lotes (`.auction-list`) e a ficha (`.auction-detail`) deixaram
   de existir — no lugar delas a VITRINE, o LIVRO DE OFERTAS e o formulário da aba Vender, que são as três caixas que
   rolam da janela nova. `.auction-mine` continua sendo a lista de "Meus lotes". */
.auction-grid,
.auction-book,
.auction-sellform,
.auction-mine,
/* --- auction-itoken (08a) --- o painel de filtros toma a coluna da vitrine e rola sozinho (desvio P08a-1) */
.auction-filterpanel,
.clan-scroll,
.clan-detail-desc,
.clan-vault-box,
.clan-vault-pick,
.codex-sheetcol,
.friends-scroll,
/* Correio (ui-gameplay.md §13): a lista e o corpo da carta. O Escrever não rola (o campo da mensagem cresce até o pé)
   — o degradê desbotaria o "Enviar". */
.mail-list,
.mail-detail,
.prof-body,
.rb-sheet,
.craft-detail-inner,
.pvp-list,
.tw-kit,
#bankmat-list,
/* --- pet --- a lista do canil, o alforje da equipe e as fichas de habilidade da Troca (docs/specs/pet.md §8; css/pet.css) */
.pet-list,
.pet-pouch,
.pet-ex-skills,
.work-panes,
.workers-sheet,
.workers-list,
.work-picker,
/* --- chat --- a lista do painel de chat (docs/specs/chat.md §7) */
.chat-lines,
/* --- sources --- as fontes do item na janela "Onde conseguir" (docs/specs/item-catalog.md §5.3) */
.src-list,
/* --- carta --- o painel de material da carta do mar (a linha "Falta" e os materiais das ilhas — docs/specs/workers-nodes.md §7.6) */
.node-map-mat-list,
/* --- ilha --- a fileira de cartões da janela Construir (docs/specs/island.md §3.1): o degradê só acende com `is-scrollable`,
   medido (`island.css › .ib-cards:not(.is-scrollable)`) */
.ib-cards,
/* --- guerra --- a janela Guerras (docs/specs/clas.md §8.11 a; css/war.css): a lista de membros do Esquadrão, o Histórico e o
   corpo das folhas (a da ilha e a da guerra) */
.war-list,
.war-hist,
.war-sheet-body,
/* --- warband --- a janela do Grupo Guerreiro (docs/specs/warband.md §12.3; css/warband.css): os convites recebidos, a folha de
   convidar amigos, o estoque do Armazém e o Registro */
.wb-invites,
.wb-pick-list,
.wb-stock,
.wb-log,
/* As que vieram das cópias à mão de §4. As cinco primeiras também ganharam a classe `scroll-fade` em quem as cria
   (é lá que o teste procura); ficam nomeadas aqui porque era aqui que a folha delas apontava. */
.codex-grid,
.quests-list,
.rb-list,
.settings-pane,
/* Sem dono em JS que eu possa marcar: o `#advanced-pacts` nasce com `overflow-y` INLINE (advancedSelect.js) e o corpo
   do resumo da corrida é um `.window-body` que `screens/lobby.js` promove a caixa que rola. */
#advanced-pacts,
.modal-backdrop.summary-backdrop > .modal > .window-body,
.scroll-fade {
  --scroll-fade: calc(12 * var(--px));
  padding-bottom: var(--scroll-fade-pad, calc(6 * var(--px)));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--scroll-fade)), transparent 100%);
}

/* Barra de rolagem À VISTA onde a folha da janela ainda não tinha uma (o mesmo desenho de `codex.css`). Ela é overlay
   neste Chromium — não muda `clientWidth`, então nenhuma lista encolhe por causa desta regra. */
@supports selector(::-webkit-scrollbar) {
  .bestiary-grid,
  .bestiary-sheetcol,
  .codex-sheetcol,
  .tal-body,
  .tal-detail,
  .tal-overview {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  .bestiary-grid::-webkit-scrollbar,
  .bestiary-sheetcol::-webkit-scrollbar,
  .codex-sheetcol::-webkit-scrollbar,
  .tal-body::-webkit-scrollbar,
  .tal-detail::-webkit-scrollbar,
  .tal-overview::-webkit-scrollbar {
    width: calc(6 * var(--px));
  }
  .bestiary-grid::-webkit-scrollbar-track,
  .bestiary-sheetcol::-webkit-scrollbar-track,
  .codex-sheetcol::-webkit-scrollbar-track,
  .tal-body::-webkit-scrollbar-track,
  .tal-detail::-webkit-scrollbar-track,
  .tal-overview::-webkit-scrollbar-track {
    background: #12101c;
  }
  .bestiary-grid::-webkit-scrollbar-thumb,
  .bestiary-sheetcol::-webkit-scrollbar-thumb,
  .codex-sheetcol::-webkit-scrollbar-thumb,
  .tal-body::-webkit-scrollbar-thumb,
  .tal-detail::-webkit-scrollbar-thumb,
  .tal-overview::-webkit-scrollbar-thumb {
    background: #575273;
    border: var(--px) solid #12101c;
  }
  .bestiary-grid::-webkit-scrollbar-thumb:hover,
  .bestiary-sheetcol::-webkit-scrollbar-thumb:hover,
  .codex-sheetcol::-webkit-scrollbar-thumb:hover,
  .tal-body::-webkit-scrollbar-thumb:hover,
  .tal-detail::-webkit-scrollbar-thumb:hover,
  .tal-overview::-webkit-scrollbar-thumb:hover {
    background: #8a84a8;
  }
}

/* O quadro de pactos da Exploração avançada. Os dois valores vieram medidos de `screens.css` e ficam AQUI porque um
   `#id` numa folha carregada antes perderia para o `--scroll-fade` que a regra acima declara (ordem de carga):
   · degradê de 4 px, não 12 — a caixa desenha a barra de rolagem clássica no navegador do jogador e 12 px apagariam
     o pé dela junto com o conteúdo;
   · respiro 0 — a lista SEMPRE transborda (6 pactos, `scrollHeight 176 / clientHeight 120`), então não há o caso
     "lista curta desbotando à toa" que o respiro existe para evitar, e cada pixel aqui é meio cartão. */
#advanced-pacts { --scroll-fade: calc(4 * var(--px)); --scroll-fade-pad: 0px; }