/* CASA CASINHA — BRINCAR
   A mesa de colagem. Tela de aplicativo, não de página: o corpo não
   rola, a mesa ocupa o que sobra entre o topo e a gaveta. */

/* A oficina ocupava `calc(100svh - 62px)`, com o 62 chutado pra altura do
   topo. Onde o topo mede mais que isso — e mede — a gaveta vazava pra
   fora da tela e os nomes das peças ficavam abaixo da dobra, sem jeito de
   rolar. Agora é coluna flex: o topo ocupa o que ocupa, a oficina fica
   com o resto, exato, em qualquer tela. Número chutado não sabe medir. */
.corpo-mesa{
  height:100svh;
  display:flex; flex-direction:column;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

.topo--mesa{ position:relative; z-index:30; flex:none; padding:10px var(--cc-margem); }
.topo--mesa .nav{ gap:7px; }

.oficina{
  position:relative;
  display:flex; flex-direction:column;
  flex:1; min-height:0;
}

/* ---------------------------------------------------------------- mesa */

/* A COR DA MESA É DA PESSOA, NÃO DA MARCA
   O papel continua sendo o chão do site. Aqui dentro é a parede da casa
   que ela está montando — e essa ela escolhe. Cada cor traz junto a
   tinta que se lê em cima dela: em fundo escuro, o traço e o texto
   viram papel, senão sumiriam. */
.mesa{
  position:relative;
  flex:1;
  margin:0 var(--cc-margem);
  --tinta-mesa:23,23,23;
  background:var(--fundo-mesa, transparent);
  border:1.5px dashed rgba(var(--tinta-mesa),.22);
  transition:background-color .3s var(--cc-ease);
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.mesa__vazia{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  margin:0; padding:0 var(--cc-s3);
  text-align:center;
  pointer-events:none;
}
.mesa__vazia-titulo{
  display:block;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:22px; line-height:1.2;
  margin-bottom:var(--cc-s2);
}
.mesa__vazia .rotulo{ display:block; color:rgba(var(--tinta-mesa),.6); }
.mesa[data-escuro]{ --tinta-mesa:246,240,229; }
.mesa[data-escuro] .mesa__vazia-titulo{ color:rgb(var(--tinta-mesa)); }
@media (prefers-reduced-motion:reduce){ .mesa{ transition:none; } }

/* ------------------------------------------------------- cor do fundo */
.fundos{
  display:flex; align-items:center; gap:8px;
  padding:0 var(--cc-margem) var(--cc-s2);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.fundos__rotulo{
  font-family:var(--cc-font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cc-ink-60);
  flex:none; margin-right:2px;
}
.fundo{
  flex:none; width:44px; height:44px; padding:0;
  border:1.5px solid rgba(23,23,23,.22);
  background:var(--cor, var(--cc-paper));
  cursor:pointer;
  transition:border-color .18s var(--cc-ease), box-shadow .18s var(--cc-ease);
}
.fundo:hover, .fundo:focus-visible{ border-color:var(--cc-blue); }
.fundo[aria-checked="true"]{
  border-color:var(--cc-ink);
  box-shadow:inset 0 0 0 3px var(--cc-paper), inset 0 0 0 4.5px var(--cc-ink);
}
@media (prefers-reduced-motion:reduce){ .fundo{ transition:none; } }
.mesa[data-cheia] .mesa__vazia{ display:none; }

/* ---------------------------------------------------------------- peça */

.peca{
  position:absolute; left:0; top:0;
  transform-origin:50% 50%;
  cursor:grab;
  touch-action:none;
}
.peca .desenho{ width:100%; height:100%; pointer-events:none; }
.peca[data-travada]{ cursor:default; }

/* contorno de seleção: um retângulo desenhado, discreto */
.peca__contorno{
  position:absolute; inset:-6px;
  border:1.5px dashed var(--cc-ink);
  opacity:0; pointer-events:none;
  transition:opacity .14s var(--cc-ease);
}
.peca[data-sel] .peca__contorno{ opacity:.5; }
.peca[data-sel][data-travada] .peca__contorno{ border-style:solid; border-color:var(--cc-ink-40); }

/* alças: área de toque grande, ponto pequeno */
.alca{
  position:absolute;
  width:40px; height:40px;
  display:none; place-items:center;
  touch-action:none;
}
.peca[data-sel]:not([data-travada]) .alca{ display:grid; }
.alca::after{
  content:'';
  width:13px; height:13px;
  border:2px solid var(--cc-ink);
  background:var(--cc-paper);
}
.alca--girar{ top:-26px; right:-26px; }
.alca--girar::after{ border-radius:50%; border-color:var(--cc-blue); }
.alca--tamanho{ bottom:-26px; right:-26px; }
.alca--tamanho::after{ border-color:var(--cc-red); }

/* cadeadinho desenhado quando a peça está travada */
.peca__trava{
  position:absolute; top:-9px; left:-9px;
  width:18px; height:18px;
  display:none;
  color:var(--cc-ink-40);
}
.peca[data-sel][data-travada] .peca__trava{ display:block; }

/* ------------------------------------------------------- barra da peça */

/* A barra da peça selecionada.
   Antes era uma fila que rolava de lado com a rolagem escondida: no
   telefone o último botão — logo o "tirar", o único destrutivo — ficava
   cortado na borda, e nada indicava que havia mais coisa ali. Fila que
   rola sem dizer que rola é o mesmo que botão que não existe.

   Agora quebra a linha. Ocupa dois dedos de altura a mais e não esconde
   nada. E o nome da peça ganha ar em cima, pra não colar na mesa. */

.acoes{
  flex:none;
  padding:var(--cc-s2) 0 var(--cc-s1);
  margin:0 var(--cc-margem);
}
.acoes__nome{
  margin:0 0 var(--cc-s1);
  color:var(--cc-ink);
  font-family:var(--cc-font-display); font-weight:600;
  font-size:15px;
  text-transform:lowercase;
}
.acoes__linha{
  display:flex; flex-wrap:wrap; gap:6px;
}
.acoes__linha .arquivo{
  flex:0 0 auto;
  min-height:38px;
  padding:6px 10px;
  font-size:12px;
  transform:none;
}
.arquivo--tirar{ border-color:var(--cc-red); color:var(--cc-red); }

/* O AVISO, NA MESA
   O aviso nasce colado no rodapé. Aqui embaixo é justamente onde ficam a
   barra da peça e a gaveta — e a dica "arraste pra mover" acabava tapando
   os botões que ela estava explicando. Na mesa ele sobe pro meio da área
   de composição, onde não cobre controle nenhum. */
.corpo-mesa .aviso{
  bottom:auto; top:74px;
  transform:translate(-50%,10px) rotate(-1.4deg);
}
.corpo-mesa .aviso[data-visivel]{ transform:translate(-50%,0) rotate(-1.4deg); }

/* -------------------------------------------------------------- gaveta */

.gaveta{
  flex:none;
  border-top:2px solid var(--cc-ink);
  background:var(--cc-paper);
  margin-top:var(--cc-s2);
  padding-bottom:env(safe-area-inset-bottom);
}

/* PEÇAS de um lado, o que se faz com a mesa do outro. No telefone os
   quatro não cabem numa linha só — e o que sobrava pra fora era sempre o
   último botão. Então a linha quebra: PEÇAS em cima, as ações embaixo,
   inteiras. */
/* A BARRINHA DIZ O QUE O DEDO PODE FAZER
   Antes havia só uma seta. Seta promete deslizar, e a gaveta só aceitava
   toque — o dedo subia e não acontecia nada. Agora a gaveta desliza e a
   barrinha é quem anuncia isso; a seta ficou só como indicação de estado. */
.gaveta__pega{
  display:block; width:44px; height:5px; margin:8px auto 2px;
  border-radius:3px; background:var(--cc-ink);
  opacity:.22; transition:opacity .2s var(--cc-ease);
}
.gaveta[data-arrastando] .gaveta__pega{ opacity:.5; }

.gaveta__puxador{
  touch-action:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--cc-s1) var(--cc-s2);
  flex-wrap:wrap;
  padding:10px var(--cc-margem);
}
.gaveta__abrir{
  display:flex; align-items:center; gap:9px;
  min-height:44px;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:19px; letter-spacing:.06em;
}
.gaveta__seta{ display:block; transition:transform .22s var(--cc-ease); }
@media (prefers-reduced-motion:reduce){
  .gaveta__pega, .gaveta__seta{ transition:none; }
}
.gaveta__seta .gesto--seta{ width:24px; transform:rotate(-90deg); }
.gaveta[data-aberta] .gaveta__seta{ transform:rotate(180deg); }

.gaveta__guardar{ display:flex; gap:6px; flex:1 1 auto; justify-content:flex-end; }
.gaveta__guardar .etiqueta{ flex:0 1 auto; white-space:nowrap; }

/* No telefone estreito PEÇAS fica sozinho em cima e as três ações dividem
   a linha de baixo — três linhas viravam gaveta alta demais. */
@media (max-width:460px){
  .gaveta__guardar{ flex-basis:100%; justify-content:space-between; }
  .gaveta__guardar .etiqueta--curta{ padding:8px 10px; font-size:14px; }
}
.etiqueta--curta{ min-height:40px; padding:8px 13px; font-size:15px; }
.cesta__conta{
  display:inline-grid; place-items:center;
  min-width:19px; height:19px; margin-left:5px; padding:0 4px;
  background:var(--cc-ink); color:var(--cc-paper);
  font-family:var(--cc-font-mono); font-size:11px;
}

/* ------------------------------------------------------------- cesta
   O ambiente montado vira lista de compras: uma linha por produto, com
   o id à mostra e o link ao lado. */

.cesta-fundo{
  position:fixed; inset:0; z-index:200;
  background:rgba(23,23,23,.3);
  opacity:0; pointer-events:none;
  transition:opacity .24s var(--cc-ease);
}
.cesta-fundo[data-aberta]{ opacity:1; pointer-events:auto; }

.cesta{
  position:fixed; left:0; right:0; bottom:0; z-index:210;
  max-height:82svh; overflow-y:auto; overscroll-behavior:contain;
  padding:0 var(--cc-margem) calc(var(--cc-s4) + env(safe-area-inset-bottom));
  background:var(--cc-paper-hi);
  border-top:2px solid var(--cc-ink);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .32s var(--cc-ease), visibility 0s linear .32s;
}
.cesta[data-aberta]{
  transform:translateY(0);
  visibility:visible;
  transition:transform .32s var(--cc-ease), visibility 0s;
}
/* mesma história da ficha em base.css: fechada, some de vez */
@media (min-width:760px){
  .cesta{
    left:auto; right:var(--cc-s4); bottom:var(--cc-s4); width:440px;
    border:2px solid var(--cc-ink); max-height:76svh;
    transform:translateY(calc(100% + var(--cc-s4) + 8px));
  }
  .cesta[data-aberta]{ transform:translateY(0); }
}

.cesta__linha{ margin:var(--cc-s2) 0 0; }
.cesta__lista{ list-style:none; margin:var(--cc-s2) 0 0; padding:0; }

/* Três colunas: recorte, texto, destino. A terceira era `auto`, e `auto`
   não sabe encolher — com "onde encontrar" ou "ainda sem link" a coluna
   pedia mais largura do que a folha tinha e o texto saía pela borda no
   telefone. Agora o texto manda na terceira coluna só até certo ponto, e
   o meio cede primeiro. */
.cesta__item{
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) auto;
  align-items:center; gap:var(--cc-s2);
  padding:var(--cc-s2) 0;
  border-top:var(--cc-line);
}
.cesta__item > *:last-child{ justify-self:end; max-width:min(46vw, 190px); }
.cesta__item:last-child{ border-bottom:var(--cc-line); }
.cesta__peca{ display:grid; place-items:center; }
.cesta__peca .peca-foto{ max-height:56px; width:auto; max-width:100%; }
.cesta__peca .peca-foto--pendente{ width:100%; }

.cesta__texto{ min-width:0; }
.cesta__nome{
  display:block;
  font-family:var(--cc-font-display); font-weight:600;
  font-size:16px; line-height:1.2;
}
.cesta__meta{
  display:block;
  font-family:var(--cc-font-mono); font-size:12px; line-height:1.5;
  color:var(--cc-ink-60); margin-top:2px;
}
.cesta__id{
  font-weight:700; color:var(--cc-ink);
  background:var(--cc-yellow); padding:1px 5px;
}
.cesta__preco{ white-space:nowrap;
  display:block;
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  color:var(--cc-red); margin-top:2px;
}
/* preço que não existe não merece o vermelho do preço que existe */
.cesta__preco--vago{ color:var(--cc-ink-40); }
.cesta__link{ flex:none; text-align:center; white-space:normal; line-height:1.25; }
.cesta__sem{
  flex:none;
  min-height:0; padding:0; border:0; transform:none;
  font-family:var(--cc-font-mono); font-size:12px;
  color:var(--cc-ink-40);
  text-align:right; max-width:11ch; line-height:1.4;
  white-space:normal; overflow-wrap:anywhere;
}

.cesta__soma{
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  margin:var(--cc-s3) 0 0;
}

.gaveta__corpo{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s var(--cc-ease);
}
/* A mesa é o assunto; a gaveta é a gaveta. Aberta, ela tomava 46svh e
   sobrava 31% de board no notebook — a pessoa montava a casinha numa
   faixa. O teto cai, e em tela baixa cai mais: é a altura que falta, não
   a largura. */
.gaveta[data-aberta] .gaveta__corpo{ max-height:38svh; }


.gaveta__categorias{
  display:flex; gap:6px;
  overflow-x:auto;
  padding:0 var(--cc-margem) var(--cc-s1);
  scrollbar-width:none;
}
.gaveta__categorias::-webkit-scrollbar{ display:none; }
.gaveta__categorias .arquivo{ flex:none; }

.gaveta__pecas{
  display:flex; align-items:flex-end; gap:var(--cc-s3);
  overflow-x:auto;
  padding:var(--cc-s2) var(--cc-margem) var(--cc-s3);
  scrollbar-width:none;
}
.gaveta__pecas::-webkit-scrollbar{ display:none; }

/* recortes na prateleira: o objeto é a interface, não o card

   A caixa tinha 82px de altura e só o DESENHO era limitado a 82. Foto
   recortada é `.peca-foto` — `width:100%, height:auto` — então um vaso
   alto e estreito abria com o dobro do tamanho, passava por cima do
   próprio nome e empurrava a prateleira inteira pra cima do board.
   Vinte e cinco das oitenta e quatro faziam isso. Agora a caixa manda na
   imagem, aqui como em toda parte. */
.prato{
  flex:none;
  width:94px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center;
  transition:transform .16s var(--cc-ease);
}
.prato:active{ transform:translateY(2px) rotate(-1.5deg); }
.prato__peca{
  display:grid; place-items:end center;
  width:100%; height:82px;
  overflow:hidden;
}
.prato__peca .desenho,
.prato__peca .peca-foto{
  max-height:82px; max-width:100%;
  width:auto; height:auto;
  object-fit:contain; object-position:center bottom;
}
.prato__peca .peca-foto--pendente{ width:100%; height:100%; max-height:82px; }
.prato__nome{
  font-family:var(--cc-font-mono); font-size:11px; line-height:1.35;
  color:var(--cc-ink-60);
}

/* Tela baixa — notebook, telefone deitado. Aqui o que falta é altura, não
   largura, então a media query pergunta pela altura. E vem DEPOIS das
   regras do prato de propósito: mesma especificidade, quem vem por
   último manda. Escrita antes, ela não valia nada. */
@media (max-height:780px){
  .gaveta[data-aberta] .gaveta__corpo{ max-height:30svh; }
  .gaveta__pecas{ padding-top:8px; padding-bottom:var(--cc-s2); }
  .prato{ width:78px; }
  .prato__peca{ height:56px; }
  .prato__peca .desenho,
  .prato__peca .peca-foto,
  .prato__peca .peca-foto--pendente{ max-height:56px; }
  .prato__nome{ font-size:10px; }
}

.prateleira-vazia{
  padding:var(--cc-s3) var(--cc-margem);
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  color:var(--cc-ink-60);
}

@media (min-width:760px){
  .mesa{ margin:0 auto; width:min(680px, calc(100% - 48px)); }
  .acoes, .gaveta__puxador{ max-width:680px; margin-left:auto; margin-right:auto; }
}