/* ============================================================================
   Estúdio do pet: fluxo de uma pergunta por tela.
   Só tokens do design system (ds/wintech.css, tema pet-claro). Duas peças:
   o PALCO (foto → arte → tamanho → base), que nunca sai da tela, e o PAINEL,
   que troca de pergunta. A troca passa por View Transitions (estudio.js);
   sem suporte, ou com movimento reduzido, a tela só troca.
   ========================================================================== */
[hidden] { display: none !important; }

.es { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg-canvas);
  color: var(--fg-primary); font: 400 16px/1.5 var(--f-text); -webkit-tap-highlight-color: transparent; }
.es *, .es *::before, .es *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ topo -- */
.es-topo { position: sticky; top: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 44px 1fr 44px;
  align-items: center; height: 56px; padding: 0 var(--space-3); background: var(--bg-canvas); view-transition-name: es-topo; }
.es-icone { grid-column: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none;
  color: var(--fg-primary); border-radius: var(--radius-full); cursor: pointer; }
.es-icone:active { transform: scale(.94); }
.es-marca { grid-column: 2; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; }
.es-ajuda { grid-column: 3; justify-self: end; font-size: 14px; font-weight: 560; color: var(--fg-secondary); text-decoration: none;
  padding: var(--space-3) var(--space-1); }
.es-fio { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border-subtle); }
.es-fio i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left;
  transform: scaleX(var(--p, 0)); transition: transform var(--duration-slow) var(--ease-out-expo); }

/* ---------------------------------------------------------------- layout -- */
.es-main { display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto;
  min-height: calc(100dvh - 56px); }
.es-painel { flex: 1 0 auto; display: flex; flex-direction: column; padding: var(--space-5) var(--space-5) 0; view-transition-name: es-painel; }
.es-tela { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.es-pergunta { margin: 0; font: var(--display-weight) clamp(1.75rem, 1.35rem + 1.8vw, 2.375rem)/1.1 var(--font-display);
  letter-spacing: var(--display-tracking); text-wrap: balance; }
.es .es-pergunta:focus, .es .es-pergunta:focus-visible { outline: 0 !important; box-shadow: none !important; }
.es-sub { margin: calc(var(--space-2) * -1) 0 0; font-size: 16.5px; line-height: 1.5; color: var(--fg-secondary); text-wrap: pretty; }
.es-nota { margin: calc(var(--space-2) * -1) 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-tertiary); }
.es-alerta { color: var(--warning-fg); margin: 0; }
.es-legal { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-tertiary); text-align: center; text-wrap: pretty; }
.es-campos { display: grid; gap: var(--space-4); }
.es-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* O botão principal fica sempre ao alcance do polegar. */
.es-acoes { margin-top: auto; position: sticky; bottom: 0; display: grid; gap: var(--space-2);
  padding: var(--space-6) 0 calc(var(--space-4) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg-canvas) var(--space-6)); }
.es-link { justify-self: center; border: 0; background: none; padding: var(--space-2) var(--space-3); font: 500 14px/1.4 var(--f-text);
  color: var(--fg-secondary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--radius-8); }
.es-campos > .es-link, .es-tela > .es-link { justify-self: start; align-self: flex-start; padding-left: 0; }

/* ----------------------------------------------------------------- palco -- */
.es-palco { position: relative; flex: 0 1 min(46dvh, 420px); min-height: 150px; margin: var(--space-2) var(--space-5) 0; container-type: size;
  display: grid; place-items: center; --u: calc(78cqh / 22); view-transition-name: es-palco; }
.es-figura { height: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.es-quadro { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--prop, 4 / 5); overflow: hidden;
  border-radius: var(--shape-panel); background: var(--bg-sunken); box-shadow: var(--shadow-md); view-transition-name: es-quadro; }
.es-quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#palco-arte { opacity: 0; transform: scale(1.03); background: var(--bg-surface);
  transition: opacity var(--duration-reveal) var(--ease-standard), transform var(--duration-reveal) var(--ease-out-expo); }
.es-quadro.tem-arte #palco-arte { opacity: 1; transform: none; }
.es-quadro.ver-foto #palco-arte { opacity: 0; transition-duration: var(--duration-fast); }
.es-vazio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3);
  color: var(--fg-tertiary); font-size: 14px; border: 2px dashed var(--border-default); border-radius: inherit; }
[data-palco="vazio"] .es-quadro { box-shadow: none; background: none; }
.es-main:not([data-palco="vazio"]) .es-vazio { display: none; }

