/* auction.css — janela do Leilão (js/ui/windows/auction.js; docs/specs/auction.md).

   A janela virou uma VITRINE DE ÍCONES + LIVRO DE OFERTAS (a queixa do dono era de navegação: "selecionar um item a
   partir de uma lista está muito ruim"). A geometria é a do Catálogo, porque é a única já provada para uma grade
   grande com ficha ao lado — e as duas janelas são a mesma forma de problema.

   A conta da janela de 592 × 276 em [24, 40] (windowLayout.js › auction):
     miolo 576 × 260  −  título 14  −  rodapé 10          =  corpo útil  576 × 236
     − abas 16 − vão 2                                     =              576 × 218
     − barra de filtros 16 − vão 2                         =              576 × 200
     vitrine 372  +  vão 4  +  livro 200                   =  576  ✓
   9 colunas × 38 = 342 px de arte dentro dos 372 da coluna: sobram 30, mais que qualquer barra de rolagem em
   qualquer `--px`, então a grade NUNCA reflui (mesma decisão do codex.css, D14 do pacote do Catálogo).

   Passo 38 e não 34 (o do Catálogo): a célula carrega uma linha de preço de 12 px por baixo do ícone de 32 — é o
   preço que faz a vitrine servir para comparar, e sem ele a grade seria bonita e inútil.
   Medidas em px de arte: calc(N * var(--px)). */

.auction-body {
  --auction-grid-w: 372;  /* largura da coluna da vitrine */
  --auction-book-w: 200;  /* largura da coluna do livro de ofertas */
  --auction-step: 38;     /* passo horizontal da célula (ícone 32 + 6 de respiro) */
  --auction-cell-h: 50;   /* altura da célula (ícone 32 + linha de preço 12 + 6) */
  --auction-icon: 32;     /* lado do ícone */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* devolve os 2 px que o `.window-body` toma da faixa da moldura (windows.css) */
  padding: 0 calc(2 * var(--px));
  overflow: hidden;
}
.auction-tabs { flex: none; margin-bottom: calc(2 * var(--px)); }
.auction-tab { min-height: calc(12 * var(--px)); padding: 0 calc(3 * var(--px)); }

/* ---- aba Comprar: barra de filtros + vitrine + livro ------------------------------------------------------------ */
.auction-browse { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.auction-browse.hidden, .auction-sell.hidden, .auction-mine.hidden { display: none; }
.auction-content { flex: 1; min-height: 0; display: flex; gap: calc(4 * var(--px)); }
.auction-gridcol { width: calc(var(--auction-grid-w) * var(--px)); flex: none; display: flex; flex-direction: column; min-height: 0; }

/* Peça de arte de UI 16×16 dentro de uma aba/botão (abas de categoria, ordenação, "só o que eu posso usar"). */
.auction-ico {
  display: inline-block;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
/* a aba-ícone perde o padding de texto: o orçamento da barra conta 16 px por aba, não 16 + 16 de chrome */
.filterbar .tab.filterbar-tab-ico { padding: 0; min-width: calc(16 * var(--px)); line-height: 0; }
/* categoria sem lote nenhum: a tela diz ANTES do clique (o `aria-label` leva o "· 0" para o leitor de tela) */
.filterbar .tab.is-dim { opacity: 0.45; }
.auction-sort { padding: 0; min-width: calc(16 * var(--px)); line-height: 0; }
.auction-usable { padding: 0; min-width: calc(16 * var(--px)); line-height: 0; }
.auction-usable[aria-checked='true'], .auction-sort.is-active { outline: var(--px) solid var(--c-gold); outline-offset: 0; }

/* ---- a VITRINE: uma célula por TEMPLATE -------------------------------------------------------------------------
   NÃO usa `widgets/itemSlot.js`: a moldura de 2 px dele existe para mostrar QUALIDADE, que é da instância e não do
   template (invariante 4), e uma célula que agrega lotes de qualidades diferentes não tem qualidade para mostrar.
   A moldura aparece no LIVRO, lote a lote (`.auction-lot-q`). */
.auction-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
  display: grid;
  grid-template-columns: repeat(9, calc(var(--auction-step) * var(--px)));
  align-content: start;
  padding-bottom: calc(6 * var(--px));
}
/* O cabeçalho da prateleira é "Espada · 3", junto: o Catálogo pode jogar a contagem na outra ponta porque lá ela é
   "4/10" e se lê sozinha; aqui é um número só, e a 32 px de distância do nome ele vira lixo na tela (visto no
   screenshot da 1ª rodada). */
.auction-shelf-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(10 * var(--px));
  line-height: 1;
  color: var(--c-gold);
}
.auction-shelf-head:not(:first-child) { margin-top: calc(2 * var(--px)); }
.auction-shelf-count { color: var(--c-text-dim); }

