/* =============================================================
   Deck Sandbox — Painel de deck  (ADR-0094, ADR-0095)

   O painel é MODO da mesma tela, não rota: quem o mostra é
   `#app[data-mode="deck"]`, no mesmo molde do `[data-phase]` da Fase 2.

   Ele SOBREPÕE a mesa em vez de escondê-la com `display: none`, e isso é
   deliberado. Esconder a `.table` tira a `.battlefield` do fluxo, e é ela
   que o `ResizeObserver` do `fitCanvas` mede: com caixa zero, `fitScale`
   passaria a ser calculado sobre 0×0 e a visão voltaria envenenada ao sair
   do modo. Sobreposto, todo caminho de medição continua vivo.

   Isso NÃO dispensa esvaziar a mesa — a `render()` não desenha carta em
   modo deck (ADR-0030 D3). São as duas metades da mesma regra: o CSS
   esconde, o render esvazia, e nó escondido que guarda estado velho é
   exatamente o que a ADR-0008 pagou caro para aprender.
   ============================================================= */

/* A mesa SAI DE VISTA em modo deck, e `visibility` é o primitivo certo aqui
   (RV-5/RV-6, ADR-0101).

   A ADR-0095 D5 escolheu sobrepor com `z-index`, e isso NUNCA funcionou: o
   trilho é `--z-rail: 30` e a mão `--z-hand: 20`, contra os 5 do painel.
   Os dois pintavam por cima — no celular, onde o trilho vira faixa e a mão
   ocupa a base, isso comia metade da tela do painel. Relatado em aparelho
   em 2026-08-17, com print.

   `visibility: hidden` faz o que aquela decisão queria e o `display: none`
   não podia: tira do PINTE e do hit-test, mas mantém a CAIXA DE LAYOUT —
   então `fitCanvas` continua medindo uma `.battlefield` de dimensão real e
   `fitScale` não é calculado sobre 0×0, que era o motivo da recusa.

   Subir o `z-index` do painel resolveria o sintoma e deixaria a mesa
   clicável por baixo. Isto resolve os dois. */
#app[data-mode="deck"] .table,
#app[data-mode="deck"] .hand { visibility: hidden; }

.deck-panel { display: none; }

#app[data-mode="deck"] .deck-panel {
  /* Da faixa da mesa até o fim: cobre a mesa E a mão, que continuam
     ocupando as próprias linhas embaixo. */
  grid-row: 2 / -1;
  grid-column: 1;
  z-index: 5;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  /* Fundo OPACO e não translúcido: é ele que faz a sobreposição valer.
     Um alfa aqui deixaria a mesa vazia aparecendo por baixo — e a lavagem
     de 1,2% da ADR-0075 mostrou que composição rasa em painel de celular
     quantiza mal. */
  background: var(--bg-app);
}

.deck-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  /* A barra é o custo fixo do painel, e ela não pode encolher quando o
     corpo cresce — mesma razão da barra da mão (ADR-0071). */
  flex: none;
  /* MAS ELA CEDE NA HORIZONTAL (DK-22, ADR-0229). `flex: none` acima é
     sobre a ALTURA; sem esta linha ela também não cedia na largura, porque
     é item de uma grade e o mínimo automático dele é `min-content`.

     O `.deck-panel__title` já tinha `min-width: 0` com `ellipsis`, e não
     bastava: ele resolvia 100% de um pai que já tinha crescido. Com nome de
     deck comprido a barra ia a 867px numa janela de 500 e **a página
     passava a rolar na horizontal** — medido, `scrollLeft` alcançava 367. */
  min-width: 0;
  /* Duas linhas, e as duas são o ADR-0112.

     `wrap` é INCONDICIONAL desde que a barra ganhou o terceiro botão: ele
     morava no `@media (max-width: 560px)`, então acima disso o que não cabia
     TRANSBORDAVA em silêncio em vez de descer. O breakpoint continua lá, mas
     só para o que é dele — pôr o nome do deck em linha própria.

     `flex-end` faz o botão que desce ficar alinhado com os que ficaram. Sem
     ele a linha nova começa na esquerda, com o botão sozinho e desalinhado
     dos dois de cima — *"parece quebrado"*, achado em uso a 360px. Nada muda
     onde tudo cabe: ali quem come a folga é o espaçador `flex: 1`, e
     `justify-content` não tem folga com que decidir. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.deck-panel__title {
  color: var(--fg);
  /* Nome de deck é texto do usuário e pode ser longo: ele cede antes de
     empurrar os botões para fora da tela. */
  min-width: 0;
  /* E AQUI ELE QUEBRA, em vez de cortar (DK-22, ADR-0229). Escolha do dono
     do produto, e ela é do LUGAR: este é o título da página, o nome inteiro
     é a informação, e há espaço para duas linhas. No board é o oposto —
     ali cada linha extra custa altura nos quatro slots, e o corte com
     reticências é que está certo.

     `anywhere` porque um nome sem espaço nenhum não tem onde quebrar, e
     sem isto ele voltaria a esticar a barra — que é o defeito que esta
     rodada consertou. */
  overflow-wrap: anywhere;
}

