/* Estúdio de story (story.js). Folha própria, escopada em .estudio e body.modo-editor: o resto do app não depende dela.
   Tela clara como o app; o azul-marinho fica dentro do canvas, que é o momento da marca. */
.estudio {
  /* o estúdio não tem cor, raio, tamanho nem curva próprios: tudo vem direto dos tokens do app.css.
     A tela tem a altura exata da janela visível e não rola: a prévia fica com tudo o que sobra entre o topo e o painel. */
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 480px; color: var(--tinta);
}
body.modo-editor { padding-bottom: 0; overscroll-behavior: none; }
body.modo-editor .topo, body.modo-editor .nav { display: none; }
body.modo-editor main { padding: 0 16px; max-width: 560px; }

/* topo: voltar, título e as duas ferramentas da prévia (áreas do Instagram e ampliar), fora do canvas */
.es-topo { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; min-height: 52px;
  padding-top: env(safe-area-inset-top); }
.es-voltar { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; margin-left: -8px; padding: 0 8px;
  color: var(--navy); font-weight: 600; font-size: var(--t-3); text-decoration: none; border-radius: var(--r-2); }
.es-voltar svg { width: 20px; height: 20px; }
.es-voltar:active { background: var(--fundo-2); }
.es-topo h1 { font-size: var(--t-3); font-weight: 800; letter-spacing: -.01em; text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-topo h1::after { display: none; }
.es-ferramentas { display: flex; gap: 2px; margin-right: -8px; }
.es-ferr { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--navy);
  cursor: pointer; transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.es-ferr svg { width: 22px; height: 22px; }
.es-ferr:active { background: var(--fundo-2); transform: scale(.94); }
.es-ferr[aria-pressed="true"] { background: var(--amarelo); }

/* palco: a prévia em 9:16, do maior tamanho que cabe na sobra da tela (largura e altura medidas pelo contêiner) */
.es-palco { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.es-vista { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.es-quadro { position: relative; height: 100%; max-width: 100%; height: min(100cqh, 100cqw * 16 / 9);
  aspect-ratio: 9 / 16; border-radius: var(--r-2); overflow: hidden; background: var(--navy);
  box-shadow: var(--sombra-3); }
.es-quadro canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.es-quadro canvas.arrastando { cursor: grabbing; }
.es-antes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: clip-path, opacity; }
/* o cabeçote da impressora: um fio dourado com a sombra para baixo, correndo à frente do documento novo */
.es-cabecote { position: absolute; left: 0; right: 0; top: 0; height: 3px; margin-top: -1.5px; background: var(--amarelo); pointer-events: none; will-change: transform;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--navy-0) 55%, transparent); }
.es-zona { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: 0; transition: opacity .2s var(--ease);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--amarelo) 42%, transparent) 0 6px, color-mix(in srgb, var(--amarelo) 14%, transparent) 6px 12px); }
.es-zona span { font-size: var(--t-1); font-weight: 600; color: var(--navy); background: var(--amarelo);
  padding: 3px 8px; border-radius: var(--r-1); }
.es-zona-topo { top: 0; height: 13.02%; justify-content: flex-start; padding-left: 8px; border-bottom: 1.5px dashed var(--amarelo); }
.es-zona-pe { bottom: 0; height: 17.71%; border-top: 1.5px dashed var(--amarelo); }
.es-quadro.com-zona .es-zona { opacity: 1; }
.es-dica { flex: none; min-height: 1.4em; margin: 0; font-size: var(--t-1); line-height: 1.4; color: var(--suave); text-align: center; text-wrap: balance; }

/* Ampliar: o palco toma a tela inteira, com uma barra própria em cima (áreas e Pronto). O mesmo canvas, maior. */
.es-enq-topo { display: none; }
.estudio.enquadrando .es-palco { position: fixed; inset: 0; z-index: 60; background: var(--papel); gap: 6px;
  padding: env(safe-area-inset-top) 12px calc(10px + env(safe-area-inset-bottom)); }
.estudio.enquadrando .es-enq-topo { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 52px; }
.es-enq-topo .es-ferramentas { margin: 0 0 0 -4px; }
.es-enq-topo b { font-size: var(--t-3); font-weight: 800; }
.es-pronto { justify-self: end; min-height: 44px; padding: 0 var(--e-5); border: 0; border-radius: var(--r-pilula); background: var(--navy); color: var(--branco);
  font-family: var(--fonte-corpo); font-weight: 700; font-size: var(--t-2); cursor: pointer; transition: transform var(--dur-1) var(--ease); }
.es-pronto:active { transform: scale(.96); }
.estudio.enquadrando .es-palco { animation: es-amplia var(--dur-2) var(--ease) both; }
@keyframes es-amplia { from { opacity: 0; } }

