/* character.css — a frente "personagem" da v2 (docs/specs/ui-v2.md §6.3): Habilidades, Atributos, Talentos, Builds e Inspecionar,
   as janelas clássicas HOSPEDADAS no modo fluido (`windowSheet › fluid`: o `--px` é o pixel de arte da v2 e a janela ocupa a folha).
   Inerte sem `html.ui-v2`. O que muda de lugar na instância é de `ui/v2/hostedCharacter.js`; aqui, só o arranjo, o alvo do dedo (46,
   `--v2-target`) e a letra (16 no corpo, 13 na secundária). A conta de cada arranjo é a do iPhone deitado no app (folha de 763 × 288 sem
   entalhe, 675 × 288 com ele) e a do iPhone SE (651 × 287). */

/* ================================================================================================================================
   MOCHILA EM ABAS (`windowSheet › split`, `hostedWindows.js › inventoryTabs`): onde ela inteira só caberia abaixo do pixel da v2,
   "Equipamento" (boneco, vagas, números, atalhos do personagem) e "Mochila" (grade, páginas e as ações dela), uma por vez
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-inventory.is-split[data-v2-tab='bag'] > .inventory-body > :first-child,
html.ui-v2 .v2-hosted-inventory.is-split[data-v2-tab='equip'] > .inventory-body > :last-child { display: none; }
html.ui-v2 .v2-hosted-inventory.is-split[data-v2-tab='bag'] > .inventory-footer > :is(.equip-sheet, .inventory-links),
html.ui-v2 .v2-hosted-inventory.is-split[data-v2-tab='equip'] > .inventory-footer > :is(#inv-count, #inv-bulk-sell, #inv-sort, .inventory-footer-row) { display: none; }
#ui2 .v2-sheet-head-tools[data-v2-tab='equip'] :is(.window-title-tabs, #inv-stash-mats) { display: none; }
/* dividida, o seletor toma o lugar do título (ele já diz "Mochila") e encosta no ◀; as páginas ficam à direita */
#ui2 .v2-sheet-head:has(.v2-inv-tabs:not(.hidden)) > .v2-sheet-title { display: none; }
#ui2 .v2-sheet-head:has(.v2-inv-tabs:not(.hidden)) > .v2-sheet-actions,
#ui2 .v2-sheet-head:has(.v2-inv-tabs:not(.hidden)) .v2-sheet-head-tools { flex: 1; min-width: 0; }
#ui2 .v2-inv-tabs { display: flex; gap: calc(4 * var(--u)); margin-right: auto; }
#ui2 .v2-inv-tabs.hidden { display: none; }
#ui2 .v2-inv-tab { padding: 0 calc(12 * var(--u)); }
/* a aba escolhida no desenho da aba de página ao lado (fundo escuro, borda e letra de ouro): a letra de ouro sobre o botão cinza dava
   1,6 : 1 de contraste, e 1,2 : 1 logo depois do toque (revisão P1-08) */
#ui2 .v2-inv-tab[aria-pressed='true'],
#ui2 .v2-inv-tab[aria-pressed='true']:hover,
#ui2 .v2-inv-tab[aria-pressed='true']:active {
  border-image: none;
  border: calc(2 * var(--u)) solid var(--c-gold);
  background: var(--c-field-bg);
  color: var(--c-gold);
}

