/* clan.css — janela de clã (js/ui/windows/clan.js; design de clãs §5.3) e o selo de emblema
   (js/ui/widgets/clanEmblem.js). Dona: trilha de UI de clãs.
   Geometria da janela: 440×258 externos → 424×228 de corpo. Abas (20) | painel da aba (204).
   Medidas em px de arte: calc(N * var(--px)); nada de transform em texto; ampliação de arte só por fator inteiro. */

/* ---- moldura e abas ------------------------------------------------------------------------------------------ */
.clan-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* devolve os 2 px que a `.window-body` toma da faixa da moldura: sem isto o rótulo do `toggle` da busca e a coluna
     "Visto" da lista encostam no ornamento da janela */
  padding: 0 calc(2 * var(--px));
  overflow: hidden;
}
/* S13/B13: o líder de um clã tem NOVE abas (Visão geral · Membros · Pedidos · Chat · Cofre · Armazém · Guerra ·
   Permissões · Procurar) e elas somam ~466 px de arte numa fileira de 420 — "Procurar" saía cortada pela borda da
   janela, e com o selo "1" em Pedidos a conta ainda piorava. A fileira passa a QUEBRAR: nenhuma aba fica escondida
   nem truncada, e as duas fileiras cabem nos 228 do corpo (12 + 2 + 12 = 26, contra os 204 que sobram para o painel).
   Encurtar rótulo não resolvia: faltavam ~46 px, e "Permiss…" não é rótulo. */
.clan-tabs {
  flex-shrink: 0;
  flex-wrap: wrap;
  row-gap: calc(2 * var(--px));
  margin-bottom: calc(2 * var(--px));
}
/* B71: aqui morava a 4.ª exceção de `top` do balão de fala (`top: 50`, a conta das duas fileiras de abas do clã).
   Ela sumiu junto com as outras três, e desde 2026-09-30 a fala do NPC nem aparece mais nas janelas (ui-gameplay.md §7):
   não há conta de fileira para acertar. */
/* aba mais estreita que o padrão: com clã são 5 abas em 424 px */
.clan-tab {
  min-height: calc(12 * var(--px));
  padding: 0 calc(3 * var(--px));
  gap: calc(2 * var(--px));
}
.clan-tabs .tab:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
/* selo da aba (candidaturas, não lidas, convites): irmão do rótulo, nunca um elemento interativo dentro do botão */
.clan-tab-badge {
  min-width: calc(8 * var(--px));
  padding: 0 calc(1 * var(--px));
  background: var(--c-danger);
  color: #fff;
  text-align: center;
  line-height: calc(8 * var(--px));
}

.clan-panes {
  position: relative;
  flex: 1;
  min-height: 0;
}
.clan-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  overflow: hidden;
}

/* Painel rebaixado com rolagem própria: o `::before` do `.panel-inset` (inset −4) viraria área rolável se a rolagem
   ficasse no próprio painel — mesmo arranjo da lista de receitas (craft.css). */