/* espera: um fio de luz desce pela foto enquanto a arte é feita */
.es-varredura { position: absolute; left: 0; right: 0; top: 0; height: 34%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--brand-glow) 34%, transparent) 92%, var(--laser-core) 100%);
  transform: translateY(-100%); }
[data-palco="gerando"] .es-varredura { opacity: 1; animation: es-varre 2.4s var(--ease-in-out) infinite; }
[data-palco="gerando"] .es-quadro img { filter: saturate(.75); }
@keyframes es-varre { from { transform: translateY(-100%); } to { transform: translateY(295%); } }

.es-segure { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); border: 0; cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--photo-scrim); color: var(--fg-on-solid);
  font: 500 12.5px/1 var(--f-text); user-select: none; -webkit-user-select: none; touch-action: none; }
.es-main:not([data-palco="arte"]) .es-segure { display: none; }

/* versões: voltar para qualquer uma é grátis */
.es-tira { position: absolute; right: var(--space-2); top: var(--space-2); display: grid; gap: var(--space-2); }
.es-tira:empty, .es-main:not([data-palco="arte"]) .es-tira { display: none; }
.es-tira button { width: 46px; height: 46px; padding: 0; border: 2px solid var(--bg-surface); border-radius: var(--radius-12);
  overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-sm); cursor: pointer; position: relative; }
.es-tira button[aria-pressed="true"] { border-color: var(--accent-border); }
.es-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-tira span { position: absolute; right: 2px; bottom: 2px; font: 600 10px/1 var(--f-text); padding: 2px 4px;
  border-radius: var(--radius-4); background: var(--photo-scrim); color: var(--fg-on-solid); }

/* escala: a miniatura ao lado de uma lata, no tamanho escolhido (1 cm = --u) */
.es-cena, .es-placa, .es-cota, .es-resumo { display: none; }
[data-palco="escala"] .es-palco { place-items: end center; background: var(--bg-sunken); border-radius: var(--shape-panel); overflow: hidden; }
[data-palco="escala"] .es-cena { display: block; position: absolute; inset: 0; }
.es-chao { position: absolute; left: 0; right: 0; bottom: 0; height: 13cqh; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); }
.es-lata { position: absolute; right: 8%; bottom: 13cqh; width: calc(6.2 * var(--u)); height: calc(12.2 * var(--u)); }
.es-lata svg { width: 100%; height: 100%; display: block; fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1.5; }
.es-lata-faixa { fill: var(--border-subtle); stroke: none; }
.es-lata small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--space-2); white-space: nowrap;
  font-size: 11.5px; color: var(--fg-tertiary); }
[data-palco="escala"] .es-figura { position: absolute; left: 36%; bottom: 13cqh; height: auto; max-width: none; justify-content: flex-end;
  transform: translateX(-50%) scale(calc(var(--alt, 12) / 20)); transform-origin: bottom center;
  transition: transform var(--duration-slow) var(--ease-out-expo); }
[data-palco="escala"] .es-quadro { height: calc(20 * var(--u)); max-width: none; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
[data-palco="escala"] #palco-foto { display: none; }
[data-palco="escala"] #palco-arte { object-fit: contain; object-position: bottom; background: none; mix-blend-mode: multiply; }
[data-palco="escala"][data-base] .es-placa { display: grid; }
.es-placa { place-content: center; justify-items: center; gap: 1px; margin-top: calc(-0.4 * var(--u)); width: 86%; min-width: calc(9 * var(--u));
  height: calc(1.9 * var(--u)); padding: 0 var(--space-2); border-radius: calc(0.5 * var(--u)); background: var(--cor-base, #e6e6e4);
  color: var(--cor-letra, #262e62); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), var(--shadow-sm); overflow: hidden;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.es-placa b { font: 700 calc(0.82 * var(--u))/1 var(--f-text); letter-spacing: .06em; white-space: nowrap; }
.es-placa small { font: 600 calc(0.44 * var(--u))/1 var(--f-text); letter-spacing: .04em; white-space: nowrap; }
.es-placa small:empty { display: none; }
[data-palco="escala"] .es-cota { display: block; position: absolute; left: var(--space-3); top: var(--space-3); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-xs); font: var(--data-weight) 13px/1.6 var(--font-data); }

/* ------------------------------------------------------- peças do painel -- */
.es-input-g { height: 60px; font-size: 21px; font-weight: 520; padding-inline: var(--space-5); }
.es-area { min-height: 104px; font-size: 17px; }

.es-lista { display: grid; gap: var(--space-3); }
.es-opcao { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-default); border-radius: var(--shape-card);
  background: var(--bg-surface); color: inherit; font: inherit; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.es-opcao:active { transform: scale(.985); }
.es-opcao[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-subtle); box-shadow: 0 0 0 1px var(--accent-border); }
.es-opcao b { display: flex; align-items: center; gap: var(--space-2); font: var(--title-weight) 17px/1.25 var(--font-display); letter-spacing: var(--title-tracking); }
.es-opcao small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--fg-secondary); }
.es-opcao em { font: 600 11px/1 var(--f-text); font-style: normal; letter-spacing: .02em; padding: 4px 8px; border-radius: var(--radius-full);
  background: var(--highlight); color: var(--fg-on-highlight); }
