/* Hallmark · bancada: embaralhador. Um botão gera um rascunho inteiro
   a partir de uma receita verificada. Tokens do rascunho vivem em .rascunho,
   nunca no :root do portfólio. */

.bancada {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) min(320px, 34vw);
  background: var(--papel);
}
.bancada__trilho {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 8;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--passo);
  padding: calc(var(--passo) * 1.5) var(--margem-pagina);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
}
.bancada__voltar { font-size: 0.9rem; }
.bancada__marca { display: flex; align-items: center; gap: var(--passo); min-width: 0; }
.bancada__marca .regua { width: 26px; flex: none; }
.bancada__titulo { font-family: var(--fonte-display); font-size: 1.2rem; margin: 0; }
.bancada__aviso { margin: 0; font-size: 0.82rem; color: var(--tinta-fraca); max-width: 42ch; }
.bancada__palco {
  overflow: auto;
  padding: calc(var(--passo) * 4) var(--margem-pagina);
  background: color-mix(in srgb, var(--tinta) 4%, var(--papel));
}
.bancada__dock {
  border-left: 1px solid var(--linha);
  overflow: auto;
  padding: calc(var(--passo) * 2.5);
  display: grid;
  gap: calc(var(--passo) * 2.5);
  align-content: start;
}

.eixo { border: 0; padding: 0; margin: 0; }
.eixo legend { margin-bottom: var(--passo); padding: 0; }
.opcao { display: inline-flex; align-items: center; gap: 0.4em;
  margin: 0 var(--passo) var(--passo) 0; font-size: 0.9rem; cursor: pointer; }
.opcao input { accent-color: var(--acento-legivel); }

.receita { border: 1px solid var(--linha); padding: calc(var(--passo) * 1.8);
  display: grid; gap: calc(var(--passo) * 0.8); }
.receita__n { margin: 0; color: var(--quente-legivel); }
.receita__txt { margin: 0; font-size: 0.9rem; line-height: 1.5; }

.bancada__embaralhar { width: 100%; text-align: center; font-size: 1.05rem;
  padding-block: calc(var(--passo) * 1.8); }
.bancada__acoes { display: flex; flex-wrap: wrap; gap: var(--passo); }
.bancada__acao { font: inherit; font-size: 0.85rem; background: none;
  color: var(--tinta); border: 1px solid var(--linha);
  padding: 0.5em 0.9em; cursor: pointer; }
.bancada__acao:hover { border-color: var(--acento-legivel); color: var(--acento-legivel); }
.bancada__rotulo-guardados { margin: 0; }

.guardados { list-style: none; padding: 0; margin: 0;
  display: grid; gap: calc(var(--passo) * 0.8); }
.guardados__vazio { margin: 0; text-transform: none; letter-spacing: 0.02em;
  line-height: 1.5; font-size: 0.75rem; }
.guardados__item { display: flex; gap: var(--passo); align-items: center; }
.guardados__restaurar { font: inherit; font-size: 0.85rem; background: none;
  border: 0; border-bottom: 1px solid var(--linha); color: var(--tinta);
  cursor: pointer; padding: 0 0 0.15em; flex: 1; text-align: left; }
.guardados__restaurar:hover { color: var(--acento-legivel); border-color: var(--acento-legivel); }
.guardados__tirar { font: inherit; background: none; border: 0;
  color: var(--tinta-fraca); cursor: pointer; line-height: 1; font-size: 1rem; }

/* ---- a folha ---- */

.rascunho {
  --papel: #F3F0E8; --tinta: #151A1E; --tinta-fraca: #5F686C;
  --linha: rgba(21, 26, 30, 0.14);
  --acento: #167A68; --acento-legivel: #167A68; --acento-sobre: #F3F0E8;
  --fonte-display: "Familjen Grotesk", system-ui, sans-serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ritmo: 1;
  --passo: calc(8px * var(--densidade, 1));
  max-width: 720px; margin-inline: auto;
  padding: calc(var(--passo) * 5);
  background: var(--papel); color: var(--tinta);
  font-family: var(--fonte-texto);
  border: 1px solid var(--linha);
  position: relative;
}