/* painel: duas abas (Modelo e Foto) e uma bandeja de altura fixa, para a prévia não pular quando a aba troca */
.es-painel { flex: none; padding-top: 6px; }
.es-abas { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.es-seletor { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pilula); background: var(--fundo-2); }
.es-seletor button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-radius: var(--r-pilula);
  background: transparent; color: var(--navy); font-family: var(--fonte-corpo); font-weight: 700; font-size: var(--t-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.es-seletor button[aria-selected="true"] { background: var(--branco); box-shadow: var(--sombra-1); }
.es-seletor .es-conta { margin: 0; }
.es-bandeja { height: 76px; display: flex; align-items: center; }
.es-bandeja[hidden] { display: none; }
.es-bandeja > * { flex: 1 1 auto; min-width: 0; }
.es-abas .es-troca[hidden] { display: none; }
/* a chave da aba divide a linha com o seletor: uma linha só, e o rótulo encolhe antes de quebrar */
.es-abas .es-troca { min-width: 0; gap: var(--e-2); padding: 0 0 0 4px; white-space: nowrap; }
.es-abas .es-troca:not([hidden]) { display: inline-flex; }

.es-conta { font-family: var(--mono); font-size: var(--t-1); font-weight: 500; color: var(--suave); margin-left: 6px; }

/* modelos: trilho que rola, com a borda direita esmaecida e a pílula seguinte cortada para mostrar que continua */
.es-modelos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none;
  scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--tinta) 14px, var(--tinta) calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, var(--tinta) 14px, var(--tinta) calc(100% - 44px), transparent); }
.es-modelos::-webkit-scrollbar { display: none; }
.es-modelos::after { content: ''; flex: 0 0 28px; }
.es-chip { flex: none; min-height: 44px; padding: 0 var(--e-5); border: 0; border-radius: var(--r-pilula); background: var(--fundo-2); color: var(--navy);
  font-family: var(--fonte-corpo); font-weight: 700; font-size: var(--t-2); white-space: nowrap; scroll-snap-align: start; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.es-chip.ativo { background: var(--navy); color: var(--branco); }
.es-chip:active { transform: scale(.95); }

/* fotos */
.es-fotos { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.es-fotos::-webkit-scrollbar { display: none; }
.es-mini { position: relative; flex: none; width: 50px; height: 68px; padding: 0; border: 0; border-radius: var(--r-2); overflow: hidden; background: var(--fundo-2);
  scroll-snap-align: start; cursor: pointer; }
.es-mini img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-2) var(--ease); }
.es-mini::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); box-shadow: inset 0 0 0 0 var(--amarelo); transition: box-shadow .2s var(--ease); }
.es-mini.escolhida::after { box-shadow: inset 0 0 0 4px var(--amarelo); }
.es-mini:active img { transform: scale(.95); }
.es-mini i { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-family: var(--mono); font-size: var(--t-1); font-weight: 600; line-height: 1;
  color: var(--navy); background: var(--amarelo); padding: 3px 5px; border-radius: var(--r-1); }
.es-vazio { font-size: var(--t-2); color: var(--suave); margin: 4px 0 2px; }

/* chaves de liga e desliga, no rótulo de cada grupo */
.es-troca { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 4px 0 8px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--navy); font-weight: 600; font-size: var(--t-2); cursor: pointer; transition: background-color .18s var(--ease); }
.es-troca:active { background: var(--fundo-2); }
.es-troca i { position: relative; width: 34px; height: 20px; border-radius: var(--r-pilula); background: var(--linha-forte); transition: background-color .2s var(--ease); flex: none; }
.es-troca i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--branco);
  box-shadow: var(--sombra-1); transition: transform .22s var(--ease); }
.es-troca[aria-pressed="true"] i { background: var(--navy); }
.es-troca[aria-pressed="true"] i::after { transform: translateX(14px); }
.es-troca:disabled { opacity: .5; cursor: default; }

/* pé fixo: Salvar e Compartilhar lado a lado */
.es-pe { flex: none; padding: 4px 0 calc(10px + env(safe-area-inset-bottom)); }
.es-botoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e-3); }
.es-salvar, .es-enviar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; border-radius: var(--r-2);
  font-family: var(--fonte-corpo); font-weight: 800; font-size: var(--t-3); cursor: pointer; transition: transform .12s var(--ease), background-color .15s; }
.es-salvar { background: var(--branco); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.es-enviar { background: var(--amarelo); color: var(--navy); }
.es-salvar svg, .es-enviar svg { width: 20px; height: 20px; flex: none; }
.es-salvar:active, .es-enviar:active { transform: scale(.97); }
.es-enviar:active { background: var(--amarelo-2); }
.es-legenda { margin-top: 6px; font-size: var(--t-1); line-height: 1.4; color: var(--suave); text-align: center; text-wrap: balance; }

.estudio :focus-visible { outline: 2.5px solid var(--cidade); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .estudio *, .estudio *::before, .estudio *::after { transition-duration: .01ms !important; }
  .estudio.enquadrando .es-palco { animation: none; }
}