/* professions.css — janelas Profissões (js/ui/windows/professions.js) e Livro de receitas (js/ui/windows/recipeBook.js),
   docs/specs/professions.md Medidas em px de arte: calc(N * var(--px)), no molde de codex.css. */

/* ---- Profissões: quatro cartões de 50 --------------------------------------------------------------------------- */
.prof-body {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.prof-cards { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.prof-status { text-align: center; flex: none; }
.prof-card {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  height: calc(68 * var(--px));
  flex: none;
  padding: 0 calc(4 * var(--px));
  box-sizing: border-box;
}
/* ícone 16 do manifesto em 2× */
.prof-ico {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  flex: none;
  background-repeat: no-repeat;
  background-size: 100%;
  image-rendering: pixelated;
}
.prof-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--px)); }
.prof-head { display: flex; justify-content: space-between; gap: calc(4 * var(--px)); }
.prof-name { color: var(--c-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-level { white-space: nowrap; flex: none; }
.prof-tier { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* B22: a barra padrão tem 8 e o rótulo "0 / 100 exp" também — os anéis da moldura riscavam o texto (parecia tachado).
   10 de altura, como as barras do HUD (hud.css). */
.prof-card .bar { height: calc(10 * var(--px)); }
.prof-actions { flex: none; }
/* --- oficios-v3 --- quatro cartões de 50 (4×50 + 3×4 = 212 = os 3×68 + 2×4 de hoje): nada rola, nada cresce */
.prof-card { height: calc(50 * var(--px)); }
.prof-text { gap: calc(2 * var(--px)); }       /* cabeçalho 10 + barra 10 + tier 10 + 2 vãos = 34 ≤ 50 − 2×4 */

/* ---- Livro de receitas: barra 16 + lista 232 | ficha --------------------------------------------------------- */
.rb-body {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  height: 100%;
  overflow: hidden;
}
.rb-tier {
  height: calc(14 * var(--px));
  font: inherit;
  color: var(--c-text);
  background: #12101c;
  border: var(--px) solid #575273;
}
.rb-toggle { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); color: var(--c-text-dim); cursor: pointer; white-space: nowrap; }
.rb-content { flex: 1; min-height: 0; display: flex; gap: calc(4 * var(--px)); }
.rb-listcol { width: calc(232 * var(--px)); flex: none; display: flex; flex-direction: column; min-height: 0; }
.rb-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.rb-list:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.rb-row {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(20 * var(--px));
  padding: 0 calc(2 * var(--px));
  cursor: pointer;
}
.rb-row:hover { background: rgba(255, 255, 255, 0.06); }
.rb-row.is-selected { background: rgba(224, 176, 64, 0.16); box-shadow: inset calc(2 * var(--px)) 0 0 var(--c-gold); }
.rb-row.is-locked { opacity: 0.6; }
.rb-row .item-icon, .rb-mat .item-icon {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
/* O selo de tier no ícone do template (produto e materiais): a MESMA peça do slot de item (nine-slice.css .slot-tier;
   professions.md §7, Livro de receitas), nada de selo novo. O contêiner é quem dá o `position` que o selo absoluto
   procura e é a CASINHA DE MINI-SLOT — fundo escuro translúcido + aro interno de 1 px, os MESMOS valores de
   windows.css › .bankmat-ico e .tooltip-use ("Usado em"); a paridade é provada por client/tests/ui/recipeBookTier.test.js.
   Sem ela a margem transparente da arte deixava o selo flutuando ACIMA da figura, como sobrescrito (revisão de
   2026-09-30); com ela o selo lê como o canto do slot. No ícone de 16 o selo encosta no canto (0,0), como no banco:
   15×6 de arte cabe no 16. No de 32 da ficha fica em (1,1), a mesma distância do canto do ícone que o slot 36 usa. */
.rb-ico { position: relative; flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); background-color: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 var(--px) rgba(255, 255, 255, 0.08); }
.rb-ico > .item-icon { display: block; }
.rb-ico > .slot-tier { left: 0; top: 0; }
.rb-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-row-level { flex: none; color: var(--c-text-dim); }
.rb-mark { flex: none; width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
/* o ponto verde de craft.css (`.craft-row-mark.is-craftable`) e o cadeado `ico_lock` */
.rb-mark.is-ready {
  background:
    linear-gradient(#a8e08c, #a8e08c) calc(3 * var(--px)) calc(2 * var(--px)) / calc(1 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-ok), var(--c-ok)) calc(2 * var(--px)) calc(1 * var(--px)) / calc(4 * var(--px)) calc(6 * var(--px)) no-repeat,
    linear-gradient(var(--c-ok), var(--c-ok)) calc(1 * var(--px)) calc(2 * var(--px)) / calc(6 * var(--px)) calc(4 * var(--px)) no-repeat,
    linear-gradient(#1a1423, #1a1423) calc(1 * var(--px)) 0 / calc(6 * var(--px)) calc(8 * var(--px)) no-repeat,
    linear-gradient(#1a1423, #1a1423) 0 calc(1 * var(--px)) / calc(8 * var(--px)) calc(6 * var(--px)) no-repeat;
}
.rb-mark.is-locked {
  background: var(--ui-ico_lock, none) center / calc(8 * var(--px)) calc(8 * var(--px)) no-repeat;
  image-rendering: pixelated;
}
/* silhueta: a MESMA arte, escurecida e sem cor (a linha `.codex-head.is-unknown .item-icon` de codex.css) */
.rb-row.is-unknown .item-icon, .rb-head.is-unknown .item-icon { filter: grayscale(1) brightness(0.35); }
.rb-status { text-align: center; flex: none; }

/* ---- ficha ---------------------------------------------------------------------------------------------------- */
.rb-sheet {
  flex: 1;
  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;
}
.rb-head { display: flex; gap: calc(3 * var(--px)); align-items: flex-start; }
.rb-headicon { position: relative; width: calc(32 * var(--px)); height: calc(32 * var(--px)); flex: none; display: flex; background-color: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 var(--px) rgba(255, 255, 255, 0.08); }
.rb-headicon > .slot-tier { left: calc(1 * var(--px)); top: calc(1 * var(--px)); }
.rb-headicon .item-icon {
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.rb-headtext { min-width: 0; }
.rb-name { color: var(--c-gold); overflow-wrap: anywhere; }
.rb-meta, .rb-hint { color: var(--c-text-dim); overflow-wrap: anywhere; }
.rb-group { color: var(--c-gold); margin-top: calc(2 * var(--px)); }
.rb-mat { display: flex; align-items: center; gap: calc(3 * var(--px)); }
.rb-mat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-mat-have { flex: none; white-space: nowrap; }
.rb-mat-mark { display: inline-block; width: calc(8 * var(--px)); text-align: center; flex: none; }
.rb-mat.is-ok .rb-mat-have, .rb-mat.is-ok .rb-mat-mark { color: var(--c-ok); }
.rb-mat.is-bad .rb-mat-have, .rb-mat.is-bad .rb-mat-mark { color: var(--c-danger); }
/* a linha do material é BOTÃO de consulta (clique = "Onde conseguir", botão direito = o menu de item — a regra única de toda
   bancada e lote, ui-gameplay.md §0.4): o realce do material da Oficina — o nome fica dourado no hover e o foco de teclado é
   o contorno dourado */
.rb-mat[role='button'] { cursor: pointer; }
.rb-mat[role='button']:hover .rb-mat-name { color: var(--c-gold); }
.rb-mat:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.rb-cost { color: var(--c-gold); }
/* o requisito que FALTA é o selo de requisito (`widgets/reqSeal.js`, `craft.css › .req-seal`) no lugar da própria linha do
   cabeçalho: 1 px de respiro entre os dois selos empilhados */
.rb-headtext > .rb-meta > .req-seal { margin: var(--px) 0 0; }
.rb-actions { margin-top: calc(2 * var(--px)); }

/* ---- Refino: UMA bancada por janela, no molde da Oficina (docs/specs/professions.md §7; js/ui/windows/refine.js) ------
   Decisão do dono (2026-09-30): sem abas nem banner. Corpo 428 × 246 = colunas de 176 (as classes `.craft-*` de craft.css:
   lista + detalhe 244, UMA gramática com a Oficina) · 4 · a faixa das 4 vagas (42) · 2 · a fileira Pronto (16) · folga.
   Bancada cujo prédio falta: o aviso `.refine-locked` toma o lugar das colunas e da faixa; o Pronto fica (o estoque é de
   todas as bancadas). Nenhuma caixa nova rola aqui: as que rolam são `.craft-list-scroll` e `.craft-detail-inner`. */
.window-body.refine-win { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.refine-win > .craft-columns { flex: none; height: calc(176 * var(--px)); }
.refine-win > .refine-locked { flex: 1; min-height: 0; }
.refine-win > .refine-slots { flex: none; margin-top: calc(4 * var(--px)); }
.refine-win > .refine-ready { flex: none; margin-top: calc(2 * var(--px)); }
/* --- tier --- a coluna da lista com a fileira do filtro embaixo, a montagem da Oficina (`.craft-left` de craft.css, aqui na largura que
   sobra do detalhe, 180) e o seletor de tier encostado à direita, como o espaço na Oficina (professions.md §7) */
.refine-win .craft-left { flex: 1 1 auto; width: auto; min-width: 0; }
.refine-filters { display: flex; align-items: center; flex-shrink: 0; min-height: calc(12 * var(--px)); }

/* lista: cabeçalho de profissão (ícone 16 · nome · Nv · barra de exp). A Fornalha tem dois (Ferreiro e Joalheiro). */
.refine-group-head {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(18 * var(--px));
  padding: 0 calc(3 * var(--px)) 0 calc(4 * var(--px));
  color: var(--c-gold);
  border-bottom: var(--px) solid rgba(255, 255, 255, 0.12);
}
.refine-group + .refine-group > .refine-group-head { margin-top: calc(2 * var(--px)); }
.refine-group-ico { flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.refine-group-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refine-group-level { flex: none; white-space: nowrap; }
.refine-group-head > .bar { flex: none; width: calc(32 * var(--px)); }
/* a marca "falta material": um × na cor de perigo (forma + cor, §8.7) — craft.css só desenha o ponto e o cadeado. DESENHADO
   em 8×8 de arte, traço de 2, no molde de gradientes do ponto (`.craft-row-mark.is-craftable`): o glifo "×" da fonte saía
   com ~3 px e o estado mais comum de quem não tem material quase sumia ao lado dos cadeados (revisão de 2026-09-30).
       XX....XX / .XX..XX. / ..XXXX.. / ...XX... / ...XX... / ..XXXX.. / .XX..XX. / XX....XX */
.refine-list .craft-row-mark.is-missing {
  background:
    linear-gradient(var(--c-danger), var(--c-danger)) calc(0 * var(--px)) calc(0 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(6 * var(--px)) calc(0 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(1 * var(--px)) calc(1 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(5 * var(--px)) calc(1 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(2 * var(--px)) calc(2 * var(--px)) / calc(4 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(3 * var(--px)) calc(3 * var(--px)) / calc(2 * var(--px)) calc(2 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(2 * var(--px)) calc(5 * var(--px)) / calc(4 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(1 * var(--px)) calc(6 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(5 * var(--px)) calc(6 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(0 * var(--px)) calc(7 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat,
    linear-gradient(var(--c-danger), var(--c-danger)) calc(6 * var(--px)) calc(7 * var(--px)) / calc(2 * var(--px)) calc(1 * var(--px)) no-repeat;
}

/* detalhe: o que falta (TODOS os requisitos, em vermelho) quebra linha em vez de sumir em reticências */
.refine-win .craft-head-sub { white-space: normal; }
/* O pior caso cabe inteiro, sem rolar (medido no navegador: 3 insumos + nota em 2 linhas = 36 + 20 + 12 + 74 + 18 + 4 vãos
   de 2 = 168, a altura do miolo): vão de 2 e sem o respiro/degradê do pé do mecanismo de scroll-fade.css — o rodapé com o
   Refinar é opaco e grudado embaixo, e o degradê o apagaria. A rolagem fica de rede para nome que quebre em 3 linhas. */
.refine-win .craft-detail-inner { gap: calc(2 * var(--px)); --scroll-fade-pad: 0px; --scroll-fade: 0px; }
.refine-foot { align-items: center; }
.refine-foot-batches { display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
.input.refine-batches { flex: none; width: calc(28 * var(--px)); text-align: right; }
/* --- F5 (B343; professions.md §7) --- a prévia no rodapé "× [N] [Máx]  mm:ss  [Refinar ◉ preço]": o tempo encostado no Refinar e o
   preço DENTRO dele, a cor do rótulo; a moeda tem 9 e o miolo do botão 8 (o molde do Criar da Oficina, craft.css › craft-win) */
.refine-foot > .craft-time { flex: none; margin-left: auto; white-space: nowrap; }
#refine-start > .gold-label { color: inherit; }
#refine-start > .gold-label > .ico-gold { margin: calc(-1 * var(--px)) 0; }

/* faixa das vagas: 4 cartões de ~105 (slot 36 + a coluna de texto) */
.refine-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(2 * var(--px)); height: calc(42 * var(--px)); }
.refine-loading { grid-column: 1 / -1; align-self: center; margin: 0; text-align: center; }
.refine-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-width: 0;
  height: calc(42 * var(--px));
  padding: calc(2 * var(--px));
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 var(--px) rgba(255, 255, 255, 0.08);
}
.refine-card:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.refine-card > .slot { flex: none; }
/* livre: moldura tracejada; a PRÓXIMA (onde o Refinar põe o lote) em dourado, com o fantasma do produto escolhido */
.refine-card.is-free { background-color: transparent; box-shadow: none; border: var(--px) dashed rgba(255, 255, 255, 0.24); }
.refine-card.is-next { border-color: var(--c-gold); background-color: rgba(224, 176, 64, 0.08); }
.refine-card .slot.is-ghost .item-icon, .refine-card .slot.is-ghost .slot-tier { opacity: 0.45; }
.refine-card-free { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refine-card.is-next .refine-card-free { color: var(--c-gold); }
.refine-card-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--px); flex: 1; min-width: 0; line-height: calc(10 * var(--px)); }
/* "12/50" + o selo "Exp 25%" passavam 2 px da borda do cartão (revisão de 2026-09-30): vão de 2 e o selo com respiro de 1 */
.refine-card-top { display: flex; align-items: center; gap: calc(2 * var(--px)); min-width: 0; white-space: nowrap; }
/* G2 — selo de estado: moldura + palavra curta (o molde `.codex-seal`) */
.refine-seal { flex: none; padding: 0 calc(1 * var(--px)); border: var(--px) solid currentColor; line-height: calc(8 * var(--px)); color: var(--c-text-dim); white-space: nowrap; }
.refine-card-text > .bar { align-self: stretch; min-width: calc(56 * var(--px)); }
.refine-card-text > .btn { flex: none; }
/* trancada: OU o nível que falta (selo vermelho com o cadeado — G5) OU o preço exato, nunca os dois */
.refine-card-need { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); padding: 0 calc(2 * var(--px)); border: var(--px) solid currentColor; line-height: calc(8 * var(--px)); white-space: nowrap; }
.refine-lock-ico { flex: none; width: calc(8 * var(--px)); height: calc(8 * var(--px)); background: var(--ui-ico_lock, none) center / 100% 100% no-repeat; image-rendering: pixelated; }
.refine-card-price { color: var(--c-gold); }
/* --- focus --- o cartão OCUPADO em DUAS LINHAS (docs/specs/focus.md §8; professions.md §11.7): [peça 20 | contagem e barra] em cima e
   [◈ N][Cancelar] embaixo — 20 + 2 + 16 = 38, o miolo do cartão de 42. SOB O MODIFICADOR `.is-stacked`: a Oficina reusa o `.refine-card`
   (`widgets/craftQueueStrip.js`) e só o liga na fatia dela; sem ele, nada aqui muda o cartão de uma linha. O Cancelar fica na borda
   direita com ou sem o botão do Foco (que some com o Foco desligado); o compacto ocupa o que sobra, centrado. */
.refine-card.is-stacked { flex-direction: column; align-items: stretch; justify-content: space-between; gap: calc(2 * var(--px)); }
.refine-card.is-stacked > .refine-card-head { display: flex; align-items: center; gap: calc(3 * var(--px)); height: calc(20 * var(--px)); min-width: 0; }
.refine-card.is-stacked > .refine-card-head > .item-art { flex: none; }
.refine-card.is-stacked .refine-card-text { gap: calc(2 * var(--px)); }
.refine-card.is-stacked .refine-card-top { overflow: hidden; }
.refine-card.is-stacked .refine-card-text > .bar { height: calc(4 * var(--px)); min-width: 0; }
.refine-card.is-stacked > .refine-card-actions { display: flex; align-items: center; gap: calc(2 * var(--px)); height: calc(16 * var(--px)); min-width: 0; }
.refine-card.is-stacked > .refine-card-actions > .btn { flex: none; }
.refine-card.is-stacked > .refine-card-actions > .btn:last-child { margin-left: auto; }
.refine-card.is-stacked > .refine-card-actions > .focus-btn.is-compact { flex: 1 1 auto; min-width: 0; justify-content: center; }

/* Pronto: mini-slots do estoque (a casinha `.bankmat-ico` do banco, com o selo de tier) + Coletar à direita */
.refine-ready { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(16 * var(--px)); min-width: 0; }
.refine-ready-label { flex: none; }
.refine-stock { display: flex; align-items: center; gap: calc(2 * var(--px)); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.refine-stock:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: var(--px); }
.refine-stock-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); flex: none; }
.refine-stock-sep, .refine-stock-more { flex: none; }
.refine-ready > .btn { flex: none; margin-left: auto; }

/* ---- Oficinas: linha "Só minha classe" e exp ----------------------------------------------------------------------- */
/* o rótulo de "Só minha classe" não quebra (a linha tem 12 de altura): quem encolhe é o seletor */
.craft-myclass > span { white-space: nowrap; }
.craft-exp { margin: calc(2 * var(--px)) 0; }
/* a linha de exp soma ~14 px ao detalhe: a janela `craft` cresceu 14 (436×272, P11 → a) e o Criar cabe sem rolar;
   o overflow fica só de rede de segurança para receitas com mais linhas */
.craft-detail-inner { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #575273 #12101c; }

/* ---- avaliação de UX, rodada 2 -------------------------------------------------------------------------------- */
/* Livro de receitas: barra à vista e corte no fim de uma linha inteira (a última linha saía fatiada ao meio pelo
   rodapé e parecia defeito de render). Mesmo molde de craft.css. */
.rb-list { padding-bottom: calc(6 * var(--px)); }
@supports selector(::-webkit-scrollbar) {
  .rb-list { scrollbar-width: auto; scrollbar-color: auto; }
  .rb-list::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .rb-list::-webkit-scrollbar-track { background: #12101c; }
  .rb-list::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
  .rb-list::-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á. */