/* Bancada de Reparo (docs/specs/durability.md D16). Tudo em px de ARTE (`calc(N * var(--px))`). 440 de janela = 432 de miolo:
   168 (fila) + 4 (vão) + 260 (detalhe). A fila rola e leva a marca `scroll-fade` na montagem (mecanismo único de
   css/scroll-fade.css — B74); o degradê NÃO é escrito aqui. */
.rp-body { display: flex; gap: calc(4 * var(--px)); align-items: flex-start; min-height: 0; }
.rp-left { width: calc(168 * var(--px)); flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; }
/* sem `overflow` aqui: quem faz a fila ROLAR é a classe `scroll-fade` (base.css) posta na montagem — uma folha que declara
   `overflow-y: auto` fora de scroll-fade.css reprova o B74 (client/tests/ui/scrollFade.test.js); ver PERGUNTAS.md P09b-2 */
.rp-list { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-height: 0; max-height: calc(212 * var(--px)); }
.rp-list.hidden { display: none; }
.rp-row { display: flex; align-items: center; gap: calc(3 * var(--px)); padding: calc(1 * var(--px)); background: transparent; border: var(--px) solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-row.is-selected { border-color: var(--c-gold); }
.rp-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* o nome QUEBRA em até duas linhas em vez de cortar numa: "Espada de Fer…" e "Armadura de R…" escondiam QUAL peça estava na fila
   (visto na prova da frente "bancadas", 2026-10-01; docs/UX-GRAMATICA.md §3 — nome próprio inteiro). Duas linhas de 10 + o % de 10
   cabem nos 36 do slot. */
.rp-row-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: calc(10 * var(--px));
}
.rp-row-pct { font-size: var(--text-1); }
.rp-empty { padding: calc(8 * var(--px)); }
.rp-detail { width: calc(260 * var(--px)); min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.rp-detail.hidden { display: none; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--px)); }
.rp-name { color: var(--c-gold); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* selo de estado (G2): moldura + uma palavra; a cor nunca vem sozinha — a palavra está dentro do selo */
.rp-state { font-size: var(--text-1); padding: 0 calc(2 * var(--px)); border: var(--px) solid currentColor; line-height: calc(9 * var(--px)); flex-shrink: 0; }
.rp-state.is-worn { color: var(--c-gold); }
.rp-state.is-broken { color: var(--c-danger); }
.rp-mats-head { display: flex; justify-content: space-between; margin-top: calc(2 * var(--px)); }
.rp-mats { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)); }
.rp-mat { display: flex; align-items: center; gap: calc(2 * var(--px)); }
/* tenho / preciso + ✔/✖ (a marca, nunca só a cor — ui-gameplay.md §8.7), na cor do material da Oficina (`craft.css › .craft-mat`) */
.rp-mat-mark { display: inline-block; width: calc(8 * var(--px)); margin-left: calc(2 * var(--px)); text-align: center; }
.rp-mat.is-ok .rp-mat-have { color: var(--c-ok); }
.rp-mat.is-missing .rp-mat-have { color: var(--c-danger); }
/* O material é um BOTÃO de consulta (pedido do dono, 2026-10-01 — a regra única de toda bancada e lote, ui-gameplay.md §0.4;
   `widgets/materialSlot.js › bindMaterialConsult`): clique = "Onde conseguir", botão direito = o menu de item. O realce é o do
   material da Oficina (`craft.css › .craft-mat[role='button']`): o slot acende como no hover da Mochila (o número não muda de
   cor: o vermelho dele é o "falta"); o foco de teclado é o contorno dourado. */
.rp-mat[role='button'] { cursor: pointer; }
.rp-mat[role='button']:hover > .slot,
.rp-mat[role='button']:focus-visible > .slot { border-image-source: url(../assets/ui/slots/slot_hover.png); }
.rp-mat:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: var(--px); }
/* o `.slot` nasce com `touch-action: none` (o arrasto da Mochila): aqui o toque longo abre o menu, e o dedo não arrasta nada */
.rp-mat > .slot { touch-action: auto; }
/* a fila rola: o `.slot` nasce com `touch-action: none` (o arrasto da Mochila) e o dedo não rolaria sobre o ícone */
.rp-row > .slot { touch-action: auto; }
.rp-all-text { flex: 1 1 auto; min-width: 0; }