/* sources.css — a janela "Onde conseguir" (js/ui/windows/sources.js; docs/specs/item-catalog.md §5.3).
   224 de largura e a ALTURA DO CONTEÚDO, de 96 até 248 (pedido do dono, 2026-10-01: "a interface está muito grande … ela deveria
   se adequar à quantidade de elementos que tem"; `windowLayout.js › fitMinH` e `windowManager.js › apply`): miolo de 208 —
   cabeçalho do item (36) · 4 · a lista, que só rola acima do teto (no teto, 178).
   A gramática é a que o jogo já tem, numa folha só desta janela:
   · a linha de fonte é a `.codex-origin-line` do Catálogo — ícone 16 da série no lugar do verbo, o nome, o selo SÓ quando
     bloqueia (docs/UX-GRAMATICA.md G1/G2/G5) — mais um botão-verbo em palavra (N3);
   · o insumo é o `.craft-mat` da Oficina — o slot de 36 com o selo de tier, o nome INTEIRO ao lado e o tenho/preciso com ✔/✖.
     O ícone de quem FALTA não se apaga: é justamente o que o jogador veio procurar (a cor e o ✖ já marcam).
   Quem faz a lista ROLAR é `.scroll-fade` (base.css); o degradê de "a lista continua" é de `scroll-fade.css`. */

.sources-body {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  margin: 0;
  overflow: hidden;
}

/* ---- cabeçalho: o item (o grupo é focável: tooltip do item no foco, menu do item no botão direito / Shift+F10) ---- */
.src-head {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  flex: none;
  min-width: 0;
}
.src-head:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.src-head-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.src-head-name { color: var(--c-gold); overflow-wrap: anywhere; }
.src-head-have { color: var(--c-text-dim); white-space: nowrap; }

/* ---- a lista: uma linha por lugar -------------------------------------------------------------------------------- */
.src-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
}
/* o degradê de "a lista continua" e o respiro do pé só acendem quando a lista ROLA (`is-scrollable`, MEDIDO por
   `sources.js › syncOverflow` — o molde de `islandBuild.js`): com a janela da altura do conteúdo, a lista que cabe não tem o que
   avisar, e os 12 px do degradê apagariam o pé do Leilão à toa */
.src-list:not(.is-scrollable) { --scroll-fade: 0px; --scroll-fade-pad: 0px; }
.src-none { flex: none; color: var(--c-text-dim); }
/* ícone | nome + selos (quebram a linha quando não cabem) | botão-verbo. Os insumos ocupam a fileira de baixo inteira. */
.src-row {
  flex: none;
  display: grid;
  grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(3 * var(--px));
  row-gap: calc(2 * var(--px));
  padding-top: calc(2 * var(--px));
  border-top: var(--px) solid rgba(255, 255, 255, 0.12);
}
.src-ico {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.src-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1 * var(--px)) calc(3 * var(--px));
  min-width: 0;
}
.src-name { min-width: 0; overflow-wrap: anywhere; }
.src-more { color: var(--c-text-dim); white-space: nowrap; }
/* G2 — selo de estado: moldura + palavra curta + cor. A cor NUNCA vem sozinha: a palavra está dentro (ui-gameplay.md §8.7). */
/* `line-height` em px de ARTE (8 + a moldura = 10, a altura do selo de requisito): com a janela da altura do conteúdo, o `1.1`
   de antes (8,8 px de arte) deixava a janela com altura quebrada (142,6) e a moldura 9-slice fora da grade de pixels */
.src-seal {
  display: inline-block;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: calc(8 * var(--px));
  white-space: nowrap;
}
.src-seal.is-bad { color: var(--c-danger); }
.src-seal.is-gold { color: var(--c-gold); }
.src-go { flex: none; }

/* ---- os insumos da receita: dois por fileira, cada um um botão (o clique abre as fontes dele) ---------------------- */
.src-inputs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(2 * var(--px)) calc(4 * var(--px));
}
.src-mat {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* a lista rola: o `.slot` nasce com `touch-action: none` (é o arrasto da Mochila) e mataria a rolagem por toque */
.src-mat > .slot { flex: none; touch-action: auto; }
.src-mat:hover > .slot, .src-mat:focus-visible > .slot { border-image-source: url(../assets/ui/slots/slot_hover.png); }
.src-mat:hover .src-mat-name { color: var(--c-gold); }
.src-mat:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
.src-mat-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* o nome do insumo INTEIRO, em até 3 linhas de 13 letras (a coluna de 63 px de arte; `client/tests/ui/matNameWrap.test.js`
   varre o acervo): cortado em 2 linhas com reticências, 14 dos 144 insumos saíam com "…" na janela de 224 e os pares
   Pura/Bruta ficavam iguais — os três pontinhos que o dono pediu para tirar (revisão de 2026-10-01; UX-GRAMATICA §3, nome
   próprio inteiro). 3 × 10 + o tenho/preciso = 40 px numa fileira de 36: a fileira cresce 4 px, só nesses. */
.src-mat-name { overflow-wrap: anywhere; }
.src-mat-have { white-space: nowrap; }
.src-mat.is-ok .src-mat-have { color: var(--c-ok); }
.src-mat.is-missing .src-mat-have { color: var(--c-danger); }

/* ◀ da barra de título: a mesma caixa do × (windows.css › .window-close) */
.src-back { min-height: calc(12 * var(--px)); padding: 0 calc(2 * var(--px)); }