.auction-cell {
  position: relative;
  width: calc(var(--auction-step) * var(--px));
  height: calc(var(--auction-cell-h) * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.auction-cell .item-icon {
  width: calc(var(--auction-icon) * var(--px));
  height: calc(var(--auction-icon) * var(--px));
  margin-top: calc(3 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
/* a linha de preço: é ela que justifica o passo 38 em vez do 34 do Catálogo */
.auction-cell-price {
  height: calc(12 * var(--px));
  line-height: calc(12 * var(--px));
  color: var(--c-gold);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
/* seleção PARA DENTRO: um aro para fora mudaria o passo e derrubaria a nona coluna */
.auction-cell.is-selected { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.auction-cell:focus-visible { outline: calc(2 * var(--px)) solid #fff5a8; outline-offset: calc(-1 * var(--px)); z-index: 1; }
.auction-cell:hover { background: rgba(255, 255, 255, 0.06); }

/* SILHUETA: a MESMA arte, escurecida e sem cor — nenhum PNG novo (é a linha `.is-unknown` do codex.css). É o estado
   vazio que não parece defeito: "ainda não há nada aqui", com o que PODERIA estar. */
.auction-cell.is-empty .item-icon { filter: grayscale(1) brightness(0.35); }
.auction-cell.is-empty .auction-cell-price { color: var(--c-text-dim); }

/* os quatro cantos da célula: fila (sup-dir) · lotes (inf-esq) · pilha ×N (inf-dir) · já estou na fila (sup-esq)
   PLACA, não sombra: o selo é desenhado EM CIMA do ícone, e sobre o punho dourado da espada o "23" lia-se "28" — a
   sombra de 1 px não separa branco de ouro (visto no screenshot, e eu li o número errado antes de conferir o DOM).
   Um fundo opaco é o que faz o número ser número em qualquer arte. */
.auction-cell-queue, .auction-cell-lots, .auction-cell-qty {
  position: absolute;
  line-height: 1;
  color: var(--c-text);
  background: rgba(10, 8, 20, 0.88);
  padding: 0 var(--px);
  border-radius: var(--px);
  pointer-events: none;
}
.auction-cell-queue { right: 0; top: calc(3 * var(--px)); color: var(--c-gold); }
.auction-cell-lots { left: 0; top: calc(27 * var(--px)); }
.auction-cell-qty { right: 0; top: calc(27 * var(--px)); }
.auction-cell-mine {
  position: absolute;
  left: calc(1 * var(--px));
  top: calc(4 * var(--px));
  width: calc(4 * var(--px));
  height: calc(4 * var(--px));
  background: var(--c-gold);
  box-shadow: 0 0 0 var(--px) #000;
  pointer-events: none;
}
.auction-cell-queue.hidden, .auction-cell-lots.hidden, .auction-cell-qty.hidden, .auction-cell-mine.hidden { display: none; }

/* a frase do estado vazio mora ACIMA da grade e não a substitui: no modo silhueta as duas convivem */
.auction-hint { color: var(--c-text-dim); flex: none; overflow-wrap: anywhere; }
.auction-hint.hidden { display: none; }
/* …mas quando NÃO há grade atrás dela, a frase é a tela inteira: uma linha fina encostada no canto esquerdo de 500 px
   pretos passa despercebida (medido na busca sem resultado). Sozinha, ela vira bloco centrado. */
.auction-hint.is-solo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(8 * var(--px));
}
/* a grade vazia não pode disputar a altura com a frase que a substituiu (as duas são `flex: 1` na mesma coluna) */
.auction-hint.is-solo + .auction-grid { flex: none; }
.auction-hint p { margin: 0 0 calc(2 * var(--px)); line-height: calc(10 * var(--px)); }

/* ---- o LIVRO DE OFERTAS: os lotes DAQUELE item ------------------------------------------------------------------
   Largura fixa e rolagem própria; o rodapé é FIXO (fora da rolagem) porque é ele que carrega "Entrar na fila" e o
   aviso do ouro, e nenhum dos dois pode sair da moldura por causa de uma fila longa. */
.auction-bookcol {
  width: calc(var(--auction-book-w) * var(--px));
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.auction-book {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(2 * var(--px));
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.auction-bookfoot { flex: none; min-height: calc(28 * var(--px)); }
.auction-bookhead { display: flex; gap: calc(3 * var(--px)); align-items: flex-start; margin-bottom: calc(2 * var(--px)); }
.auction-bookhead .auction-row-ico { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.auction-bookhead-text { min-width: 0; }
.auction-bookhead-text p { margin: 0; line-height: calc(10 * var(--px)); }
.auction-book > p { margin: 0 0 calc(2 * var(--px)); line-height: calc(10 * var(--px)); }

/* uma linha do livro: moldura de qualidade · preço · prazo · fila. Aqui a qualidade NÃO mente: é um lote. */
.auction-lots { display: flex; flex-direction: column; }
.auction-lot {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-height: calc(16 * var(--px));
  padding: 0 calc(2 * var(--px));
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.auction-lot:hover { background: rgba(255, 255, 255, 0.06); }
.auction-lot.is-active { background: rgba(255, 255, 255, 0.12); }
.auction-lot:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
/* a pastilha de qualidade usa a MESMA cor que o resto do jogo (`--q<id>`, gerada de qualities.json em main.js) */
.auction-lot-q {
  flex: none;
  width: calc(6 * var(--px));
  height: calc(10 * var(--px));
  background: currentColor;
}
.auction-lot-price { flex: 1 1 auto; min-width: 0; color: var(--c-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auction-lot-queue { flex: none; width: calc(14 * var(--px)); text-align: right; color: var(--c-text-dim); }

/* ---- aba Vender: a grade da mochila à esquerda, o formulário à direita ------------------------------------------
   O `<select>` de nomes morreu (é a segunda lista da queixa do dono); ele sobrevive `sr-only` como caminho de
   teclado. 226 de grade (6 × 36 + vãos) + 4 + 346 de formulário = 576. */
.auction-sell { flex: 1; min-height: 0; display: flex; gap: calc(4 * var(--px)); }
.auction-sellgrid { flex: none; width: calc(226 * var(--px)); display: flex; flex-direction: column; min-height: 0; }
/* B186: a barra que TITULA a grade é o destino do seletor de página — nunca solto embaixo dela (a regra e o molde
   são os do `.storage-label` do Banqueiro, em windows.css). */
.auction-sell-label { display: flex; align-items: center; gap: calc(3 * var(--px)); height: calc(16 * var(--px)); flex: none; }
.auction-sell-label > .grid-pager { margin-left: calc(2 * var(--px)); }
.auction-sell-label > .grid-pager.is-single { display: none; }
.auction-sellform {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  padding-right: calc(2 * var(--px));
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.auction-field { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(14 * var(--px)); }
.auction-field > span { flex: 0 0 calc(110 * var(--px)); color: var(--c-text-dim); }
.auction-field-sugg { justify-content: flex-end; }
/* as ações do formulário ficam alinhadas com a COLUNA DOS CAMPOS, não com a dos rótulos: "Anunciar" solto no canto
   esquerdo parecia botão de outra coisa (visto no screenshot da 1ª rodada). */
.auction-sellform > .auction-actions { justify-content: flex-end; }
/* cabeçalho de colunas do livro: mesma estrutura da linha, para as colunas baterem */
.auction-lotcols {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: 0 calc(2 * var(--px));
  height: calc(10 * var(--px));
  line-height: calc(10 * var(--px));
  color: var(--c-text-dim);
}
.auction-lotcols .auction-lot-q { background: none; height: 0; }
.auction-lotcols .auction-lot-price { color: var(--c-text-dim); }
.auction-input { flex: 1 1 auto; min-width: 0; }
.auction-preview { margin: 0; line-height: calc(10 * var(--px)); }
.auction-sell-slot { display: flex; flex: none; }
/* a dica QUEBRA em duas linhas em vez de virar "Escolha na mochila ao…": o espaço existe, era o `nowrap` */
.auction-sell-hint { min-width: 0; line-height: calc(9 * var(--px)); }
/* o caminho de teclado continua existindo, fora da vista de quem enxerga: a regra `.sr-only` é a de base.css
   (`#ui-root .sr-only`), UMA só no projeto — aqui não se copia nada. */

/* ---- aba Meus lotes: aqui a LISTA sobrevive, e é de propósito ---------------------------------------------------
   São as poucas linhas que já são minhas — não a praça inteira a percorrer. A queixa do dono era sobre ESCOLHER
   numa lista; aqui não se escolhe, se confere. */
.auction-mine {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: calc(2 * var(--px));
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
.auction-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  min-height: calc(16 * var(--px));
  padding: 0 calc(2 * var(--px));
  line-height: calc(10 * var(--px));
}
.auction-row-ico {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.auction-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Largura FIXA na coluna de preço: com `flex: none` a moeda de cada linha parava num x diferente e as cinco
   moedas desciam a lista em ziguezague (1.ª rodada). A lista só se lê em coluna quando a coluna existe. */
.auction-row-price { flex: none; width: calc(56 * var(--px)); color: var(--c-gold); white-space: nowrap; text-align: right; }
.auction-row-price > .gold-label { justify-content: flex-end; width: 100%; }
/* cabeçalho de colunas de "À venda": uma linha para N filas, no lugar de "na fila" repetido em cada uma */
.auction-minecols { min-height: calc(10 * var(--px)); color: var(--c-text-dim); }
.auction-minecols .auction-row-ico { background: none; }
.auction-minecols .auction-row-price { color: var(--c-text-dim); }
/* forma curta ("2h10"), largura fixa para as linhas alinharem a coluna, `nowrap` para nunca quebrar em duas linhas */
.auction-row-time { flex: none; width: calc(30 * var(--px)); text-align: right; color: var(--c-text-dim); white-space: nowrap; }
.auction-row-queue { flex: none; width: calc(30 * var(--px)); margin-left: calc(4 * var(--px)); color: var(--c-text-dim); white-space: nowrap; text-align: right; }
.auction-mine .auction-subject { margin-top: calc(3 * var(--px)); }

/* ---- comuns ------------------------------------------------------------------------------------------------------ */
.auction-subject { margin: 0 0 calc(2 * var(--px)); font-size: inherit; color: var(--c-gold); overflow-wrap: anywhere; }
.auction-price { color: var(--c-gold); }
.auction-mypos { color: var(--c-gold); margin: 0; line-height: calc(10 * var(--px)); }
/* o aviso do ouro é a última linha e fica JUNTO do botão: nunca fora da janela */
.auction-note { margin: 0 !important; overflow-wrap: anywhere; line-height: calc(9 * var(--px)); }
.auction-actions { display: flex; gap: calc(4 * var(--px)); margin: calc(2 * var(--px)) 0; flex-wrap: wrap; }

/* ---- gramática do enxugamento (docs/ux-casos.md §13) ---------------------------------------------------------
   G2 — SELO DE ESTADO: moldura + palavra curta + cor, e a cor NUNCA vem sozinha (ui-gameplay.md §8.7): a palavra
   está dentro do selo. Mesmo molde de `.codex-seal`; aqui ele também carrega um ícone de 8 px (o cadeado). */
.auction-seal {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-text-dim);
}
.auction-seal.is-bad { color: var(--c-danger); }
.auction-seal .auction-ico { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
/* a trava de NÍVEL da aba Vender: selo, não parágrafo (era uma frase de 50 c presa na tela). Ele mora na MESMA linha
   do "Anunciar" que trava — a 200 px de distância a tela não dizia que uma coisa é a causa da outra (1.ª rodada). */
.auction-lock { display: inline-flex; align-items: center; }
.auction-lock.hidden { display: none; }
.auction-actions-sell { justify-content: flex-end; align-items: center; }
.auction-actions-sell > .auction-lock { margin-right: auto; }

/* A PISTA (`.has-more`, o pontilhado de base.css) marca PALAVRAS, nunca a linha inteira: num `<p>` de largura cheia
   o pontilhado virava um traço de 700 px que prometia texto onde não há nenhum, e listrava a janela sozinho
   (visto nas capturas da 1.ª rodada). Inline-block faz o sublinhado terminar onde a frase termina. */
.auction-lean { display: inline-block; }
/* a prévia da venda virou duas fichas "rótulo curto + moeda + número" (G1, cerca do irmão) — e também se mede pelo
   texto, pelo mesmo motivo */
.auction-preview { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); flex-wrap: wrap; width: fit-content; }
.auction-preview.hidden { display: none; }

/* B76/B84: "Anunciar" nunca fica aceso e mudo. A linha diz o motivo e o campo que falta ganha o aro vermelho. */
.auction-problem { margin: 0; min-height: calc(9 * var(--px)); line-height: calc(9 * var(--px)); color: var(--c-danger); }
.auction-problem.hidden { display: none; }
.auction-input.is-error { border-color: var(--c-danger); outline: var(--px) solid var(--c-danger); outline-offset: 0; }

/* Barra de rolagem à vista e corte no fim de uma fileira inteira: a última fileira de ícones saía fatiada ao meio
   pelo rodapé e parecia defeito de render. Mesmo molde de codex.css. */
@supports selector(::-webkit-scrollbar) {
  .auction-grid, .auction-book, .auction-mine, .auction-sellform { scrollbar-width: auto; scrollbar-color: auto; }
  .auction-grid::-webkit-scrollbar, .auction-book::-webkit-scrollbar, .auction-mine::-webkit-scrollbar, .auction-sellform::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .auction-grid::-webkit-scrollbar-track, .auction-book::-webkit-scrollbar-track, .auction-mine::-webkit-scrollbar-track, .auction-sellform::-webkit-scrollbar-track { background: #12101c; }
  .auction-grid::-webkit-scrollbar-thumb, .auction-book::-webkit-scrollbar-thumb, .auction-mine::-webkit-scrollbar-thumb, .auction-sellform::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
  .auction-grid::-webkit-scrollbar-thumb:hover { background: #8a84a8; }
}

/* A coluna da AÇÃO das filas de "À venda": largura fixa, para o cabeçalho de colunas cair EM CIMA da sua coluna
   (na 1.ª rodada os três rótulos ficavam ~100 px à direita dos números que titulavam — o botão empurrava a linha). */
.auction-row-lot > .btn { flex: none; width: calc(52 * var(--px)); }
.auction-row-act { flex: none; width: calc(52 * var(--px)); }

/* --- auction-itoken (08a): o painel de filtros toma a coluna da vitrine; o livro fica --- */
.auction-filterpanel { width: calc(var(--auction-grid-w) * var(--px)); flex: none; display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.auction-filterpanel.hidden { display: none; }
.auction-filterpanel .auction-field > span:first-child { flex: 0 0 calc(70 * var(--px)); }
.auction-filterpanel .tab.is-active { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
.auction-filterpanel select, .auction-filterpanel input { width: calc(56 * var(--px)); }
.auction-filterpanel input.auction-f-min { width: calc(40 * var(--px)); }
.auction-f-chips { display: inline-flex; flex-wrap: wrap; gap: var(--px); }
/* --- /auction-itoken (08a) --- */

/* --- auction-itoken --- */
.auction-filter-btn { position: relative; padding: 0; min-width: calc(16 * var(--px)); line-height: 0; }
.auction-filter-btn[aria-expanded='true'] { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
.auction-filter-count { position: absolute; right: calc(-2 * var(--px)); top: calc(-2 * var(--px)); min-width: calc(6 * var(--px)); height: calc(6 * var(--px)); font-size: calc(6 * var(--px)); line-height: 1; color: #12101c; background: var(--c-gold); text-align: center; }
.auction-filter-count.hidden { display: none; }
/* a linha de chips só existe com filtro ativo: 12 px que não custam nada quando não há nenhum */
.auction-chips { display: flex; flex-wrap: nowrap; gap: calc(2 * var(--px)); height: calc(12 * var(--px)); overflow: hidden; flex: none; }
.auction-chips.hidden { display: none; }
.auction-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); padding: 0 calc(3 * var(--px)); height: calc(12 * var(--px)); font: inherit; color: inherit; background: rgba(255, 255, 255, 0.08); border: var(--px) solid var(--c-gold); cursor: pointer; white-space: nowrap; }
.auction-chip-x { color: var(--c-text-dim); }
/* (as regras de .auction-filterpanel e .auction-f-chips são do pacote 08a) */
/* o selo de tier na célula da vitrine: a MESMA peça do slot (nine-slice.css .slot-tier), ancorada no canto do ícone */
.auction-cell { position: relative; }
.auction-cell > .slot-tier { left: calc(3 * var(--px)); top: 0; }
/* a linha do livro: pastilha · tier · +N · marcas · preço · resolve · fila */
.auction-lot-tier { flex: none; width: calc(14 * var(--px)); font-size: calc(6 * var(--px)); color: var(--c-text-dim); }
.auction-lot-rfn { flex: none; width: calc(16 * var(--px)); color: var(--c-text); }
.auction-lot-marks { flex: none; display: inline-flex; gap: var(--px); width: calc(18 * var(--px)); }
.auction-lot-marks .auction-ico { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.auction-lot-price { flex: 1 1 auto; }
/* `.itoken-label` e `.ico-itoken` (9×9) são CSS do itoken-loja (client/public/css/windows.css, pacote 10 deles) — não redeclare */
.itoken-label.is-own { color: var(--c-gold); }
/* o cabeçalho de saldo, nas três abas: uma linha de 12 à direita das abas */
.auction-balance { margin-left: auto; display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
/* Achados da OLHADA do 08 (desvio P08-2 no PERGUNTAS.md), no painel do 08a montado na janela de verdade:
   (a) as linhas do painel ENCOLHIAM para caber nos 230 px (flex-shrink 1 da coluna) e a de Espaço, com os chips em duas linhas,
       vazava para cima da barra — o painel tem de ROLAR por dentro, então nenhuma linha encolhe;
   (b) `.auction-field > span` (a regra da aba Vender: rótulo de 110) pegava também "de", "até", "mínimo" e o ícone da moeda do
       campo de preço — o ícone de 9 px virava uma faixa de 110 esticada e os campos caíam 100 px à direita do rótulo;
   (c) o seletor de adicional (56 px) cortava "qualquer adicional" e os nomes de atributo. */
.auction-filterpanel > * { flex: none; }
.auction-filterpanel .auction-field > span:not(:first-child) { flex: none; }
.auction-filterpanel .auction-field > .ico-itoken { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.auction-filterpanel select[id^='auction-f-afx-'] { width: calc(150 * var(--px)); }
/* (f) os chips de QUALIDADE são pastilhas de cor sem texto (`.auction-lot-q q<n>`), mas a moldura 9-slice do `.tab` cobria a cor:
       apareciam seis quadrados vazios com um pingo de cor no canto — a cor é a informação inteira, então ela é o fundo */
.auction-filterpanel .tab.auction-lot-q { width: calc(12 * var(--px)); height: calc(12 * var(--px)); min-width: 0; padding: 0; border: var(--px) solid #12101c; border-image: none; background: currentColor; }
/* (d) o rótulo "resolve" do cabeçalho não cabia nos 30 px da coluna de prazo e colava em "fila" ("resolvefila") */
.auction-lot .auction-row-time, .auction-lotcols .auction-row-time { width: calc(36 * var(--px)); }
/* (e) o "Saldo" do rodapé caía 2 px abaixo dos números (texto solto ao lado de um inline-flex): a mesma linha, centrada */
.auction-foot-balance { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); margin-left: calc(3 * var(--px)); }
/* a ordem do livro: uma linha própria logo abaixo do cabeçalho, da largura da coluna */
.auction-booksort { display: block; width: 100%; margin-bottom: calc(2 * var(--px)); }
/* --- /auction-itoken --- */

/* --- auction-itoken (09) --- */
.auction-preview { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(6 * var(--px)); }
.auction-preview-line { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.auction-quote { display: flex; flex-direction: column; gap: var(--px); margin: calc(2 * var(--px)) 0; }
.auction-quote-row { display: flex; align-items: center; gap: calc(3 * var(--px)); min-height: calc(10 * var(--px)); color: var(--c-text-dim); }
.auction-row-fee { flex: none; width: calc(44 * var(--px)); }
.auction-row-tier { flex: none; width: calc(12 * var(--px)); font-size: calc(6 * var(--px)); color: var(--c-text-dim); }
.auction-row-rfn { flex: none; width: calc(16 * var(--px)); }
/* --- /auction-itoken (09) --- */