/* ================================================================================================================================
   HABILIDADES — três colunas: as grades (5 por linha; 7 com folga), o detalhe e a BARRA de pé (a vaga e o "Quando usar" ao lado)
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-abilities { container-type: inline-size; }
html.ui-v2 .v2-hosted-abilities > .ab-footer { display: none; }
html.ui-v2 .v2-hosted-abilities .abilities-body { gap: var(--v2-gap); overflow: hidden; }
html.ui-v2 .v2-hosted-abilities .ab-recado { min-height: var(--v2-target); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-abilities .ab-recado > span { line-height: 1.25; }
html.ui-v2 .v2-hosted-abilities .ab-recado > .btn { min-height: var(--v2-target); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-abilities .ab-mid { gap: calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-left { order: 1; width: auto; gap: calc(6 * var(--u)); overflow-y: auto; overflow-x: hidden; }
html.ui-v2 .v2-hosted-abilities .ab-sec-head {
  height: auto;
  min-height: calc(16 * var(--u));
  line-height: calc(16 * var(--u));
  font-size: var(--v2-text-small);
}
html.ui-v2 .v2-hosted-abilities .ab-grid { grid-template-columns: repeat(5, calc(36 * var(--px))); gap: calc(2 * var(--px)); }
html.ui-v2 .v2-hosted-abilities #ab-grid-active,
html.ui-v2 .v2-hosted-abilities #ab-grid-passive { height: auto; }
@container (min-width: 880px) {
  html.ui-v2 .v2-hosted-abilities .ab-grid { grid-template-columns: repeat(7, calc(36 * var(--px))); }
}
/* os cantos do ladrilho na letra secundária (na de 16 o "Nv 15" passava da casa e se sobrepunha à vizinha) */
html.ui-v2 .v2-hosted-abilities .ab-tile-badge,
html.ui-v2 .v2-hosted-abilities .ab-tile-slot,
html.ui-v2 .v2-hosted-abilities .ab-cell-num { font-size: var(--v2-text-small); line-height: 1; }
/* o detalhe: o nome, a descrição e os números com a entrelinha da letra que têm (a de 9 px de arte sobrepunha as linhas) */
html.ui-v2 .v2-hosted-abilities .ab-detail { order: 2; gap: var(--v2-gap); padding-left: calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-dscroll { min-height: 0; overflow-y: auto; gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-dhead { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-abilities .ab-det-name { font-size: var(--v2-text); line-height: 1.25; }
html.ui-v2 .v2-hosted-abilities .ab-det-meta { font-size: var(--v2-text-small); line-height: 1.25; }
html.ui-v2 .v2-hosted-abilities .ab-desc,
html.ui-v2 .v2-hosted-abilities .ab-det-effects { font-size: calc(15 * var(--u)); line-height: 1.3; }
html.ui-v2 .v2-hosted-abilities .ability-card-stats { font-size: calc(15 * var(--u)); line-height: 1.4; column-gap: calc(10 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-msg { font-size: var(--v2-text-small); line-height: 1.25; white-space: normal; }
/* as ações presas embaixo: alvo comum, e o "Máx +N" (gasta vários pontos num toque) a 16 do "Subir +1" */
html.ui-v2 .v2-hosted-abilities .ab-dactions { gap: var(--v2-gap); min-height: var(--v2-target); }
html.ui-v2 .v2-hosted-abilities .ab-dactions > .btn {
  --px: var(--ap);
  min-height: var(--v2-target);
  padding: 0 calc(10 * var(--u));
  font-size: var(--v2-text);
}
/* o "Máx +N" a 16 das DUAS vizinhas (o vão de 8 da fila + 8 de cada lado): o dedo que erra o "Subir +1" ou o "Mover" não gasta tudo */
html.ui-v2 .v2-hosted-abilities #ab-rankup-max { margin-inline: var(--v2-gap); }
/* os NÚMEROS da habilidade antes da descrição: no SE as ações empilhadas deixam pouca altura, e é com os números que se decide subir */
html.ui-v2 .v2-hosted-abilities .ab-dhead { order: 0; }
html.ui-v2 .v2-hosted-abilities .ability-card-stats { order: 1; }
html.ui-v2 .v2-hosted-abilities .ab-det-effects { order: 2; }
html.ui-v2 .v2-hosted-abilities .ab-desc { order: 3; }
/* a BARRA: uma coluna de cinco vagas (a ordem é a prioridade do automático); cada vaga com o "Quando usar" ao lado */
html.ui-v2 .v2-hosted-abilities #ab-bar-sec { order: 3; flex: none; width: calc(168 * var(--u)); min-height: 0; gap: calc(4 * var(--u)); overflow-y: auto; }
/* o cabeçalho da barra numa linha só, sempre: armada, "Escolha o slot" toma o lugar de "Barra" e a "Prioridade 1→5" sai — quebrar em
   duas linhas descia as cinco vagas 21 px entre o 1.º e o 2.º toque, e o dedo caía na vaga de cima (revisão P1-12) */
html.ui-v2 .v2-hosted-abilities #ab-bar-sec > .ab-sec-head { flex-wrap: nowrap; overflow: hidden; column-gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-abilities #ab-bar-sec .ab-bar-guide:not(.hidden) ~ .ab-bar-hint { display: none; }
html.ui-v2 .v2-hosted-abilities #ab-bar-sec .ab-bar-guide { overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .v2-hosted-abilities .ab-bar { flex-direction: column; gap: calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-cell { flex: none; flex-direction: row; align-items: center; gap: calc(6 * var(--u)); width: 100%; }
html.ui-v2 .v2-hosted-abilities .ab-cell-cond {
  --px: var(--ap);
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  min-height: var(--v2-target);
  padding: 0 calc(6 * var(--u));
  font-size: var(--v2-text-small);
  line-height: 1.2;
  text-align: left;
}
/* a folha "Quando usar" cobre as grades e o detalhe; a barra fica à vista (a vaga em edição acesa) */
html.ui-v2 .v2-hosted-abilities .ab-sheet {
  right: calc(180 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: var(--v2-gap);
  overflow-y: auto;
}
html.ui-v2 .v2-hosted-abilities .ab-cond-title { grid-column: 1 / -1; height: auto; line-height: 1.25; font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-abilities .ab-cond-list { grid-column: 1 / -1; grid-auto-rows: var(--v2-target); gap: calc(6 * var(--u)); }
/* a resposta inteira, em até duas linhas ("Sem inimigo por perto", "Enquanto o inimigo prepara um golpe") */
html.ui-v2 .v2-hosted-abilities .ab-cond-opt {
  --px: var(--ap);
  height: var(--v2-target);
  font-size: calc(15 * var(--u));
  line-height: 1.15;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
html.ui-v2 .v2-hosted-abilities .ab-cond-valuerow { grid-column: 1; grid-row: 3; gap: var(--v2-gap); min-height: var(--v2-target); }
html.ui-v2 .v2-hosted-abilities .ab-cond-step { --px: var(--ap); min-width: var(--v2-target); min-height: var(--v2-target); font-size: calc(20 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-cond-value,
html.ui-v2 .v2-hosted-abilities .ab-cond-range { font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-abilities .ab-cond-actions { grid-column: 2; grid-row: 3; align-self: center; gap: var(--v2-gap); margin: 0; }
html.ui-v2 .v2-hosted-abilities .ab-cond-actions > .btn { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); padding: 0 calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-abilities .ab-cond-phrase { grid-column: 1 / -1; font-size: var(--v2-text-small); line-height: 1.3; }
/* o cabeçalho da folha: os pontos e o "Redistribuir" (pago, pergunta antes) */
html.ui-v2 .v2-sheet-abilities .abilities-points { font-size: var(--v2-text); margin: 0; }
html.ui-v2 .v2-sheet-abilities #ab-reset { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); padding: 0 calc(12 * var(--u)); }

/* ================================================================================================================================
   ATRIBUTOS — uma linha de 52 por atributo, o − e o + de 46; o rodapé na coluna do polegar (o Aplicar embaixo, guardado contra o
   toque duplo em `hostedCharacter.js`; no painel de reset, o "Pagar e devolver" acima e o Cancelar no canto)
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-attributes .attr-body { gap: var(--v2-gap); padding: 0; font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-attributes .attr-head { min-height: calc(32 * var(--u)); gap: var(--v2-gap); flex-wrap: wrap; }
html.ui-v2 .v2-hosted-attributes .attr-list { gap: calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-row { padding: 0 calc(4 * var(--u)); }
/* a conta do iPhone SE (475 de corpo ao lado da coluna de 168): ícone 21 + nome 92 + valor 32 + selo ~90 + ícones ~70 + − 46 + + 46
   + vãos 6 × 8 = 445 — o − e o + nunca encolhem; quem cede é o nome do que o atributo alimenta (os ícones) */
html.ui-v2 .v2-hosted-attributes .attr-row-main { min-height: calc(52 * var(--u)); gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-name { min-width: calc(92 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-value { min-width: calc(32 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-pending:empty { min-width: 0; }
html.ui-v2 .v2-hosted-attributes .attr-pending:not(:empty),
html.ui-v2 .v2-hosted-attributes .attr-take { min-width: calc(30 * var(--u)); }
/* os ícones do que o atributo alimenta abrem a dica no toque: a fila inteira é o alvo */
html.ui-v2 .v2-hosted-attributes .attr-feeds { flex: 0 1 auto; min-width: 0; min-height: var(--v2-target); gap: calc(2 * var(--u)); padding: 0 calc(2 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-btn {
  --px: var(--ap);
  flex: none;
  min-width: var(--v2-target);
  min-height: var(--v2-target);
  font-size: calc(22 * var(--u));
}
html.ui-v2 .v2-hosted-attributes .attr-btn + .attr-btn { margin-left: calc(4 * var(--u)); }
/* mais estreito que o SE (o corpo abaixo de 470 ao lado da coluna): os ícones do que o atributo alimenta saem (o nome leva a mesma
   frase no toque) e, abaixo de 400, o selo "principal" — o − e o + nunca saem da tela */
html.ui-v2 .v2-hosted-attributes .attr-body { container-type: inline-size; }
@container (max-width: 470px) {
  html.ui-v2 .v2-hosted-attributes .attr-row .attr-feeds { display: none; }
}
@container (max-width: 400px) {
  html.ui-v2 .v2-hosted-attributes .attr-row .attr-seal { display: none; }
}
html.ui-v2 .v2-hosted-attributes .attr-preview-rows { gap: calc(4 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-hint,
html.ui-v2 .v2-hosted-attributes .attr-msg { font-size: var(--v2-text-small); line-height: 1.3; }
html.ui-v2 .v2-hosted-attributes .attr-msg > .btn { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-attributes .attr-footer-group:not(.hidden) { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: stretch; gap: var(--v2-gap); }
/* a frase da janela no topo da coluna (`hostedCharacter.js › attributesLayout`): armada, em ouro, logo acima do botão que confirma */
html.ui-v2 .v2-hosted-attributes .attr-footer > .attr-hint { flex: none; font-size: var(--v2-text-small); line-height: 1.3; }
/* o rótulo inteiro ("Confirmar e aplicar", "Pagar e devolver") em até duas linhas na coluna de 168 */
html.ui-v2 .v2-hosted-attributes .attr-footer .btn {
  --px: var(--ap);
  min-height: var(--v2-target);
  font-size: var(--v2-text);
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  white-space: normal;
  line-height: 1.15;
}
html.ui-v2 .v2-hosted-attributes .attr-footer .attr-grow { order: 0; flex: 1; }
html.ui-v2 .v2-hosted-attributes #attr-reset-open { order: -1; }
html.ui-v2 .v2-hosted-attributes #attr-reset-pay { order: 1; }
html.ui-v2 .v2-hosted-attributes #attr-reset-back { order: 2; margin-top: var(--v2-gap); }
/* as abas Pontos | Detalhes no cabeçalho da folha (os `titleButtons`): o alvo comum de 46 vem de v2.css; aqui, a aba na largura da
   palavra e não na altura de 12 da barra de título clássica */
#ui2 .v2-sheet-head-tools .attr-tabs { gap: calc(4 * var(--u)); margin-right: calc(8 * var(--u)); }
#ui2 .v2-sheet-head-tools .attr-tabs > .tab { height: auto; padding: 0 calc(12 * var(--u)); }
/* o alvo esticado da aba baixa clássica (`attributes.css`, o `::after` de 24) não vem: aqui a aba já tem o alvo de 46 */
#ui2 .v2-sheet-head-tools .attr-tabs > .tab::after { content: none; }
/* a aba Detalhes só lê: sem o rodapé (ele sai nesta aba), a coluna do polegar não reserva os 168 e as 4 colunas ocupam a folha.
   A conta do iPhone deitado (folha de 288 de altura): a fila dos atributos 32 + 8 + cabeçalho 20 + 8 linhas de 24 + 7 × 2 = 266; na
   largura do SE (651), 4 colunas de ~150: ícone 21 + 6 + "1.234.567" em 15 (~70) */
html.ui-v2 .v2-hosted-attributes.window.is-fluid.is-side:has(> .attr-body.is-details) { grid-template-columns: minmax(0, 1fr); }
html.ui-v2 .v2-hosted-attributes .attr-details { gap: var(--v2-gap); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-det-primary { min-height: calc(32 * var(--u)); gap: calc(24 * var(--u)); padding: 0 calc(4 * var(--u)) calc(4 * var(--u)); border-bottom-width: calc(1 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-det-groups { column-gap: calc(16 * var(--u)); padding: 0 calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-det-group { gap: calc(2 * var(--u)); }
html.ui-v2 .v2-hosted-attributes .attr-det-head { min-height: calc(20 * var(--u)); line-height: calc(20 * var(--u)); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-attributes .attr-det-line { min-height: calc(24 * var(--u)); gap: calc(6 * var(--u)); }

/* ================================================================================================================================
   TALENTOS — a vista da árvore no pixel do PALCO (a câmera converte o dedo por ele; abre no degrau Perto, nó de 52), o painel ao
   lado e o rodapé embaixo
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-talents .tal-win { gap: calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-view { --px: var(--v2-stage-px); }
html.ui-v2 .v2-hosted-talents .tal-zoom,
html.ui-v2 .v2-hosted-talents .tal-lock { top: calc(4 * var(--u)); gap: calc(6 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-zoom { right: calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-lock { left: calc(4 * var(--u)); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-talents .tal-zoom-btn { --px: var(--ap); width: var(--v2-target); min-height: var(--v2-target); font-size: calc(22 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-rank { font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-talents .tal-side { gap: calc(6 * var(--u)); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-overview,
html.ui-v2 .v2-hosted-talents .tal-detail { gap: calc(8 * var(--u)); line-height: 1.3; }
html.ui-v2 .v2-hosted-talents .tal-detail-bar { min-height: var(--v2-target); gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-talents .tal-node-name { font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-talents .tal-step-row { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-talents .tal-step-btn { --px: var(--ap); min-height: var(--v2-target); min-width: calc(64 * var(--u)); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-talents .tal-node-head,
html.ui-v2 .v2-hosted-talents .tal-sum-head { min-height: var(--v2-target); gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-talents .tal-spec { min-height: calc(52 * var(--u)); padding: calc(4 * var(--u)); column-gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-talents .tal-spec-seal { font-size: var(--v2-text-small); height: auto; line-height: 1.1; }
html.ui-v2 .v2-hosted-talents .tal-passive { width: var(--v2-target); height: var(--v2-target); }
html.ui-v2 .v2-hosted-talents .tal-passive-icon { left: calc((46 * var(--u) - 16 * var(--px)) / 2); top: calc((46 * var(--u) - 16 * var(--px)) / 2); }
html.ui-v2 .v2-hosted-talents .tal-sum-grid { gap: calc(4 * var(--u)) calc(10 * var(--u)); }
html.ui-v2 .v2-hosted-talents .tal-footer-group:not(.hidden) { gap: var(--v2-gap); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-talents .tal-footer .btn { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); padding: 0 calc(12 * var(--u)); }
/* no reset: o "Pagar e redefinir" à esquerda, o Cancelar no canto do polegar, 16 entre eles */
html.ui-v2 .v2-hosted-talents #tal-reset-pay { order: 1; }
html.ui-v2 .v2-hosted-talents #tal-reset-back { order: 2; margin-left: var(--v2-gap); }

/* ================================================================================================================================
   BUILDS — a coluna de conteúdos com linhas de 46 e o cartão no pixel da v2 (peças e barra de 48); as ações com o alvo comum
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-loadouts .lo-cols { gap: calc(12 * var(--u)); }
html.ui-v2 .v2-hosted-loadouts .lo-tabs { width: calc(176 * var(--u)); gap: calc(2 * var(--u)); overflow-y: auto; }
html.ui-v2 .v2-hosted-loadouts .lo-tab { height: auto; min-height: var(--v2-target); padding: calc(2 * var(--u)) calc(8 * var(--u)); gap: var(--v2-gap); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-loadouts .lo-tab-name { line-height: 1.2; }
html.ui-v2 .v2-hosted-loadouts .lo-seal,
html.ui-v2 .v2-hosted-loadouts .lo-ratio,
html.ui-v2 .v2-hosted-loadouts .lo-gfact,
html.ui-v2 .v2-hosted-loadouts .lo-missing,
html.ui-v2 .v2-hosted-loadouts .lo-msg,
html.ui-v2 .v2-hosted-loadouts .lo-topup { font-size: var(--v2-text-small); line-height: 1.25; }
html.ui-v2 .v2-hosted-loadouts .lo-card { gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-loadouts .lo-head { height: auto; min-height: calc(32 * var(--u)); font-size: var(--v2-text); gap: var(--v2-gap); }
html.ui-v2 .v2-hosted-loadouts .lo-head .btn { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-loadouts .lo-ficha { height: auto; min-height: calc(20 * var(--u)); font-size: var(--v2-text-small); }
html.ui-v2 .v2-hosted-loadouts .lo-actions { min-height: var(--v2-target); gap: var(--v2-gap); flex-wrap: wrap; }
html.ui-v2 .v2-hosted-loadouts .lo-actions .btn { --px: var(--ap); min-height: var(--v2-target); min-width: var(--v2-target); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-loadouts .lo-links { gap: calc(6 * var(--u)); }
/* a ação principal ("Salvar a atual", "Vestir") no canto do polegar e o "…" (Limpar, Renomear, Apagar) antes dela (revisão P1-14) */
html.ui-v2 .v2-hosted-loadouts .lo-actions > .lo-more { order: 1; }
html.ui-v2 .v2-hosted-loadouts .lo-actions > :not(.lo-links):not(.lo-more) { order: 2; }
html.ui-v2 .v2-hosted-loadouts .lo-glist { gap: calc(4 * var(--u)); }
html.ui-v2 .v2-hosted-loadouts .lo-grow { min-height: var(--v2-target); gap: var(--v2-gap); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-loadouts .lo-grow .btn,
html.ui-v2 .v2-hosted-loadouts .lo-gopen { --px: var(--ap); min-height: var(--v2-target); min-width: var(--v2-target); }
html.ui-v2 .v2-hosted-loadouts .lo-pick { min-height: var(--v2-target); font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-loadouts .lo-rename .btn { --px: var(--ap); min-height: var(--v2-target); font-size: var(--v2-text); }
html.ui-v2 .v2-hosted-loadouts .lo-rename .input { min-height: var(--v2-target); font-size: var(--v2-text); }

/* ================================================================================================================================
   INSPECIONAR — duas colunas: quem é (com o clã, a presença e o cadeado, que eram o rodapé) e o boneco com as vagas de 48
   ================================================================================================================================ */
html.ui-v2 .v2-hosted-inspect .inspect-layout { height: 100%; }
html.ui-v2 .v2-hosted-inspect .inspect-card { flex-direction: row; align-items: center; justify-content: center; gap: calc(24 * var(--u)); min-height: 100%; }
html.ui-v2 .v2-hosted-inspect .inspect-head { flex: 0 1 calc(240 * var(--u)); height: auto; min-width: 0; gap: var(--v2-gap); }
/* a placa do nome (a faixa entre fios de ouro) na largura da coluna, não na da janela clássica */
html.ui-v2 .v2-hosted-inspect .inspect-plate { width: 100%; height: auto; min-height: calc(30 * var(--u)); }
html.ui-v2 .v2-hosted-inspect .inspect-name { max-width: 90%; font-size: var(--v2-text-title); line-height: 1.3; }
html.ui-v2 .v2-hosted-inspect .inspect-line,
html.ui-v2 .v2-hosted-inspect .inspect-who { flex-wrap: wrap; justify-content: center; font-size: calc(15 * var(--u)); line-height: 1.3; }
html.ui-v2 .v2-hosted-inspect .inspect-title { font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-inspect .inspect-footer { flex-direction: column; align-items: center; gap: var(--v2-gap); margin: 0; font-size: calc(15 * var(--u)); }
html.ui-v2 .v2-hosted-inspect .inspect-footer > .footer-spacer { display: none; }
/* o cadeado da privacidade abre a frase no toque: o alvo é a peça de 46 em volta dele (sem a pista pontilhada, que cairia 17 px abaixo
   do ícone, sob o nada — revisão P1-14) */
html.ui-v2 .v2-hosted-inspect .inspect-ico.is-lock { box-sizing: content-box; padding: calc((46 * var(--u) - 8 * var(--px)) / 2); background-origin: content-box; background-clip: content-box; }
#ui2 .v2-hosted-inspect .inspect-ico.is-lock.has-more { border-bottom: 0; }