.deck-panel__body {
  padding: var(--sp-4);
  overflow: auto;
  min-height: 0;
  color: var(--fg-muted);
  /* `.report__head` e `.report__item` já são globais (`table.css`): o
     relatório do import desenha igual aqui e no modal, sem segunda cópia
     de estilo a manter em sincronia. */
}

/* O wrapper central do painel (Fatia 1b). No desktop, exibe a imagem. */
.deck-content {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}

.deck-content .deck-groups {
  flex: 1;
}

/* O preview na lateral. Fixo e com a proporção nativa da carta.

   A LARGURA É A MESMA DO PREVIEW DA MÃO (`--peek-w`), e isso é pedido do
   dono do produto na verificação do DK-7: *"se puder ficar maior, do mesmo
   tamanho que abrimos preview com hover na carta da mão no desktop, fica
   melhor, e segue o padrão"*. Eram 240px chumbados aqui — 320 pelo token, um
   terço maior, e a calibragem passa a ter um lugar só: mexer no `--peek-w`
   move as duas superfícies de leitura juntas, que é o que "padrão" quer
   dizer. Ver ADR-0145.

   Os termos de `vw`/`dvh` do token nasceram para o painel FLUTUANTE caber na
   tela (ADR-0063) e aqui quase nunca mordem — abaixo de 800px esta coluna
   nem existe. Onde eles mordem é a janela deitada e curta, e ali eles fazem
   o trabalho certo pelo mesmo motivo de lá: a carta continua inteira. */
.deck-preview {
  display: none;
  flex: 0 0 var(--peek-w);
  position: sticky;
  top: 0;
}
.deck-preview img {
  width: 100%;
  aspect-ratio: 146 / 204;
  border-radius: var(--radius-md);
  /* `contain` e não `cover`: a proporção da caixa é a da carta (146/204) e a
     da imagem da Scryfall é 488/680 — quase, não igual. `cover` recorta a
     diferença, e o que ele come são as bordas, onde moram o nome impresso e
     a linha de copyright. A invariante 1 do `deck.md` §2.1 é sobre a carta
     INTEIRA, e recorte de 3px também é recorte. */
  object-fit: contain;
  background: var(--bg-surface-2);
}

/* O breakpoint mora AQUI e é declarado no token, num lugar só: o JS e a spec
   perguntam ao `--fmt-deck-preview` em vez de reescrever os 800px, que é a
   mesma disciplina do `--fmt-short` (ADR-0062) e do `chromeOutsideHand()`. */
@media (min-width: 800px) {
  :root { --fmt-deck-preview: 1; }
  .deck-preview { display: block; }
}

/* A lista agrupada por tipo (ADR-0096). Colunas por LARGURA e não por
   número: num deck de 60 os oito grupos cabem em três colunas no desktop e
   numa só no celular, sem breakpoint escrito à mão. */
.deck-groups {
  columns: 22ch;
  column-gap: var(--sp-5);
}

.deck-group {
  /* `break-inside` porque um grupo partido no meio da coluna separa o
     cabeçalho da contagem das linhas que ele conta. */
  break-inside: avoid;
  /* `inline-block` e `100%` resolvem o defeito de motor do WebKit onde a
     margem/texto da primeira quebra de coluna de um multi-column sofre 
     desalinhamento em relação às colunas iniciais. */
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--sp-4);
}