.es-preco { font: var(--data-weight) 16px/1.2 var(--font-data); letter-spacing: var(--data-tracking); white-space: nowrap; text-align: right; }
.es-preco small { font: 400 11.5px/1.2 var(--f-text); letter-spacing: 0; color: var(--fg-tertiary); }
.es-alturas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin-top: calc(var(--space-1) * -1); }
.es-alturas button { display: grid; gap: 2px; justify-items: center; padding: var(--space-3) var(--space-2); border: 1.5px solid var(--border-default);
  border-radius: var(--radius-16); background: var(--bg-surface); color: inherit; font: 600 16px/1.2 var(--f-text); cursor: pointer; }
.es-alturas button small { font-size: 12.5px; font-weight: 500; color: var(--fg-secondary); }
.es-alturas button[aria-pressed="true"] { border-color: var(--fg-primary); background: var(--fg-primary); color: var(--bg-surface); }
.es-alturas button[aria-pressed="true"] small { color: inherit; opacity: .8; }

.es-linha { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--shape-field); background: var(--bg-surface);
  color: inherit; font: inherit; cursor: pointer; }
.es-linha small { display: block; font-size: 12.5px; color: var(--fg-tertiary); }
.es-linha b { display: block; font-weight: 560; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
.es-linha i { font-style: normal; font-size: 14px; font-weight: 560; color: var(--fg-link); }

.es-aceite { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; font-size: 13.5px; line-height: 1.5;
  color: var(--fg-secondary); cursor: pointer; padding: var(--space-3); margin: 0 calc(var(--space-3) * -1); border-radius: var(--shape-field); }
.es-aceite a { color: inherit; }
.es-aceite.falta { background: var(--warning-bg); color: var(--warning-fg); animation: es-treme var(--duration-slow) var(--ease-standard); }
@keyframes es-treme { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.es-fotos { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.es-fotos > * { position: relative; width: 68px; height: 68px; border-radius: var(--radius-16); overflow: hidden; background: var(--bg-sunken); }
.es-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-fotos .tirar { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: var(--radius-full);
  background: var(--photo-scrim); color: var(--fg-on-solid); font: 600 14px/1 var(--f-text); cursor: pointer; }
.es-fotos .mais { border: 2px dashed var(--border-default); background: none; color: var(--fg-tertiary); font-size: 26px; cursor: pointer; }

.es-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-chips button { border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font: 500 13.5px/1.2 var(--f-text); }
.es-chips button[aria-pressed="true"] { border-color: var(--fg-primary); background: var(--fg-primary); color: var(--bg-surface); }

.es-cores { display: grid; gap: var(--space-2); }
.es-cores > span { font-size: 13px; font-weight: 560; color: var(--fg-secondary); }
.es-cores > div { display: flex; flex-wrap: wrap; gap: 6px; }
.es-cor { position: relative; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--border-strong);
  background: var(--c); cursor: pointer; overflow: hidden; }
.es-cor[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--fg-primary); }
.es-cor--livre { background: conic-gradient(#e5484d, #f5a623, #f9c230, #46a758, #3177f2, #8e4ec6, #e5484d); }
.es-cor--livre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.es-cartao { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default);
  border-radius: var(--shape-card); background: var(--bg-surface); font-size: 15px; }
.es-cartao p { margin: 0; color: var(--fg-secondary); font-size: 14px; line-height: 1.45; }
.es-cartao .l { display: flex; justify-content: space-between; gap: var(--space-4); }
.es-cartao .l b { font-weight: 560; white-space: nowrap; }
.es-cartao .t { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.es-cartao .t strong { font: var(--data-weight) 24px/1.1 var(--font-data); letter-spacing: var(--data-tracking); }
.es-cartao .g { display: grid; gap: 2px; }
.es-cartao .g small { font-size: 12.5px; color: var(--fg-tertiary); }

/* espera */
.es-espera { display: grid; gap: var(--space-3); }
.barra-prog { height: 6px; border-radius: var(--radius-full); background: var(--border-subtle); overflow: hidden; }
.barra-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 1s linear; }
.es-passo-ia { margin: 0; font-size: 17px; font-weight: 520; transition: opacity var(--duration-base) var(--ease-standard); }
.es-passo-ia.trocando { opacity: 0; }
.es-conta { margin: 0; font: var(--data-weight) 13px/1.4 var(--font-data); color: var(--fg-tertiary); }

/* aviso */
.es-aviso { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--shape-field);
  border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); font-size: 14.5px; line-height: 1.45; }
