/* GERADO por scripts/ui-sync.sh a partir de @jabutee/ui 0.2.0 (v0.2.0). Não edite aqui. */
/* Origem: os@b56335b1 packages/ui/src/quadro/quadro-fizzy.css */
/* ── O quadro · pele FIZZY (a da Bancada do Astra) ──────────────────────────
   Obra "quadro", 29/09/2026: estas regras moravam em `apps/astra/app/bancada/bancada.css`
   e subiram com o componente (`quadro.tsx`), só com o nome trocado de `bancada-*` para
   `quadro-*`. Nenhum valor mudou.

   🎨 A cor é da coluna: a pele lê `--cor` (a cor) e `--cor-x` (a mesma, escurecida para
   passar de 4,5:1), que o app define por `data-papel` ou a coluna traz na configuração.
   `--quadro-outros` é o cinza do "Com outros" (no Astra, o do Talvez?). O resto são os
   tokens da casa (`--jb-*`).

   ⚖️ O app importa esta folha DEPOIS da dele: a ordem da cascata é a de antes da mudança.
─────────────────────────────────────────────────────────────────────────── */

/* 🗂️ O QUADRO À FIZZY (tarefa 4 de "A Bancada à Fizzy", 26/09; prancheta r11, tese A,
   `r6.css` .op-a e as seções r11b e r11e). Coluna sem painel, cabeçalho centrado em
   caixa alta, cartões com 16 de vão; as fechadas em LOMBADA à direita: pílula que
   some em degradê, número dentro no topo, sem bola, e o topo dela no topo do primeiro
   cartão (34 do cabeçalho + 8). A mesa não rola a 1440 com as saídas à mostra: as
   colunas encolhem de 344 até 216 antes (o Feito saía cortado à direita, print da T3). */
.quadro-mesa { display: flex; align-items: flex-start; justify-content: flex-start; gap: 22px;
  margin: -4px; padding: 4px 4px 12px; min-height: 460px; overflow-x: auto; }
.quadro-coluna { flex: 0 1 344px; min-width: 216px; display: flex; flex-direction: column; border-radius: 10px; }
.quadro-coluna-topo { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; margin-bottom: 8px; }
.quadro-coluna-nome { font: 600 12px/1 var(--jb-font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--cor-x); }
.quadro-coluna-n { font: 600 12px/1 var(--jb-font-ui); color: var(--jb-text-2); font-variant-numeric: tabular-nums; }
.quadro-coluna-cartoes { display: flex; flex-direction: column; gap: 16px; min-height: 40px; }

.quadro-lombada { position: relative; flex: none; width: 40px; min-height: 320px; margin-top: 42px; padding: 0; border: 0;
  border-radius: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cor) 26%, var(--jb-ground)) 0,
    color-mix(in srgb, var(--cor) 16%, var(--jb-ground)) calc(60px + var(--q, 0) * 16px), transparent calc(200px + var(--q, 0) * 24px)); }
.quadro-lombada + .quadro-lombada { margin-left: -12px; }
.quadro-lombada:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 30%, transparent); }
.quadro-lombada-n { width: 40px; height: 40px; font: 700 13px/40px var(--jb-font-ui); text-align: center; color: var(--cor-x); font-variant-numeric: tabular-nums; }
.quadro-lombada-nome { writing-mode: vertical-rl; padding: 4px 0 8px; font: 600 12px/40px var(--jb-font-ui); letter-spacing: .07em;
  text-transform: uppercase; color: var(--cor-x); white-space: nowrap; }

/* O alvo do arrasto: a coluna acende na cor dela. */
.quadro-alvo.quadro-coluna { background: color-mix(in srgb, var(--cor) 8%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor) 8%, transparent); }
.quadro-alvo.quadro-lombada { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cor) 55%, transparent); }

/* ✅ "Mais N feitos" e o pé do Talvez?: texto centrado, sem caixa (r6 `.novo`, `.mais`). */
/* régua 13: a coluna aberta vazia diz que está vazia, no lugar e na largura do primeiro cartão */
.quadro-vazio { height: 72px; box-sizing: border-box; display: grid; place-items: center; border-radius: 4px;
  border: 1px dashed color-mix(in srgb, var(--cor) 40%, transparent);
  font: 400 13px/1.2 var(--jb-font-body); color: var(--jb-text-3, var(--jb-text-2)); text-align: center; }
.quadro-mais { border: 0; background: none; cursor: pointer; padding: 10px 2px; border-radius: 8px;
  font: 500 13px/1 var(--jb-font-body); color: var(--jb-text-2); text-align: center; }
.quadro-mais:hover { color: var(--jb-text); background: color-mix(in srgb, var(--jb-text) 4%, transparent); }

/* 🤝 "Com outros · N" no fim da coluna viva (r11e, r11g): fio tracejado, rótulo
   centrado que recolhe, e os cartões esmaecidos com contorno tracejado. */
.quadro-outros { margin-top: 2px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--cor) 35%, transparent);
  display: flex; flex-direction: column; gap: 12px; }
.quadro-outros-cab { align-self: center; border: 0; background: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  color: var(--jb-text-2); }
.quadro-outros-cab { display: inline-flex; align-items: center; gap: 8px; }
/* no peso do cabeçalho de coluna e no cinza do TALVEZ?: a tinta fica só no título da coluna,
   senão o Próximo empilha dois títulos azuis */
.quadro-outros-nome { font: 600 12px/1 var(--jb-font-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--quadro-outros); }
.quadro-outros-n { font: 600 12px/1 var(--jb-font-ui); color: var(--jb-text-2); font-variant-numeric: tabular-nums; }
.quadro-outros-chevron { flex: none; margin-left: -2px; color: var(--quadro-outros); }
/* cada pedaço tem cor própria: o hover vale neles, não no botão */
.quadro-outros-cab:hover > * { color: var(--jb-text); }
.quadro-outros-lista { display: flex; flex-direction: column; gap: 16px; }
.quadro-outros-lista[hidden] { display: none; }

/* ── 390: as colunas empilham, a lombada deita ─────────────── */
@media (max-width: 640px) {
  .quadro-mesa { flex-direction: column; align-items: stretch; min-height: 0; }
  .quadro-mesa { overflow-x: visible; }
  .quadro-coluna { flex: none; max-width: none; min-width: 0; }
  .quadro-lombada { width: auto; min-height: 44px; height: 44px; align-items: center; margin: 0; flex-direction: row; justify-content: flex-start; padding: 0 14px 0 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--cor) 22%, var(--jb-ground)), transparent); }
  .quadro-lombada + .quadro-lombada { margin-left: 0; }
  .quadro-lombada-n { height: 44px; line-height: 44px; }
  .quadro-lombada-nome { writing-mode: horizontal-tb; line-height: 40px; padding: 0; }
  .quadro-outros-cab { min-height: 44px; padding: 0 12px; }
}