.clan-list { flex: 1; min-height: 0; }
.clan-box { flex: none; }
.clan-scroll {
  position: absolute;
  inset: calc(-4 * var(--px));
  padding: calc(1 * var(--px)) calc(2 * var(--px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
@supports selector(::-webkit-scrollbar) {
  .clan-scroll { scrollbar-width: auto; scrollbar-color: auto; }
  .clan-scroll::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .clan-scroll::-webkit-scrollbar-track { background: #12101c; }
  .clan-scroll::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
}
.clan-section { flex: none; line-height: calc(10 * var(--px)); }
.clan-empty { padding: calc(2 * var(--px)) 0; }

/* ---- selo de emblema (16×16 recortado da cor do clã) ---------------------------------------------------------- */
.clan-emblem {
  display: inline-block;
  flex: none;
  background-color: var(--clan-color, var(--c-gold));
  -webkit-mask-image: var(--clan-emblem, none);
  mask-image: var(--clan-emblem, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  image-rendering: pixelated;
}
/* sem a arte no manifesto: quadrado liso na cor do clã com um aro escuro (nunca um vazio) */
.clan-emblem.is-missing {
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: inset 0 0 0 var(--px) rgba(0, 0, 0, 0.6);
}

/* ---- campos --------------------------------------------------------------------------------------------------- */
/* B188: era uma cópia literal do `.input`, com UMA diferença que ninguém quis — o placeholder em #5a5a6a, o mesmo
   cinza que a própria `auth.css` tinha corrigido por contraste (~2,6:1). O campo agora é `.input` (base.css); aqui
   fica só a largura de cada caixa. */
.clan-textarea { width: 100%; }
.clan-input-num { width: calc(34 * var(--px)); }
.clan-input-tag { width: calc(46 * var(--px)); flex: none; }
.clan-count { flex: none; }

.clan-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
}
.clan-actions .btn { min-height: calc(12 * var(--px)); padding: 0 calc(3 * var(--px)); }
.clan-spacer { flex: 1; }

/* ---- Visão geral ---------------------------------------------------------------------------------------------- */
.clan-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: calc(4 * var(--px));
}
.clan-head-text {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--px));
  min-width: 0;
}
.clan-name {
  font-size: var(--text-1);
  line-height: calc(10 * var(--px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1 * var(--px)) calc(6 * var(--px));
  line-height: calc(9 * var(--px));
}
.clan-chips { display: flex; gap: calc(3 * var(--px)); }
.clan-chip {
  padding: 0 calc(2 * var(--px));
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-text-dim);
  line-height: calc(9 * var(--px));
}
.clan-chip.is-on { background: rgba(76, 175, 80, 0.25); color: var(--c-ok); }
.clan-box-notice { height: calc(46 * var(--px)); }
/* a descrição cresce até o rodapé: o painel da aba nunca fica com um vazio embaixo das ações */
.clan-box-desc { flex: 1; min-height: calc(34 * var(--px)); }
.clan-box .clan-scroll { line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }

/* em edição o formulário ocupa o lugar dos dois painéis: as ações continuam no rodapé do painel da aba */
.clan-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(1 * var(--px)); }
/* o campo de confirmação do modal de dissolver fica na própria linha, abaixo do texto */
.modal .clan-input { display: block; width: 100%; margin-top: calc(3 * var(--px)); }
.clan-edit-head { display: flex; align-items: baseline; justify-content: space-between; }
.clan-edit-row { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.clan-edit-toggle, .clan-edit-num { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); cursor: pointer; }

