/* codex.css — janela do Catálogo de itens (js/ui/windows/codex.js). Medidas em px de arte: calc(N * var(--px)).
   QUATRO números governam a geometria; mexer neles é a única "afinação" prevista (o molde é o bestiary.css).

   A conta da janela de 592 × 288 em [24, 40]:
     miolo 576 × 272  −  título 14  −  rodapé 10  =  corpo útil 576 × 248
     − barra de filtros 16 − vão 2                =  conteúdo    576 × 230
     grade 372  +  vão 4  +  ficha 200            =  576  ✓
   10 colunas × 34 = 340 px de arte dentro dos 372 da coluna: sobram 32 px, mais que qualquer barra de rolagem em
   qualquer `--px`. Por isso a grade NUNCA reflui e `scrollbar-gutter` NÃO é usado aqui (ela reserva a calha
   ENCOLHENDO a caixa de conteúdo — não devolve largura; ver a decisão D14 do pacote). */
.codex-body {
  --codex-grid-w: 372;   /* largura da coluna da grade */
  --codex-sheet-w: 200;  /* largura da coluna da ficha */
  --codex-step: 34;      /* passo da célula (ícone 32 + 2 de respiro) */
  --codex-cell: 32;      /* lado do ícone */
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  height: 100%;
  overflow: hidden;
}

/* ---- barra de filtros: UMA linha de 16 px (abas + busca + ciclo de classe + "Faltam") ------------------------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  flex: none;
  height: calc(16 * var(--px));
}
.filterbar-tabs { display: flex; gap: calc(2 * var(--px)); }
.filterbar .tab:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
/* 120 px de arte, fixo: entra na conta de largura da barra (494 de 576, 82 de folga) */
.filterbar-search { width: calc(120 * var(--px)); flex: none; }
.codex-toggle { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); color: var(--c-text-dim); cursor: pointer; }

/* ---- conteúdo: grade + ficha --------------------------------------------------------------------------------- */
.codex-content { flex: 1; min-height: 0; display: flex; gap: calc(4 * var(--px)); }
.codex-gridcol { width: calc(var(--codex-grid-w) * var(--px)); flex: none; display: flex; flex-direction: column; min-height: 0; }

.codex-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
  display: grid;
  grid-template-columns: repeat(10, calc(var(--codex-step) * var(--px)));
  align-content: start;
}
/* cabeçalho da prateleira: ocupa a linha inteira da grade ("Elmo … 4/10") */
.codex-shelf-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(10 * var(--px));
  line-height: 1;
  color: var(--c-gold);
}
.codex-shelf-head:not(:first-child) { margin-top: calc(2 * var(--px)); }
.codex-shelf-count { color: var(--c-text-dim); }