.es-aviso.ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.es-aviso.info { border-color: var(--info-border); background: var(--info-bg); color: var(--info-fg); }
.es-aviso .wt-btn { justify-self: start; }

.es-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
  font-size: 12px; color: var(--fg-tertiary); }
.es-rodape a { color: inherit; }
.es-ts { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: var(--z-modal); }

/* ------------------------------------------------ celular: tudo numa tela --
   A área do fluxo tem a altura exata da tela: o painel fica com o tamanho da pergunta
   e o palco com o que sobra (encolhe até 150 px), para o botão nunca cobrir resposta.
   Se nem assim couber, a página rola; por isso o rodapé só aparece na primeira tela. */
@media (max-width: 959px) {
  .es-main { height: calc(100dvh - 56px); min-height: 0; }
  .es-main:not([data-tela="foto"]) + .es-rodape { display: none; }
}

/* ---------------------------------------------- celular: palco compacto --
   Em tela de digitar o teclado come metade da altura: o palco vira uma tirinha
   com a miniatura e o resumo do que já foi escolhido. */
@media (max-width: 959px) {
  .es-main[data-compacto] .es-palco { flex: none; min-height: 0; height: 64px; margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-3);
    background: none; border-radius: 0; overflow: visible; }
  .es-main[data-compacto] .es-figura { position: static; transform: none; height: 100%; flex: none; }
  .es-main[data-compacto] .es-quadro { height: 100%; aspect-ratio: 1; border-radius: var(--radius-16); background: var(--bg-sunken);
    box-shadow: var(--shadow-sm); overflow: hidden; }
  .es-main[data-compacto] #palco-arte { object-fit: cover; object-position: center; mix-blend-mode: normal; background: var(--bg-surface); }
  .es-main[data-compacto] :is(.es-cena, .es-placa, .es-cota, .es-tira, .es-segure) { display: none; }
  .es-main[data-compacto] .es-resumo { display: block; margin: 0; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--fg-secondary); }
  .es-resumo b { display: block; color: var(--fg-primary); font-weight: 600; font-size: 15.5px; }
  .es-main[data-compacto] .es-painel { padding-top: var(--space-4); }
}

/* --------------------------------------------- telas largas: lado a lado -- */
@media (min-width: 960px) {
  .es-topo { padding: 0 var(--space-6); }
  .es-main { max-width: 1120px; min-height: calc(100dvh - 56px - 60px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12);
    align-items: center; padding: var(--space-8) var(--space-8) var(--space-6); }
  .es-palco { position: sticky; top: 88px; flex: none; height: min(calc(100dvh - 190px), 620px); margin: 0; }
  .es-painel { flex: none; max-width: 460px; padding: 0; min-height: 420px; }
  .es-tela { flex: 1; justify-content: center; }
  .es-acoes { position: static; margin-top: var(--space-2); padding: var(--space-2) 0 0; background: none; }
}

/* ------------------------------------------------------ troca de tela ----
   O palco e a miniatura mudam de lugar e tamanho (grupos próprios); o painel
   entra pelo lado para onde a pessoa está indo. */
::view-transition-group(*) { animation-duration: var(--duration-slow); animation-timing-function: var(--ease-out-expo); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(es-painel) { animation: es-sai var(--duration-fast) var(--ease-exit) both; }
::view-transition-new(es-painel) { animation: es-entra var(--duration-slow) var(--ease-out-expo) both; }
html[data-dir="volta"]::view-transition-old(es-painel) { animation-name: es-sai-volta; }
html[data-dir="volta"]::view-transition-new(es-painel) { animation-name: es-entra-volta; }
::view-transition-old(es-painel), ::view-transition-new(es-painel) { height: auto; }
@keyframes es-entra { from { opacity: 0; transform: translateX(36px); } }
@keyframes es-sai { to { opacity: 0; transform: translateX(-24px); } }
@keyframes es-entra-volta { from { opacity: 0; transform: translateX(-36px); } }
@keyframes es-sai-volta { to { opacity: 0; transform: translateX(24px); } }

@media (prefers-reduced-motion: reduce) {
  .es *, .es *::before, .es *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}