/* ---- listas (membros, pedidos, procurar) ---------------------------------------------------------------------- */
.clan-row {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-height: calc(12 * var(--px));
  padding: 0 calc(1 * var(--px));
  line-height: calc(10 * var(--px));
  cursor: pointer;
  white-space: nowrap;
}
.clan-row:hover { background: rgba(255, 255, 255, 0.08); }
.clan-row.is-selected { background: rgba(224, 176, 64, 0.18); outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.clan-row:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.clan-row-head { cursor: default; background: none; border-bottom: var(--px) solid rgba(255, 255, 255, 0.15); }
.clan-row-head:hover { background: none; }

.clan-col-dot {
  flex: none;
  width: calc(4 * var(--px));
  height: calc(4 * var(--px));
  background: #4a4257;
}
.clan-col-dot.is-online { background: var(--c-ok); }
.clan-row-head .clan-col-dot { background: none; }
.clan-col-name { flex: 1; min-width: 0; overflow: hidden; }
.clan-col-class { flex: none; width: calc(52 * var(--px)); overflow: hidden; text-overflow: ellipsis; }
.clan-col-level { flex: none; width: calc(20 * var(--px)); text-align: right; }
.clan-col-power { flex: none; width: calc(46 * var(--px)); text-align: right; }
/* --- enxugamento (docs/ux-casos.md §13) -------------------------------------------------------------------
   A COLUNA "Cargo" saiu (52 px): em 28 das 30 filas ela repetia "Membro", que é o normal — e o normal não se pinta
   (§G5). A marca do cargo passou a viajar colada ao NOME, de quem o cargo é, e os 52 px foram para o nome, que era a
   única coluna que truncava. A palavra continua inteira no gesto da marca e no `aria-label` da fila (§G7). */
.clan-col-name { display: flex; align-items: center; gap: calc(2 * var(--px)); }
/* a elipse tem de morar no FILHO: `text-overflow` não corta o conteúdo de um contêiner flex */
.clan-col-name > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clan-rank-mark { flex: none; display: inline-flex; align-items: center; }
/* o nome do líder na Visão geral e no detalhe da busca: coroa + nome, sem o rótulo "Líder:" */
.clan-leader { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
/* marca do cargo (8×8) */
.clan-rank-ico { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.clan-rank-ico.is-leader { background-image: var(--ui-ico_rank_leader, none); }
.clan-rank-ico.is-officer { background-image: var(--ui-ico_rank_officer, none); }
.clan-col-seen { flex: none; width: calc(50 * var(--px)); padding-left: calc(3 * var(--px)); text-align: right; }
.clan-col-count { flex: none; width: calc(32 * var(--px)); text-align: right; }
.clan-col-min { flex: none; width: calc(54 * var(--px)); text-align: right; }

.clan-member-actions { flex-wrap: wrap; row-gap: calc(1 * var(--px)); min-height: calc(12 * var(--px)); }
/* Botão SÓ DE ÍCONE (§G1, molde de `.inventory-links`): o rótulo vive no `aria-label` e no gesto, e o `<span>` do
   rótulo fica vazio — sem isto ele ainda cobraria o `gap` do botão e abriria um buraco à direita da lupa. */
.clan-btn-ico { padding: 0 calc(2 * var(--px)); }
.clan-btn-ico > span:empty { display: none; }
.clan-bar-name { color: var(--c-gold); max-width: calc(80 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Pedidos / Convites --------------------------------------------------------------------------------------- */
.clan-invite-row { flex: none; display: flex; gap: calc(3 * var(--px)); }
.clan-invite-field { flex: 1; min-width: 0; }
.clan-invite-row .btn { min-height: calc(12 * var(--px)); padding: 0 calc(3 * var(--px)); }
.clan-req {
  padding: calc(1 * var(--px)) 0;
  border-bottom: var(--px) solid rgba(255, 255, 255, 0.1);
}
.clan-req-head { display: flex; align-items: center; gap: calc(4 * var(--px)); line-height: calc(10 * var(--px)); }
.clan-req-name { color: var(--c-text); max-width: calc(130 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-req-spacer { flex: 1; }
.clan-req-msg { line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }
.clan-req-actions { display: flex; gap: calc(3 * var(--px)); padding-top: calc(1 * var(--px)); }
.clan-req-actions .btn, .clan-req-head .btn { min-height: calc(11 * var(--px)); padding: 0 calc(3 * var(--px)); }
.clan-none { display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding: calc(6 * var(--px)) calc(2 * var(--px)); text-align: center; align-items: center; }
.clan-none-title { font-size: var(--text-1); }
.clan-none .clan-actions { justify-content: center; }

/* ---- Chat ------------------------------------------------------------------------------------------------------ */
/* chat colado no FIM: a conversa curta começa embaixo, como todo chat (o `margin-top: auto` do miolo não tem o bug
   de corte no topo que `justify-content: flex-end` tem em container rolável). */
.clan-chat-log .clan-scroll { display: flex; flex-direction: column; line-height: calc(10 * var(--px)); }
.clan-chat-lines { margin-top: auto; }
/* --- chatlink --- a conversa é uma parada de Tab (`windows/clan.js › buildChat`: dela as setas entram nos itens linkados): o
   contorno dourado do foco vai na caixa que ROLA, à vista — no miolo (mais alto que a caixa numa conversa longa) ele sairia
   cortado em cima. O chip em foco tem o contorno dele (chat.css › .chat-link:focus-visible). */
.clan-chat-lines:focus { outline: none; }
.clan-chat-log .clan-scroll:has(> .clan-chat-lines:focus-visible) { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
/* --- chatlink --- hora, nome e fala alinham pela LINHA DE BASE do texto (`align-items: baseline`): a fala com item linkado tem
   o chip de 20 px (a peça antes do `[Nome]`, css/chat.css › .chat-link — docs/specs/chat.md §7.5), e com o alinhamento pelo
   topo a hora ficava 3 px acima do nome e da fala. Sem item a linha tem 10 px e nada muda. O nome alinha o texto dele pela base
   e a marca do cargo fica no meio, como era. */
.clan-chat-line { display: flex; align-items: baseline; gap: calc(2 * var(--px)); padding: calc(1 * var(--px)) 0; overflow-wrap: anywhere; }
.clan-chat-time { flex: none; }
.clan-chat-name { flex: none; display: inline-flex; align-items: baseline; gap: calc(1 * var(--px)); color: var(--c-text); }
.clan-chat-name > .clan-rank-ico { align-self: center; }
.clan-chat-line.is-mine .clan-chat-name { color: var(--c-ok); }
.clan-chat-text { min-width: 0; }
.clan-chat-row { flex: none; display: flex; gap: calc(3 * var(--px)); }
.clan-chat-field { flex: 1; min-width: 0; }
.clan-chat-row .btn { min-height: calc(12 * var(--px)); padding: 0 calc(4 * var(--px)); }

/* ---- Procurar --------------------------------------------------------------------------------------------------- */
.clan-search-row { flex: none; display: flex; align-items: center; gap: calc(6 * var(--px)); }
.clan-search-field { flex: 1; min-width: 0; }
.clan-columns { flex: 1; min-height: 0; display: flex; gap: calc(4 * var(--px)); }
.clan-browse-list { width: calc(216 * var(--px)); flex: none; }
.clan-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); overflow: hidden; }
.clan-detail > * { position: relative; }
.clan-detail-head { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.clan-detail-title { min-width: 0; line-height: calc(10 * var(--px)); overflow: hidden; }
.clan-detail-title > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-detail-meta { display: flex; flex-wrap: wrap; gap: calc(1 * var(--px)) calc(6 * var(--px)); line-height: calc(9 * var(--px)); }
.clan-detail-desc { flex: 1; min-height: 0; overflow-y: auto; line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }
.clan-detail-empty { padding-top: calc(10 * var(--px)); text-align: center; }
/* --- B69 --- O vazio de quem NÃO tem clã ensina em vez de esperar: título, o que um clã dá, o custo, o que falta e
   o botão que leva à aba `Criar`. O texto quebra em linhas (o `.clan-detail-empty` de cima é uma frase só e era
   centrado; aqui são duas ou três linhas de 9 px), e o botão fica colado no pé da coluna pelo `margin-top: auto`. */
.clan-detail-empty-title { flex: none; line-height: calc(10 * var(--px)); }
.clan-detail-teach { line-height: calc(9 * var(--px)); white-space: normal; overflow-wrap: anywhere; }
.clan-detail > #clan-found { margin-top: auto; }
.clan-detail .btn { min-height: calc(12 * var(--px)); }
.clan-more { display: flex; justify-content: center; padding: calc(2 * var(--px)) 0; }
.clan-more .btn { min-height: calc(11 * var(--px)); padding: 0 calc(6 * var(--px)); }
.clan-browse-row { gap: calc(4 * var(--px)); }

/* ---- Criar ------------------------------------------------------------------------------------------------------ */
.clan-create-row { flex: none; display: flex; gap: calc(3 * var(--px)); }
.clan-create-row .clan-input:first-child { flex: 1; min-width: 0; }
.clan-pane-create > .clan-input { flex: none; }
.clan-emblem-grid {
  flex: none;
  display: grid;
  grid-template-columns: repeat(8, calc(20 * var(--px)));
  gap: calc(2 * var(--px));
}
.clan-emblem-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: var(--px) solid #3a3a48;
  cursor: pointer;
}
.clan-emblem-pick:hover { border-color: #7a7290; }
.clan-emblem-pick.is-active { border-color: var(--c-gold); background: rgba(224, 176, 64, 0.15); }
.clan-color-row { flex: none; display: flex; gap: calc(3 * var(--px)); }
.clan-color-pick {
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  padding: 0;
  background: var(--clan-color, #888);
  border: var(--px) solid #3a3a48;
  cursor: pointer;
}
.clan-color-pick.is-active { border-color: var(--c-gold); box-shadow: inset 0 0 0 var(--px) #0009; }
/* prévia, custo, motivo e "Fundar clã" ficam colados no rodapé do painel (o espaço sobrando fica acima deles) */
.clan-create-foot { flex: none; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--px)); }
.clan-preview { display: flex; align-items: center; gap: calc(4 * var(--px)); min-width: 0; overflow: hidden; white-space: nowrap; }
/* `.clan-cost` agora é a FILA do custo (moeda + `Nv N`), não uma linha de texto — ver `costChips` em windows/clan.js */
.clan-cost { flex: none; display: flex; align-items: center; gap: calc(5 * var(--px)); }
.clan-cost-box { flex: none; }
.clan-reason { flex: none; min-height: calc(9 * var(--px)); color: var(--c-danger); }
/* S15/B15: a MESMA caixa do motivo, sem a cor de perigo — é para o que ENSINA ("o cargo escolhido e todos acima
   dele…", "espere um instante para falar de novo"), não para o que deu errado. `.clan-reason` continua vermelho. */
.clan-hint { flex: none; min-height: calc(9 * var(--px)); line-height: calc(9 * var(--px)); }
/* S20: o aviso do intervalo do chat mora colado ao campo, e some sozinho quando o envio destrava */
.clan-chat-note { margin-top: calc(1 * var(--px)); }
.clan-chat-note.hidden { display: none; }

/* ---- cabeçalho do lobby ------------------------------------------------------------------------------------------ */
.lobby-clan-tag { color: var(--c-text-dim); }

/* --- guerra --- aba Guerra = RESUMO + PORTA (docs/specs/clas.md §8.11 d): o esquadrão n/10 com o selo da build de Guerra
   e a porta da janela Guerras, a próxima guerra do clã e as ilhas do clã. As filas de lance e o Convocar moram na janela
   Guerras (css/war.css). Mesma gramática das outras abas — linha que quebra, nada preso a pixel de arte. */
.clan-pane-war { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-height: 0; }
.clan-war-head { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; min-height: calc(18 * var(--px)); }
/* a porta mora na ponta direita da fileira; o selo da build tem a largura do que diz (a pista não vira listra, G4) */
.clan-war-open { margin-left: auto; }
.clan-war-squad { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; }
/* peças da série (ico_war 16, ico_node 9), decorativas: a palavra ao lado diz o que são */
.clan-war-ico { display: inline-block; flex: none; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.clan-war-ico.is-16 { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.clan-war-ico.is-9 { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.clan-war-next, .clan-war-islesec { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.clan-war-item { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.clan-war-node { font-weight: 600; }
/* Ataque/Defesa: a palavra do LADO do clã, sem moldura (a moldura é da fase, ao lado — dois selos seguidos competiriam) */
.clan-war-stance { flex: none; color: var(--c-gold); }
/* «vs [emblema] TAG» ou «vs Guardião Nv 40»: o nome do lado encolhe com reticências, nunca empurra a fila para fora */
.clan-war-foe { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; max-width: 100%; }
/* as ilhas do clã: uma fila que quebra; a pista é da FILA, e a fila tem a largura do que diz (G4, filho de coluna flex) */
.clan-war-isles { display: flex; align-items: center; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(8 * var(--px)); align-self: flex-start; }
.clan-war-isle { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; }
/* ---- G2: o estado da guerra é SELO, nunca frase (`docs/UX-GRAMATICA.md`) ----------------------------------------
   Moldura de 1 px de arte + fundo apagado + cor por fase. A COR NUNCA VEM SOZINHA (ui-gameplay.md §8.7): a palavra
   ("Inscrição aberta", "Em batalha") está dentro do selo e é ela que o leitor de tela e o daltônico leem; a cor só
   faz o olho achar a fase certa antes de ler. Cinco fases, três cores: o que pede ação é ouro, o que está
   acontecendo é perigo, o que acabou é apagado — a mesma leitura de `.text-gold`/`.text-danger`/`.text-dim`. */
.clan-war-phase {
  flex: none;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  color: var(--c-text-dim);
  opacity: 0.95;
}
.clan-war-phase.is-p1, .clan-war-phase.is-p2 { color: var(--c-gold); }
.clan-war-phase.is-p3 { color: var(--c-danger); }
.clan-war-bonus { flex: none; }
.clan-war-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- vault --- aba Armazém (seven-systems 11 §7): a grade de bilhetes do clã. Mesma gramática das outras abas —
   nenhuma arte nova, nenhum tamanho preso a pixel de asset; os slots são os mesmos 36×36 do resto do jogo. */
.clan-pane-vault { display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-height: 0; }
.clan-vault-head { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--px)); }
/* preço e botão andam juntos: a moeda é o preço de AMPLIAR, e a 40 px do botão já seria outro número solto */
.clan-vault-expand-row { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.clan-vault-box { padding: calc(2 * var(--px)); overflow-y: auto; max-height: calc(120 * var(--px)); }
.clan-vault-grid { display: grid; grid-template-columns: repeat(var(--cols), max-content); gap: calc(2 * var(--px)); }
.clan-vault-actions { display: flex; align-items: center; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.clan-vault-pick { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); max-height: calc(140 * var(--px)); overflow-y: auto; }
.clan-vault-row { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.clan-vault-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- aba Permissões: 16 chaves em DUAS colunas (avaliação de UX, rodada 2) ------------------------------------
   Em uma coluna só cabiam 13 das 16 linhas e a 14.ª saía fatiada ao meio pelo rodapé: o líder não conseguia delegar
   o lance do leilão nem a convocação da guerra em resolução nenhuma. Em duas colunas de 8 as 16 cabem sem rolagem,
   e cada linha pode quebrar em duas linhas de texto em vez de truncar o nome da permissão. */
.clan-perms-list > .clan-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(6 * var(--px));
  align-content: start;
}
.clan-perms-list .clan-perm-row {
  align-items: center;
  min-height: calc(14 * var(--px));
  white-space: normal;
}
.clan-perms-list .clan-perm-name { flex: 1 1 auto; min-width: 0; line-height: calc(9 * var(--px)); }
.clan-perms-list .clan-perm-select { flex: none; max-width: calc(64 * var(--px)); }
/* aviso e vazio ocupam a largura inteira */
.clan-perms-list .clan-empty, .clan-perms-list .clan-section { grid-column: 1 / -1; }