/* ---- célula: ícone 32 em passo 34 (NÃO é o .slot de 36 — moldura de qualidade é da instância, não do template) -- */
.codex-cell {
  position: relative;
  width: calc(var(--codex-step) * var(--px));
  height: calc(var(--codex-step) * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.codex-cell .item-icon {
  width: calc(var(--codex-cell) * var(--px));
  height: calc(var(--codex-cell) * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
/* seleção PARA DENTRO: um aro para fora mudaria o passo e derrubaria a décima coluna */
.codex-cell.is-selected { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.codex-cell:focus-visible { outline: calc(2 * var(--px)) solid #fff5a8; outline-offset: calc(-1 * var(--px)); z-index: 1; }
/* silhueta: a MESMA arte, escurecida e sem cor — nenhum PNG novo (é a linha `.is-unknown .bestiary-sprite`) */
.codex-cell.is-unknown .item-icon, .codex-head.is-unknown .item-icon { filter: grayscale(1) brightness(0.35); }
/* tier no canto: é o que mantém a progressão legível quando a prateleira quebra a linha */
.codex-tier {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 1;
  color: var(--c-text);
  text-shadow: var(--px) var(--px) 0 #000;
  pointer-events: none;
}

/* ---- ficha ---------------------------------------------------------------------------------------------------
   Blocos 1 a 4 (cabeçalho, faixa de nível, seletor e atributos) cabem SEMPRE na primeira tela; comparação, origem,
   economia e sabor são a rolagem — está orçado assim, não é acidente. */
.codex-sheetcol {
  width: calc(var(--codex-sheet-w) * var(--px));
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.codex-head { display: flex; gap: calc(3 * var(--px)); align-items: flex-start; }
/* o cabeçalho da ficha é o alvo focável do menu de item (Shift+F10 / tecla Menu — ui-gameplay.md §8.7) */
.codex-head:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.codex-headicon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); flex: none; display: flex; }
.codex-headicon .item-icon {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.codex-headtext { min-width: 0; }
.codex-name { color: var(--c-gold); overflow-wrap: anywhere; }
.codex-meta, .codex-hint, .codex-desc { color: var(--c-text-dim); }
.codex-hint, .codex-desc, .codex-meta { overflow-wrap: anywhere; }
.codex-group-title { color: var(--c-gold); margin-top: calc(2 * var(--px)); }
/* O seletor de nível anda JUNTO: com "Atributos no nível 12" fora, o `space-between` jogava as duas setas para os
   extremos dos 200 px e o número flutuava sozinho no meio — três coisas soltas no lugar de um controle. */
.codex-level { display: flex; align-items: center; justify-content: flex-start; gap: calc(3 * var(--px)); }
.codex-level-now { margin-top: 0; }
.codex-economy { color: var(--c-gold); overflow-wrap: anywhere; margin-top: calc(2 * var(--px)); }

/* ---- gramática de enxugamento (docs/UX-GRAMATICA.md §2) -------------------------------------------------------
   A ficha tem 200 px de ARTE. Rótulo escrito come a linha inteira; o rótulo aqui é o ÍCONE da série que já existe
   (`ui/statIcons.js` + as peças `ico_*` de manifest.ui) e a palavra vive no title/aria (G7). Nenhum PNG novo. */
.codex-ico, .codex-ico9, .codex-ico8 {
  flex: none;
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.codex-ico  { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.codex-ico9 { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.codex-ico8 { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
/* ficha "ícone + valor" e a fila delas */
.codex-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.codex-chips { display: flex; align-items: center; flex-wrap: wrap; gap: calc(1 * var(--px)) calc(8 * var(--px)); }
/* DUAS colunas: com o nome do stat fora, "Ataque físico 20" deixa de tomar 200 px e seis atributos cabem em três
   linhas — é o que devolve a economia e o sabor para a primeira tela, sem rolagem. */
.codex-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(58 * var(--px)), 1fr)); gap: 0 calc(4 * var(--px)); }
.codex-row { display: flex; align-items: center; gap: calc(2 * var(--px)); min-width: 0; }
.codex-row-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codex-origin-line { display: flex; align-items: center; gap: calc(3 * var(--px)); text-align: left; }
.codex-origin-line > span:not([class]) { min-width: 0; overflow-wrap: anywhere; }
/* G2 — selo de estado: moldura + palavra curta + cor. A cor NUNCA vem sozinha (ui-gameplay.md §8.7). */
.codex-seal {
  display: inline-block;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-text-dim);
}
.codex-sheetcol .codex-seal.is-gold, .codex-seal.is-gold { color: var(--c-gold); }
/* exigência de nível: quando ela BLOQUEIA vira selo (moldura + cadeado + vermelho); quando não, é só uma ficha */
.codex-req.is-bad { border: var(--px) solid currentColor; padding: 0 calc(2 * var(--px)); }
/* "+8 mapas" não é uma origem nova: recua para a coluna do texto e não ganha ícone (dois ícones iguais em fila
   seguida seriam a cerca do irmão quebrada — G1) */
.codex-origin-rest { padding-left: calc(19 * var(--px)); }
/* linha da receita: leva à artesã, e por isso é botão de verdade (teclado e leitor de tela) */
.codex-link {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: #6fc3ff;
  text-decoration: underline;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.codex-link:hover { color: var(--c-gold); }
/* a receita cujo prédio ainda não existe: travada COM MOTIVO (`setButtonReason` — o balão abre no hover, no clique, no
   foco e no toque, N3). Deixa de parecer link, mas continua recebendo o ponteiro e o foco. */
.codex-link.is-disabled, .codex-link.is-disabled:hover { color: var(--c-text-dim); text-decoration: none; cursor: default; }
/* "Ver todas" (a lista inteira na janela "Onde conseguir"): do tamanho da palavra, não da coluna flex de 200 px */
.codex-origin-all { align-self: flex-start; }
.codex-status { text-align: center; flex: none; }
/* mesmos tons do tooltip (windows.css): verde ganha, vermelho perde, cinza não afeta */
.codex-sheetcol .is-good { color: var(--c-ok); }
.codex-sheetcol .is-bad { color: var(--c-danger); }
.codex-sheetcol .is-dim { color: var(--c-text-dim); }

/* Barra de rolagem à vista e corte no fim de uma fileira inteira (avaliação de UX, rodada 2): a última fileira de
   ícones saía fatiada ao meio pelo rodapé e parecia defeito de render. Mesmo molde de craft.css. */
.codex-grid { padding-bottom: calc(6 * var(--px)); }
@supports selector(::-webkit-scrollbar) {
  .codex-grid { scrollbar-width: auto; scrollbar-color: auto; }
  .codex-grid::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .codex-grid::-webkit-scrollbar-track { background: #12101c; }
  .codex-grid::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
  .codex-grid::-webkit-scrollbar-thumb:hover { background: #8a84a8; }
}

/* O degradê de "a lista continua" é do MECANISMO ÚNICO (`css/scroll-fade.css`, carregada por último): a cópia
   à mão desta folha foi recolhida para lá. */