.deck-group__head {
  margin: 0 0 var(--sp-1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.deck-group__head span { font-weight: 400; }

/* A linha e o `⚙` são DOIS BOTÕES IRMÃOS, e a `.deck-row` existe só para
   eles dividirem hover e foco (DK-4, ADR-0108).

   Ela existe por causa de uma restrição de marcação e não de desenho: o `⚙`
   já foi FILHO da linha, e botão dentro de botão é inválido — então a linha
   de fora tinha de ser `<div>`, e nenhuma linha do painel chegava pelo Tab.
   Com os dois irmãos, os dois são botão de verdade e o realce continua
   sendo da linha inteira. */
.deck-row {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
/* O realce é da ROW e não do botão, senão passar o ponteiro sobre o `⚙`
   apagaria o fundo da linha que ele pertence. `focus-within` cobre os dois
   filhos de uma vez — é a mesma linha, chegue-se por onde chegar. */
.deck-row:hover,
.deck-row:focus-within { background: var(--bg-surface-2); }

.deck-line {
  display: flex;
  gap: var(--sp-2);
  /* `flex: 1` e não `width: 100%`: é ela que empurra o `⚙` para a direita
     agora que ele está do lado de fora. */
  flex: 1;
  min-width: 0;
  padding: 2px var(--sp-1);
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}
/* O anel de foco é o item: sem ele a linha chega pelo Tab e não se anuncia,
   que é meio conserto. `-2px` para ele desenhar por dentro da row em vez de
   transbordar na coluna vizinha. */
.deck-line:focus-visible,
.deck-line__cog:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: -2px;
}

.deck-line__qty {
  flex: none;
  min-width: 2ch;
  text-align: right;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

.deck-line__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O P/T da linha de token (ADR-0106). Encostado à direita, no lugar onde a
   linha de carta põe o `⚙` — as duas não coexistem: token não tem seletor
   de impressão (DK-3). É informação e não decoração: o nome de um token não
   identifica face nenhuma (ADR-0092), e é o P/T que separa as dez faces
   que se chamam "Beast". */
.deck-line__pt {
  flex: none;
  margin-left: auto;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* O `⚙` de trocar impressão, dentro da linha. Só aparece no hover e no
   foco do TECLADO — mas continua ocupando o espaço dele sempre (opacidade,
   não `display`), senão a linha reflui quando o ponteiro passa e a lista
   inteira treme. Mesma razão do `👁` da pilha antes da UX-29.

   No TOQUE não há hover: a media query devolve a opacidade cheia, porque
   invisível-e-clicável no dedo é exatamente a queixa que gerou a UX-29. */
.deck-line__cog {
  flex: none;
  padding: 0 2px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--fg-dim);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
/* Sai da ROW e não da linha: ele deixou de ser filho dela (DK-4). O foco do
   TECLADO na linha vizinha também o revela — quem chegou até ali de Tab
   precisa ver o próximo alvo antes de apertar Tab de novo. */
.deck-row:hover .deck-line__cog,
.deck-row:focus-within .deck-line__cog { opacity: 1; }
@media (hover: none) {
  .deck-line__cog { opacity: 1; }
}

/* ---------------------------------------------------------------
   A grade do seletor de impressão (ADR-0099)

   `auto-fill` com largura mínima em vez de número de colunas: a mesma
   grade serve 880px de diálogo e 360px de celular sem breakpoint.
   --------------------------------------------------------------- */
.prints__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-3);
  align-content: start;
}

.prints__item {
  display: grid;
  gap: 2px;
  padding: var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: 11px;
  text-align: center;
  cursor: pointer;
}
.prints__item:hover,
.prints__item:focus-visible { border-color: var(--line-strong); }
/* A impressão em uso. Borda E marca de texto: cor sozinha não sobrevive a
   daltonismo nem a tela ruim, e esta é a única informação da grade que o
   usuário não consegue deduzir olhando. */
.prints__item[aria-current="true"] { border-color: var(--accent-line, var(--fg)); }

.prints__item img {
  width: 100%;
  /* A proporção real da carta. Sem isto a célula colapsa antes de a
     imagem preguiçosa chegar, e a grade inteira salta quando ela chega —
     que é o que torna o `loading="lazy"` desagradável quando mal usado. */
  aspect-ratio: 146 / 204;
  border-radius: 4px;
  background: var(--bg-surface-2);
  object-fit: cover;
}

.prints__set { color: var(--fg); text-transform: uppercase; }

.viewer__hint { color: var(--fg-dim); font-size: 12px; }

/* O convite do primeiro acesso. Existe porque a mesa passou a nascer vazia
   (ADR-0095) e "vazio sem explicação parece defeito" foi literalmente a
   recusa do dono do produto ao deck de demonstração. */
.deck-panel__empty {
  max-width: 46ch;
  margin: 0;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* Em tela estreita os botões não cabem ao lado do nome. O nome desce para a
   própria linha em vez de sumir: sem ele o painel não diz sobre o que ele é.
   (O `flex-wrap` saiu daqui na ADR-0112 — ele vale em qualquer largura.) */
@media (max-width: 560px) {
  .deck-panel__title { flex: 1 0 100%; }
}

.deck-format-select {
  background: var(--bg-surface);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.deck-format-select:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: -1px;
}

/* A NOTA DA TRAVA DE FORMATO (JG2-1). Ela ocupa a largura inteira da grade
   de setup do import — é uma frase, não um campo —, e fica no tom de nota,
   que é o mesmo do `import__hint` ao lado: ela EXPLICA, não alarma. Trocar
   o formato com mesa em curso não é erro do usuário, é uma ação que este
   momento não comporta. */
.import__locked {
  grid-column: 1 / -1;
  margin: 0;
  /* `--fg-muted` e não `--fg-dim`, que era o tom de antes: o dono do
     produto rodou o `V-182` e disse que a nota *"só não é muito óbvia em
     nível de visibilidade"*. Ela deixou de ser um aviso ao lado de um campo
     livre e passou a ser a EXPLICAÇÃO de um seletor desabilitado — e
     explicação que ninguém lê não explica nada.

     Não vai a `--danger`: trocar de formato com mesa em curso não é erro do
     usuário, é uma ação que este momento não comporta. O vermelho da barra
     significa perigo, e gastá-lo aqui o enfraquece onde ele importa. */
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
}