/* attributes.css — janela de Atributos (js/ui/windows/attributes.js). Medidas em px de arte: calc(N * var(--px)).
   A janela tem 360×258 (windowLayout.js): QUATRO filas de atributo (ícone + nome + valor + os stats que ele alimenta
   + custo + [−][+], tudo numa linha só desde `docs/UX-GRAMATICA.md`), a prévia do efeito e, no lugar delas, o painel
   de reset; na aba Detalhes, os 26 stats finais (ui-gameplay-janelas.md §0.1). Nenhuma cor nova: tokens de base.css; nenhum
   ícone novo aqui — todos vêm de `--ui-<key>` do manifesto. */
.attr-body {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  padding: 0 calc(2 * var(--px));
}

/* ---- cabeçalho: saldo sempre à vista ------------------------------------------------------------------------- */
.attr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(4 * var(--px));
}
/* G1 — o saldo é ÍCONE + valor (`ico_attr_point`), e a unidade não se escreve. Três linhas de cabeçalho ("Pontos de
   distribuição: 192", "Pontos a subir agora: 192", "Shift: +10 · Ctrl: o máximo") viraram uma fila só: as duas
   explicações são a dica do saldo e a do "+" de cada atributo. */
.attr-head { align-items: center; }
.attr-points, .attr-chip, .attr-cost { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
/* "quanto isto compra" só aparece quando é DIFERENTE do saldo (cerca do irmão igual, G1) */
.attr-buys { flex: none; }
/* Ícone da série de 16×16 (stat, atributo, ponto de distribuição): inerte, `aria-hidden`, nunca informa sozinho. */
.attr-ico {
  display: inline-block;
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ---- uma linha por atributo ------------------------------------------------------------------------------------ */
.attr-list { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.attr-row { padding: calc(1 * var(--px)) 0; }
.attr-row.is-pending { background: rgba(224, 176, 64, 0.12); }
.attr-row-main {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-height: calc(16 * var(--px));
}
.attr-name { min-width: calc(58 * var(--px)); }
.attr-value { min-width: calc(20 * var(--px)); text-align: right; }
.attr-pending, .attr-take { min-width: calc(18 * var(--px)); }
.attr-grow { flex: 1; min-width: 0; }
/* G2 — selo: moldura + palavra curta + cor, nunca frase (o mesmo desenho de `.clan-war-phase`). Marca o atributo
   principal da classe, que antes era meia frase no fim da prosa ("Principal da classe: +Ataque físico."). */
.attr-seal {
  flex: none;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  color: var(--c-gold);
}
/* os stats que o atributo alimenta, em ícones da MESMA série do tooltip de item e dos talentos */
.attr-feeds { display: inline-flex; align-items: center; gap: calc(1 * var(--px)); flex: none; }
/* o custo se separa dos ícones do que o atributo alimenta: colados, os dois grupos liam como um amontoado só */
.attr-cost { margin-left: calc(4 * var(--px)); }
.attr-cost.hidden { display: none; }
/* [−] e [+] quadrados: o rótulo é um caractere, então o padding do `.btn` (4) deixaria o botão largo demais. Sem o balão
   de copiar do iOS: o toque longo neles é o "máximo" do toque (`windows/attributes.js › bindHold`). */
.attr-btn { min-width: calc(16 * var(--px)); padding: 0 calc(1 * var(--px)); -webkit-touch-callout: none; }


/* ---- prévia do efeito (só as linhas que mudam + o Potencial) ---------------------------------------------------- */
.attr-preview {
  border-top: var(--px) solid #3a3450;
  padding-top: calc(2 * var(--px));
}
.attr-preview-seal { display: inline-block; margin-bottom: calc(1 * var(--px)); }
.attr-preview-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(6 * var(--px));
}
/* "[ícone] 14.548 → 14.641": sem o nome do stat a linha cabe na coluna — antes "Regeneração de vida: 88,9/s → 89,3/s"
   estourava e saía cortada com reticências, justo no número que o jogador foi ali conferir. */
.attr-preview-row { display: flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attr-preview-row.is-power { grid-column: 1 / -1; }

/* ---- painel de reset -------------------------------------------------------------------------------------------- */
.attr-reset { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.attr-reset-title { margin-bottom: calc(1 * var(--px)); }
.attr-reset-line { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.attr-reset-cost { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }

/* ---- abas Pontos | Detalhes, na barra de título (`titleButtons`) -------------------------------------------------------
   A aba baixa de 12 (a da página da Mochila, `.grid-tab`): a barra de título mede 14, e a de 14 do `.tab` a engordaria. O texto
   de 8 invade 2 px da borda de 4 — a arte da aba tem miolo liso. 4 px separam as abas do ×. */
.attr-tabs { display: flex; gap: calc(2 * var(--px)); margin-right: calc(4 * var(--px)); }
.attr-tabs > .tab { position: relative; height: calc(12 * var(--px)); min-height: 0; padding: 0 calc(3 * var(--px)); }
/* A arte fica com 12; o alvo do dedo tem 24 (o molde do `::after` do `.hud-btn`, ui-gameplay.md §8.7): 4 acima, até a borda de fora
   da janela (medida no navegador: aba 4 abaixo dela, a 1.ª linha do corpo 6 abaixo da aba), e 8 abaixo, 2 sobre o topo da linha do
   saldo (só texto). Com 12 de alvo eram 12 px de tela no celular deitado (prova N2 de 2026-10-07, lint `alvo-pequeno` alta). O
   absoluto ancora dentro da borda de 4: −(4 + 4) em cima, −(4 + 8) embaixo; na largura, −4 é a própria caixa (as abas medem 43 e
   52, e o vão de 2 entre elas fica de ninguém). */
.attr-tabs > .tab::after { content: ''; position: absolute; top: calc(-8 * var(--px)); bottom: calc(-12 * var(--px)); left: calc(-4 * var(--px)); right: calc(-4 * var(--px)); }

/* ---- aba Detalhes: os 4 atributos numa fila e os 22 derivados em 4 colunas (Ataque · Defesa · Recursos · Farm) ----------
   Conta da coluna mais alta (Ataque, 8 linhas): cabeçalho 10 + 3 + 8 × 16 + 7 × 3 = 162, mais a fila dos atributos (16 + 3 + 1 + 3)
   — ~185 dos ~228 do corpo sem o rodapé (que sai nesta aba). Coluna de ~81: ícone 16 + 2 + "1.234.567" (~45). */
.attr-details { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.attr-det-primary {
  display: flex;
  gap: calc(12 * var(--px));
  padding-bottom: calc(3 * var(--px));
  border-bottom: var(--px) solid #3a3450;
}
.attr-det-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 calc(6 * var(--px)); }
.attr-det-group { display: flex; flex-direction: column; gap: calc(3 * var(--px)); min-width: 0; }
.attr-det-head { line-height: calc(10 * var(--px)); white-space: nowrap; }
.attr-det-line { display: flex; align-items: center; gap: calc(2 * var(--px)); min-height: calc(16 * var(--px)); white-space: nowrap; }
/* sem a peça no manifesto, a palavra curta no lugar do ícone (G1), na largura dele ou um pouco mais */
.attr-det-word { flex: none; min-width: calc(16 * var(--px)); }
/* a Guarda do zero (G1): o zero de um stat que nada mais dá vira a marca `—` esmaecida; o ícone e a linha ficam no lugar (a grade não
   pula) e o valor por extenso segue no gesto e no aria-label — a ficha é de TODOS os stats */
.attr-det-line.is-zero { color: var(--c-text-dim); }
.attr-det-line.is-zero > .attr-ico { opacity: 0.55; }
/* a pista da linha de farm com mascote ou VIP (`attributes.js › farmSources`): da largura do que marca (G4, nunca a coluna inteira) e
   com o pixel do pontilhado devolvido, para a coluna não descer 1 quando a equipe do mascote chega */
.attr-det-line.has-more { align-self: flex-start; margin-bottom: calc(-1 * var(--px)); }

/* ---- rodapé ------------------------------------------------------------------------------------------------------ */
.attr-footer { min-height: calc(16 * var(--px)); }
.attr-footer-group {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  width: 100%;
  min-width: 0;
}
/* a dica vive no corpo, em linha inteira: no rodapé dividia a largura com três botões e vinha cortada */
.attr-hint { display: block; line-height: 1.15; }
.attr-msg { line-height: 1.15; display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }