/* Builds (docs/specs/loadouts.md §18; ui-gameplay.md §0.1) — `windows/loadouts.js`, 480 × 276 em (152, 46). Tudo aqui é px de
   ARTE (`calc(N * var(--px))`), como o resto da UI; o campo do Renomear é `.input` de `base.css` (B188).
   A CONTA (sem rodapé): miolo 468 × 246 = 276 − 16 de moldura − 14 do título; a coluna de conteúdos (136) + vão 4 + o cartão
   (324) = 464.
     coluna  6 linhas de 36 + 5 vãos de 2 = 226 (20 de folga); com 7 linhas (`.is-dense`, o Grupo Guerreiro na vaga 15)
             7 de 33 + 6 vãos de 2 = 243 (3 de folga) — 8 ou mais pedem outra forma: a coluna nunca rola (§18);
     cartão  cabeça 18 + 4 + peças 74 (2 × 36 + 2) + 4 + barra 36 + 4 + linha de aviso 10 + ações 22 no pé = 176 (o pé
             desce para o fim: `margin-top: auto`).
   No celular deitado (844 × 390, `--px` = 1 px CSS) a linha de 36 e o slot de 36 são o alvo do dedo; os botões têm 22.
   Ícone de item e de habilidade em 32 (1:1, o slot de 36 da Mochila e da barra do HUD): ampliação só por fator inteiro
   (ui-gameplay.md §8.7) — nada de 22 ou 26 px reduzindo a arte. */

.lo-body { display: flex; min-height: 0; }
.lo-cols { display: flex; gap: calc(4 * var(--px)); flex: 1; min-width: 0; min-height: 0; }

/* ---- a coluna de conteúdos (role=tablist, ↑/↓) ------------------------------------------------------------- */
.lo-tabs {
  width: calc(136 * var(--px));
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
}
.lo-tab {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(4 * var(--px));
  border: var(--px) solid transparent;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lo-tab:hover { background: rgba(255, 255, 255, 0.08); }
.lo-tab[aria-selected='true'] { background: rgba(224, 176, 64, 0.18); border-color: var(--c-gold); }
.lo-tab[aria-selected='true'] .lo-tab-name { color: var(--c-gold); }
.lo-tab:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.lo-tab-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--px)); }
.lo-tab-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: calc(10 * var(--px)); }
/* a 2.ª linha: o selo do estado ("Sua build", "Incompleta", o cadeado) ou a conta das Guardadas; sem nada, ela some */
.lo-tab-mark { display: flex; }
/* a prancheta (`ico_loadout`) = "tem build própria" — a mesma peça da linha Builds da gaveta */
.lo-tab-own { background-image: var(--ui-ico_loadout, none); }

/* Ícone 16 da série (`manifest.ui`), inerte: a palavra mora ao lado ou no `aria-label`. */
.lo-ico {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* Selo de ESTADO (docs/UX-GRAMATICA.md G2): moldura + palavra curta + cor, nunca frase. Neutro = estado em curso ("Sua build");
   ouro = a marca da lista de "Escolher peça…" ("Na build"); perigo = incompleta, ou o cadeado do conteúdo que ainda não
   abriu. "Build própria" é a peça das portas (`.build-seal`, windows.css), não um selo daqui. O fundo de perigo é o mais
   escuro da UI (o molde do `.req-seal` de craft.css: 4,6:1 sobre qualquer linha). */
.lo-seal {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  flex: none;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--c-text-dim);
  color: var(--c-text-dim);
  line-height: calc(8 * var(--px));
  white-space: nowrap;
}
.lo-seal.is-neutral { border-color: var(--c-text-dim); color: var(--c-text); }
.lo-seal.is-gold { border-color: var(--c-gold); color: var(--c-gold); }
.lo-seal.is-danger { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-field-bg); }
/* o "Build própria" da cabeça do cartão: a forma das portas, com a largura do que diz (a pista não vira listra) */
.lo-head > .lo-own-seal { flex: none; }
/* o corpo de uma confirmação com duas frases (o preço e a fila do PvP): uma por linha */
.lo-confirm { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
/* o FATO das Guardadas ("Só valem quando você as Veste."), com o porquê no gesto */
.lo-gfact { width: fit-content; color: var(--c-text-dim); line-height: calc(10 * var(--px)); }
/* o recado de quem chegou pelo "Ajustar a barra" da Torre: o caminho numa linha e a volta à Torre */
.lo-tower-note { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: none; color: var(--c-gold); }
.lo-tower-note-text { flex: 1; min-width: 0; line-height: calc(9 * var(--px)); }
.lo-tower-note > .btn { flex: none; }
.lo-seal-lock {
  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;
}
.lo-ratio { color: var(--c-text-dim); line-height: calc(8 * var(--px)); }

/* ---- o cartão (role=tabpanel) ---------------------------------------------------------------------------- */
.lo-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.lo-head { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(18 * var(--px)); flex: none; min-width: 0; }
.lo-head-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--c-gold); }
/* o FATO da cabeça ("Usa a sua build.", "A Exploração usa a sua build."): a cabeça diz o estado, não repete a linha acesa */
.lo-head-fact { min-width: 0; color: var(--c-text-dim); }
.lo-head-level { flex: none; color: var(--c-text-dim); }
.lo-back { flex: none; }
/* o Potencial do lutador (o número do servidor): o losango 9×9 do HUD e da Mochila, o número em ouro, a seta da comparação */
.lo-power { margin-left: auto; display: inline-flex; align-items: center; gap: calc(2 * var(--px)); flex: none; color: var(--c-gold); }
.lo-power-ico {
  flex: none;
  width: calc(9 * var(--px));
  height: calc(9 * var(--px));
  background: var(--ui-ico_power, none) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.lo-trend.is-up { color: var(--c-ok); }
.lo-trend.is-down { color: var(--c-danger); }

/* as 12 peças (2 fileiras de 6, o slot de 36 da Mochila) e, ao lado, as fichas de talento e atributo */
.lo-main { display: flex; align-items: flex-start; gap: calc(6 * var(--px)); flex: none; }
.lo-pieces { display: grid; grid-template-columns: repeat(6, calc(36 * var(--px))); gap: calc(2 * var(--px)); flex: none; }
/* "segue a sua build": a sua peça, esmaecida (a moldura e o selo de tier juntos — a peça inteira é "emprestada") */
.lo-piece.is-follow > .item-icon,
.lo-piece.is-follow > .slot-frame,
.lo-piece.is-follow > .slot-tier,
.lo-piece.is-empty > .slot-ghost { opacity: 0.4; }
/* a peça LEMBRADA que não vai lutar: apagada, cinza, com a borda de perigo (a cor nunca sozinha: o selo "Incompleta" e a
   linha do onde dizem o mesmo em palavra) */
.lo-piece.is-missing { outline: var(--px) solid var(--c-danger); outline-offset: calc(-1 * var(--px)); }
.lo-piece.is-missing > .item-icon,
.lo-piece.is-missing > .slot-frame,
.lo-piece.is-missing > .slot-ghost { opacity: 0.35; filter: grayscale(1); }
.lo-fichas { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-width: 0; }
.lo-ficha { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); height: calc(16 * var(--px)); align-self: flex-start; }
.lo-topup { align-self: flex-start; color: var(--c-gold); line-height: calc(10 * var(--px)); }

/* a barra da build: a vaga de 36 do HUD (a moldura do slot vazio), o ícone 32 da habilidade, o rank no canto ↘ e o AUTO no ↗ */
.lo-bar { display: flex; align-items: center; gap: calc(2 * var(--px)); flex: none; }
.lo-bar-cell {
  position: relative;
  flex: none;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border: calc(4 * var(--px)) solid transparent;
  border-image: url(../assets/ui/slots/slot_empty.png) 4 fill / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
}
.lo-bar-ico {
  position: absolute;
  left: calc(-2 * var(--px));
  top: calc(-2 * var(--px));
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.lo-bar-rank {
  position: absolute;
  right: calc(-3 * var(--px));
  bottom: calc(-4 * var(--px));
  line-height: calc(8 * var(--px));
  color: #fff;
  text-shadow: var(--px) var(--px) 0 #000;
}
.lo-bar-auto {
  position: absolute;
  right: calc(-2 * var(--px));
  top: calc(-2 * var(--px));
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  background: var(--ui-ico_auto, none) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.lo-bar-off { margin-left: calc(2 * var(--px)); color: var(--c-text-dim); }

/* as linhas de texto do cartão: onde está a peça que falta (perigo), o recibo e o erro */
.lo-missing { flex: none; line-height: calc(10 * var(--px)); color: var(--c-danger); }
.lo-msg { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: none; line-height: calc(10 * var(--px)); }
.lo-msg.is-ok { color: var(--c-gold); }
.lo-msg.is-error { color: var(--c-danger); }

/* as ações do estado, no pé do cartão; os botões nunca encolhem */
.lo-actions { display: flex; align-items: center; gap: calc(4 * var(--px)); margin-top: auto; flex: none; min-height: calc(26 * var(--px)); }
.lo-actions > .btn { flex: none; }
/* o DEDO acerta 26 px de altura com a caixa visível de 16 (o molde do `.bestiary-level > .btn::after` e da faixa do lobby: o alvo
   cresce, a moldura não) — nas ações do cartão, nas da lista das Guardadas e no recibo. Só na ALTURA: os botões já são largos, e o
   "Anterior" encostado na borda direita do cartão vazava 2 px para fora dela (o miolo da janela ganhava rolagem lateral). */
.lo-actions > .btn,
.lo-grow > .btn,
.lo-msg > .btn { position: relative; }
.lo-actions > .btn::after,
.lo-grow > .btn::after,
.lo-msg > .btn::after { content: ''; position: absolute; top: calc(-9 * var(--px)); bottom: calc(-9 * var(--px)); left: calc(-4 * var(--px)); right: calc(-4 * var(--px)); }
.lo-more { min-width: calc(20 * var(--px)); justify-content: center; }
.lo-wear-gold { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
/* os atalhos do personagem (o cartão de conteúdo SEM build — v3; eram do cartão da Exploração): botão SÓ de ícone, o molde de
   `.inventory-links` (windows.css). Eles ficam à esquerda e EMPURRAM os verbos ("↶ Anterior", "Salvar a atual") para a direita
   do pé — 4 × 22 + ↶ Anterior + Salvar a atual ≈ 270 de 324 */
.lo-links { display: flex; align-items: center; gap: calc(2 * var(--px)); flex: none; margin-right: auto; }
.lo-links > .lo-link { flex: none; padding: 0; gap: 0; }

/* ---- as Guardadas ---------------------------------------------------------------------------------------- */
.lo-glist { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.lo-grow { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(26 * var(--px)); padding: 0 calc(2 * var(--px)); }
.lo-grow > .btn { flex: none; }
/* o nome é a porta da folha da Guardada: uma LINHA de lista (a forma das linhas da coluna, não a moldura de um botão de ação),
   que ocupa a sobra da linha — Vestir e "…" ficam alinhados em coluna nas cinco vagas */
.lo-gopen {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
  height: calc(26 * var(--px));
  padding: 0 calc(4 * var(--px));
  border: var(--px) solid transparent;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lo-gopen:hover { background: rgba(255, 255, 255, 0.08); }
.lo-gopen:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.lo-gname { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lo-glabel { flex: 1; min-width: 0; padding: 0 calc(5 * var(--px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--c-text-dim); }
.lo-glevel { flex: none; color: var(--c-text-dim); }

/* ---- "Escolher peça…": a lista das peças que servem, com ícone e o nome inteiro ---------------------------- */
/* rolagem e degradê vêm do mecanismo único (`.scroll-fade`, base.css + scroll-fade.css): aqui só o teto */
.lo-pick-list { display: flex; flex-direction: column; gap: calc(2 * var(--px)); max-height: calc(192 * var(--px)); }
.lo-pick {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  width: 100%;
  min-height: calc(38 * var(--px));
  padding: var(--px) calc(2 * var(--px));
  border: var(--px) solid transparent;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lo-pick:hover { background: rgba(255, 255, 255, 0.08); }
.lo-pick.is-current { border-color: var(--c-gold); background: rgba(224, 176, 64, 0.12); }
/* a MARCADA (tocar mostra os números; "Escolher" confirma): o aro claro do foco, por cima do ouro da que está na build */
.lo-pick.is-armed { border-color: #fff5a8; background: rgba(255, 245, 168, 0.14); }
.lo-pick:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
/* em lista que rola, o slot deixa o dedo rolar (client/CLAUDE.md, "Ícone de item") */
.lo-pick > .slot { touch-action: auto; }
.lo-pick-name { flex: 1; min-width: 0; }
.lo-empty { color: var(--c-text-dim); }

/* ---- Renomear (modal) ------------------------------------------------------------------------------------ */
.lo-rename { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.lo-rename > .input { width: calc(160 * var(--px)); }
.lo-rename-hint { color: var(--c-text-dim); }

/* --- buildexp --- */
/* ---- `Sua build` nas portas (widgets/buildSeal.js; docs/specs/loadouts.md §13.6) ------------------------------------
   A escolha lembrada "A sua build": a build está salva, mas quem entra é a sua. Neutro (a moldura apagada do `.build-seal` de
   windows.css) e SEM a prancheta — ela diz "tem build própria que luta". A altura fica a do selo com ícone (16 + 2): trocar de
   `Build própria` para `Sua build` não pula a ficha embaixo. */
.build-seal.is-mine { min-height: calc(18 * var(--px)); padding: 0 calc(3 * var(--px)); color: var(--c-text-dim); }
/* O "Build própria" da cabeça do cartão com "A sua build" lembrada: a build existe e está guardada, mas NÃO entra — o mesmo selo,
   APAGADO (o texto e a prancheta), e sem o ◆ ao lado (revisão de 2026-10-03: aceso, ao lado da linha `Sua build`, se lia como o
   de quem entra). Quem diz quem entra é a linha da coluna. */
.lo-own-seal.is-aside { color: var(--c-text-dim); }
.lo-own-seal.is-aside > .build-seal-ico { opacity: 0.45; }

/* ---- "Qual build entra?" (widgets/buildPick.js; docs/specs/loadouts.md §13.4; docs/ux-casos.md §40) ----------------
   O modal no centro do palco (cabe em 844 × 390): duas OPÇÕES de 156 × 48 lado a lado — elas SÃO os botões (tocar entra) —,
   embaixo de cada uma o que ela leva FORA do botão (a consequência sob a salva; o que difere sob a sua) e, na fileira das
   ações, o interruptor "Não perguntar de novo" à esquerda do Cancelar.
   A CONTA (px de arte): 2 × 156 + vão 4 = 316 + o recuo 2 × 4 do corpo (`.modal > .window-body`) = 324 + a moldura do painel
   2 × 6 = 336 de largura; título + opções 48 + vão 4 + a fileira de baixo 16 + ações (6 + 17) + moldura = 115 de altura —
   medido no celular deitado (844 × 390) e no PC (1280 × 720), no centro do palco (x 152…488, y 122…238 de 640 × 360). */
.bp-body { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.bp-options { display: flex; gap: calc(4 * var(--px)); }
.bp-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--px)); flex: none; width: calc(156 * var(--px)); min-width: 0; }
/* a opção: rótulo em cima, o ◆ (e a faixa, quando difere) embaixo — os dois à esquerda, como o cartão de uma build */
.btn.bp-opt {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: calc(3 * var(--px));
  width: 100%;
  min-width: calc(156 * var(--px));
  min-height: calc(48 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  text-align: left;
}
.btn.bp-opt > .bp-row { display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
/* a linha do rótulo tem a altura do ícone 16 nas DUAS opções: o brasão da classe tem 12, e sem isto o ◆ da sua build subia
   2 px em relação ao da salva (visto no celular deitado e no PC) */
.btn.bp-opt > .bp-opt-name { min-height: calc(16 * var(--px)); }
.bp-opt-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ícone 16 da série (`ico_loadout`) ou o brasão da classe 12 × 12 (`ico_class_<key>`, a série do Ranking) — 1:1, sem escala */
.bp-ico { flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.bp-ico.is-class { width: calc(12 * var(--px)); height: calc(12 * var(--px)); margin: 0 calc(2 * var(--px)); }
/* o losango 9 × 9 do Potencial (o mesmo do HUD e da Mochila) */
.bp-power-ico { flex: none; width: calc(9 * var(--px)); height: calc(9 * var(--px)); background: var(--ui-ico_power, none) center / 100% 100% no-repeat; image-rendering: pixelated; }
/* o selo da faixa (G2): a moldura de 1 px do `.hud-seal` com a cor da faixa, sobre o fundo dos campos (lê-se também no hover
   claro do botão), encostado à direita do ◆ */
.bp-opt-band {
  margin-left: auto;
  flex: none;
  box-sizing: border-box;
  height: calc(10 * var(--px));
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  background: var(--c-field-bg);
  line-height: calc(8 * var(--px));
  white-space: nowrap;
}
/* `Fixa até sair` / `Incompleta`: o `.build-seal` das portas, sem a prancheta (a consequência, não a build); 16 de altura, a
   da fileira "Diferem" ao lado — as duas palavras na mesma linha de base */
.build-seal.bp-fixed { padding: 0 calc(3 * var(--px)); min-height: calc(16 * var(--px)); }
/* "Diferem [bolsa] [habilidades]": a palavra apagada e os ícones 16 dos atalhos do cartão de Builds (§19.4) */
.bp-diff { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); min-height: calc(16 * var(--px)); color: var(--c-text-dim); }
.bp-axis { flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.bp-axis-word { flex: none; color: var(--c-text); }
/* o interruptor na fileira das ações, empurrando o Cancelar para a direita */
.modal-actions > .bp-remember { margin-right: auto; }

/* ---- "Ao entrar…" (o mesmo widget, `openPickPrefs`; §13.5) — 292 × 82 (medido): as três opções numa fileira; a atual AFUNDADA
   (a peça `pressed` do botão secundário, a de um botão de alternar ligado) com a moldura de 1 px de ouro (`aria-pressed`), o
   texto na cor de sempre — o ouro sobre o miolo claro do botão caía a ~1,5:1 (visto no celular deitado) —, e a linha em
   perigo da fila do PvP embaixo */
.bp-picks { display: flex; gap: calc(4 * var(--px)); }
.bp-pick { flex: 1 1 0; min-width: calc(88 * var(--px)); min-height: calc(22 * var(--px)); }
.btn.bp-pick[aria-pressed='true'] { border-image-source: url(../assets/ui/buttons/btn_secondary.pressed.png); outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.bp-queue { margin: 0; line-height: calc(10 * var(--px)); }

/* --- buildexp (client-janela-builds) --- */
/* ---- a coluna DENSA de Builds (docs/specs/loadouts.md §18; `loadoutView.loadoutRows(…).dense`) --------------------------------
   Com 7 linhas (o Grupo Guerreiro na vaga 15) as de 36 não cabem (7 × 36 + 6 × 2 = 264 > 246 do miolo): elas passam a 33 —
   7 × 33 + 6 × 2 = 243, o maior alvo de toque que cabe (decisão do plano de 2026-10-03 sobre os 32 do projeto). Dentro da
   linha: o nome (10) + vão 2 + o selo (8 + a moldura 2) = 22 dos 31 de miolo — as duas linhas e o ícone 16 seguem inteiros. */
.lo-tabs.is-dense .lo-tab { height: calc(33 * var(--px)); }