/* paletas verificadas (contraste AA por par) */
.rascunho[data-paleta="grafite"] { --papel: #151A1E; --tinta: #F3F0E8; --tinta-fraca: #99A1A5;
  --linha: rgba(243,240,232,0.18); --acento: #1A927C; --acento-legivel: #1A927C; --acento-sobre: #151A1E; }
.rascunho[data-paleta="quente"] { --papel: #F6F1E7; --tinta: #2E2A26; --tinta-fraca: #6B6259;
  --linha: rgba(46,42,38,0.16); --acento: #9E4F2F; --acento-legivel: #9E4F2F; --acento-sobre: #F6F1E7; }
.rascunho[data-paleta="gazeta"] { --papel: #ECEBE4; --tinta: #1A1C1E; --tinta-fraca: #5D5F5C;
  --linha: rgba(26,28,30,0.16); --acento: #B3402A; --acento-legivel: #B3402A; --acento-sobre: #ECEBE4; }
.rascunho[data-paleta="noturno"] { --papel: #121417; --tinta: #F3F0E8; --tinta-fraca: #A8AFB3;
  --linha: rgba(243,240,232,0.18); --acento: #D98A67; --acento-legivel: #D98A67; --acento-sobre: #121417; }
.rascunho[data-paleta="duplo"] { --papel: #F3F0E8; --tinta: #151A1E; --tinta-fraca: #5F686C;
  --linha: rgba(21,26,30,0.14); --acento: #167A68; --acento-legivel: #167A68; --acento-sobre: #F3F0E8; }

/* sistemas tipográficos (Fraunces e Space Grotesk: só no rascunho, OFL) */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/spacegrotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; }
.rascunho[data-tipo="fraunces"] { --fonte-display: "Fraunces", Georgia, serif; }
.rascunho[data-tipo="fraunces"] .rascunho__nome { font-weight: 560; letter-spacing: 0; }
.rascunho[data-tipo="space"] { --fonte-display: "Space Grotesk", system-ui, sans-serif; }
.rascunho[data-tipo="space"] .rascunho__nome { letter-spacing: -0.01em; }
.rascunho[data-tipo="expediente"] { --fonte-display: "IBM Plex Mono", ui-monospace, monospace; }
.rascunho[data-tipo="expediente"] .rascunho__nome { text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.9rem, 6.5vw, 3.8rem); }
.rascunho[data-tipo="console"] { --fonte-texto: "IBM Plex Mono", ui-monospace, monospace; }
.rascunho[data-tipo="console"] .rascunho__nome { font-weight: 600; letter-spacing: -0.04em;
  font-size: clamp(2.4rem, 8vw, 4.8rem); }

/* capas */
.rascunho[data-capa="centro"] .rascunho__capa { text-align: center; }
.rascunho[data-capa="centro"] .rascunho__cta { margin-inline: auto; }
.rascunho[data-capa="centro"] .rascunho__oficio { margin-inline: auto; }
.rascunho[data-capa="carimbo"] .rascunho__nome { display: inline-block;
  border: 2px solid currentColor; padding: calc(var(--passo) * 1.2) calc(var(--passo) * 2); }
.rascunho[data-capa="pautado"] .rascunho__capa {
  background-image: repeating-linear-gradient(to bottom, transparent 0,
    transparent calc(1.65em - 1px), var(--linha) calc(1.65em - 1px), var(--linha) 1.65em); }

/* paleta duplo: capa invertida */
.rascunho[data-paleta="duplo"] .rascunho__capa {
  background: #151A1E; color: #F3F0E8;
  /* o bloco invertido troca os TOKENS, não só o color: qualquer filho que
     use var(--tinta) (h1, h2, h3) tem que virar marfim junto, senão o nome
     sai escuro sobre escuro. Esmeralda do kit dá 3,3:1 aqui, então o acento
     legível sobe para o tom claro. */
  --tinta: #F3F0E8; --tinta-fraca: #9AA3A7;
  --linha: rgba(243, 240, 232, 0.18);
  --acento-legivel: #1A927C;
  margin: calc(var(--passo) * -5) calc(var(--passo) * -5) calc(var(--passo) * 4);
  padding: calc(var(--passo) * 5); }

/* listas */
.rascunho__areas { list-style: none; padding: 0; margin: 0;
  display: grid; gap: calc(var(--passo) * 2); }
.rascunho__areas li { display: grid; gap: 0.25em;
  border-top: 1px solid var(--linha); padding-top: var(--passo); }
.rascunho__areas b { font-family: var(--fonte-display); font-weight: 500; font-size: 1.25rem; }
.rascunho[data-lista="numerada"] .rascunho__areas { counter-reset: bloco; }
.rascunho[data-lista="numerada"] .rascunho__areas b::before {
  counter-increment: bloco;
  content: counter(bloco, decimal-leading-zero);
  font-family: var(--fonte-mono); font-size: 0.72rem; font-weight: 400;
  color: var(--tinta-fraca); margin-right: 0.6em; }
.rascunho[data-lista="grade"] .rascunho__areas { grid-template-columns: repeat(3, 1fr); }
.rascunho[data-lista="grade"] .rascunho__areas b { font-size: 1.05rem; }
.rascunho[data-lista="tabela"] .rascunho__areas li {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.2em 1em; }
.rascunho[data-lista="tabela"] .rascunho__areas b { font-family: var(--fonte-mono);
  font-size: 0.95rem; font-weight: 500; }
.rascunho[data-lista="tabela"] .rascunho__areas span { font-size: 0.9rem;
  color: var(--tinta-fraca); }

/* ritmo */
.rascunho[data-ritmo="compacto"] { --ritmo: 0.7; }
.rascunho[data-ritmo="espacado"] { --ritmo: 1.4; }
.rascunho__secao { margin: 0 0 calc(var(--passo) * 4 * var(--ritmo)); }
.rascunho__capa { margin-bottom: calc(var(--passo) * 4 * var(--ritmo)); }

/* resto da folha */
.rascunho__selo { font-family: var(--fonte-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca);
  margin: 0 0 calc(var(--passo) * 3); }
.rascunho__lugar { font-family: var(--fonte-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0; }
.rascunho__nome { font-family: var(--fonte-display); font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: 1.02;
  margin: calc(var(--passo) * 1.5) 0; overflow-wrap: anywhere; min-width: 0; }
.rascunho__oficio { max-width: 42ch; margin: 0 0 calc(var(--passo) * 3); }
.rascunho__cta { display: inline-block; font-family: var(--fonte-texto);
  padding: calc(var(--passo) * 1.3) calc(var(--passo) * 2.4);
  border: 1px solid var(--acento); border-radius: 0;
  background: var(--acento); color: var(--acento-sobre);
  text-decoration: none; margin-bottom: calc(var(--passo) * 1); }
.rascunho[data-cantos="suave"] .rascunho__cta { border-radius: 6px; }
.rascunho[data-cantos="pilula"] .rascunho__cta { border-radius: 999px; }
.rascunho[data-botao="contorno"] .rascunho__cta {
  background: transparent; color: var(--acento-legivel); border-color: var(--acento-legivel); }
.rascunho[data-botao="sublinhado"] .rascunho__cta {
  background: transparent; border-color: transparent; color: var(--acento-legivel);
  padding-inline: 0; border-bottom: 2px solid var(--acento-legivel); }
.rascunho[data-cantos="suave"] { border-radius: 6px; }
.rascunho__rotulo { margin: 0 0 calc(var(--passo) * 1.5); }
.rascunho__linha { max-width: 48ch; margin: 0; }
.rascunho__pe { margin: calc(var(--passo) * 3) 0 0; font-size: 0.88rem;
  color: var(--tinta-fraca); max-width: 48ch; }

/* animação do embaralho: só transform e opacity */
.rascunho .anim { transition: opacity 240ms var(--saida, ease), transform 240ms var(--saida, ease); }
.rascunho.trocando .anim { opacity: 0; transform: translateY(8px);
  transition: none; }
.rascunho.nascendo .anim { animation: rascunho-nasce 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rascunho.nascendo .anim:nth-child(1) { animation-delay: 40ms; }
.rascunho.nascendo .anim:nth-child(2) { animation-delay: 100ms; }
.rascunho.nascendo .anim:nth-child(3) { animation-delay: 160ms; }
.rascunho.nascendo .anim:nth-child(4) { animation-delay: 220ms; }
@keyframes rascunho-nasce {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rascunho__varredura { position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--acento); z-index: 2;
  transform: scaleX(0); transform-origin: left; }
.rascunho__varredura.ida { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: scaleX(1); transform-origin: left; }
.rascunho__varredura.volta { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: scaleX(0); transform-origin: right; }
@media (prefers-reduced-motion: reduce) {
  .rascunho .anim { animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important; }
  .rascunho__varredura { display: none; }
}

@media (max-width: 860px) {
  .bancada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .bancada__trilho { grid-template-columns: 1fr auto; }
  .bancada__aviso { grid-column: 1 / -1; }
  .bancada__dock { border-left: 0; border-top: 1px solid var(--linha); }
  .rascunho[data-lista="grade"] .rascunho__areas { grid-template-columns: 1fr; }
  .rascunho[data-paleta="duplo"] .rascunho__capa { margin-inline: calc(var(--passo) * -2); }
}

/* ---- estruturas: o esqueleto da folha muda, não só a cor ---- */

/* editorial: capa larga, seções em duas colunas */
.rascunho[data-estrutura="editorial"] .rascunho__miolo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--passo) * 3) calc(var(--passo) * 4); align-items: start; }
.rascunho[data-estrutura="editorial"] .rascunho__capa { grid-column: 1 / -1; }
.rascunho[data-estrutura="editorial"] .rascunho__secao:first-of-type { grid-column: 1 / -1; }
.rascunho[data-estrutura="editorial"] .rascunho__nome { font-size: clamp(2rem, 7vw, 3.4rem); }

/* cartaz: o nome ocupa a folha, o resto é rodapé */
.rascunho[data-estrutura="cartaz"] .rascunho__capa {
  min-height: 42vh; display: grid; align-content: center;
  border-bottom: 2px solid var(--acento);
  padding-bottom: calc(var(--passo) * 3); }
.rascunho[data-estrutura="cartaz"] .rascunho__nome {
  font-size: clamp(2.6rem, 12vw, 5.6rem); line-height: 0.95; }
.rascunho[data-estrutura="cartaz"] .rascunho__miolo { display: grid; }
.rascunho[data-estrutura="cartaz"] .rascunho__areas { grid-template-columns: repeat(3, 1fr); }
.rascunho[data-estrutura="cartaz"] .rascunho__areas b { font-size: 1rem; }
.rascunho[data-estrutura="cartaz"] .rascunho__rotulo { border-top: 1px solid var(--linha);
  padding-top: calc(var(--passo) * 1.2); }

/* ficha: tudo em filete, mono no rótulo, cara de documento */
.rascunho[data-estrutura="ficha"] .rascunho__secao,
.rascunho[data-estrutura="ficha"] .rascunho__capa {
  border-top: 1px solid var(--linha); padding-top: calc(var(--passo) * 2);
  margin-bottom: calc(var(--passo) * 2.5 * var(--ritmo)); }
.rascunho[data-estrutura="ficha"] .rascunho__nome { font-size: clamp(1.8rem, 6vw, 2.8rem); }
.rascunho[data-estrutura="ficha"] .rascunho__areas li {
  border-top: 1px dotted var(--linha); padding-top: var(--passo); }
.rascunho[data-estrutura="ficha"] .rascunho__linha,
.rascunho[data-estrutura="ficha"] .rascunho__oficio { font-size: 0.94rem; }

/* margem: o rótulo desce para a coluna da esquerda, o conteúdo fica à direita */
@media (min-width: 620px) {
  .rascunho[data-estrutura="margem"] .rascunho__secao {
    display: grid; grid-template-columns: 8rem minmax(0, 1fr);
    gap: calc(var(--passo) * 3); align-items: start; }
  .rascunho[data-estrutura="margem"] .rascunho__rotulo { margin: 0; }
  .rascunho[data-estrutura="margem"] .rascunho__capa {
    display: grid; grid-template-columns: 8rem minmax(0, 1fr);
    gap: calc(var(--passo) * 3); align-items: start; }
  .rascunho[data-estrutura="margem"] .rascunho__selo { grid-column: 1; margin: 0; }
  .rascunho[data-estrutura="margem"] .rascunho__lugar,
  .rascunho[data-estrutura="margem"] .rascunho__nome,
  .rascunho[data-estrutura="margem"] .rascunho__oficio,
  .rascunho[data-estrutura="margem"] .rascunho__cta { grid-column: 2; }
}

/* a grade do kit, quando a receita a sorteia */
.rascunho[data-grade="fina"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right,
    var(--linha) 0 1px, transparent 1px calc(100% / 6));
}

@media (max-width: 640px) {
  .rascunho[data-estrutura="editorial"] .rascunho__miolo,
  .rascunho[data-estrutura="cartaz"] .rascunho__areas { grid-template-columns: 1fr; }
}