/* ===========================================================================
   Ferramenta de escrita — estilo (tudo com prefixo esc-)
   Regras de quem usa (README do projeto, 3ª mensagem do dono):
     - letra do corpo nunca abaixo de 20 px; títulos maiores;
     - nada de cinza fraco: contraste de 7:1 para cima;
     - botão de no mínimo 56 px, o principal com 64 px;
     - tudo cresce com a letra ("Aa Letra"): os tamanhos saem de --esc-letra.
   Cores: usa os tokens do módulo visual (--r-*) quando ele estiver no app;
   sem ele, cai nas cores do app (--texto, --fundo…) e, por último, num valor
   fixo. A ferramenta não depende das classes do app (.btn, .rotulo…): assim
   o tamanho da letra não muda conforme a tela onde ela for montada.
   =========================================================================== */

.esc, .esc-folha{
  --esc-letra:var(--r-letra, 1.25rem);                 /* 20 px no tamanho normal */
  --esc-tinta:var(--r-tinta, var(--texto, #21170F));
  /* o --texto-2 do app (cinza) dá 5,7:1 — por isso o texto de ajuda usa a tinta cheia */
  --esc-tinta-2:var(--r-tinta-2, var(--texto, #21170F));
  --esc-papel:var(--r-papel, var(--fundo, #FBF5E9));
  --esc-papel-2:var(--r-papel-2, var(--fundo-2, #FFFFFF));
  --esc-borda:var(--r-borda, var(--texto-2, #4A3828));
  --esc-couro:var(--r-couro, #5C3214);
  --esc-couro-texto:var(--r-couro-texto, #FFF6E6);
  --esc-couro-borda:var(--r-couro-borda, #2E1A0B);
  --esc-arte:var(--r-arte-fundo, var(--papel, #FFFFFF));
  --esc-perigo:var(--r-perigo, #8A1D12);
  --esc-perigo-texto:var(--r-perigo-texto, #FFFFFF);
  --esc-raio:var(--r-raio, 14px);
  --esc-botao:var(--r-botao, 60px);
  --esc-botao-principal:var(--r-botao-principal, 64px);
  --esc-ok-fundo:var(--r-ok-fundo, #DCEBD0);       --esc-ok-borda:var(--r-ok-borda, #2F6B35);
  --esc-info-fundo:var(--r-info-fundo, #F1E6D2);   --esc-info-borda:var(--r-info-borda, #5C3214);
  --esc-atencao-fundo:var(--r-atencao-fundo, #FCEBC2); --esc-atencao-borda:var(--r-atencao-borda, #8A5A00);
  --esc-erro-fundo:var(--r-erro-fundo, #F8DCD5);   --esc-erro-borda:var(--r-erro-borda, #8A1D12);
  --esc-recado-tinta:#21170F;                      /* os fundos dos recados são claros */
}
/* Noite sem o módulo visual: recados escuros (o visual já traz os dele). */
@media (prefers-color-scheme: dark){
  .esc, .esc-folha{
    --esc-ok-fundo:var(--r-ok-fundo, #1E2A1C);       --esc-ok-borda:var(--r-ok-borda, #7FC08A);
    --esc-info-fundo:var(--r-info-fundo, #2F241B);   --esc-info-borda:var(--r-info-borda, #E7BE86);
    --esc-atencao-fundo:var(--r-atencao-fundo, #3A2C0E); --esc-atencao-borda:var(--r-atencao-borda, #F2C14E);
    --esc-erro-fundo:var(--r-erro-fundo, #3A1C14);   --esc-erro-borda:var(--r-erro-borda, #FF9A85);
    --esc-perigo:var(--r-perigo, #FF9A85);           --esc-perigo-texto:var(--r-perigo-texto, #2A0B05);
    --esc-recado-tinta:var(--r-tinta, var(--texto, #F6ECDD));
  }
}
/* Tema escolhido à mão no módulo visual (Dia/Noite) manda mais que o do celular. */
:root[data-tema="claro"] .esc, :root[data-tema="claro"] .esc-folha{ --esc-recado-tinta:#21170F }
:root[data-tema="escuro"] .esc, :root[data-tema="escuro"] .esc-folha{ --esc-recado-tinta:var(--r-tinta, #F6ECDD) }

.esc{
  max-width:560px;margin:0 auto;
  color:var(--esc-tinta);
  font-family:var(--r-fonte-texto, inherit);
  font-size:var(--esc-letra);line-height:1.5;
  scroll-margin-top:var(--esc-topo, var(--topo-altura, 0px));
}
.esc *, .esc-folha *{box-sizing:border-box}
.esc [hidden], .esc-folha [hidden]{display:none !important}
/* Dentro do app rústico a tela fica numa folha de papel lisa (texto nunca sobre textura). */
.r-app .esc{background:var(--esc-papel);border-radius:var(--esc-raio);padding:16px 12px 24px}

.esc p{margin:0}
.esc-ic{width:1.25em;height:1.25em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.esc :focus-visible, .esc-folha :focus-visible{
  outline:4px solid var(--r-foco, var(--esc-tinta));outline-offset:3px;
  box-shadow:0 0 0 9px var(--r-foco-halo, transparent);
}

/* ---- título, passos
   [app-nova] O título é o r-subtitulo do app e o passo a passo é o r-passos da peça (seta
   entre as bolinhas, ✓ no que já foi). A fonte do título só tem o peso 400: com 700 o
   Safari engrossava na marra. Os botões são os r-btn do app (ícone antes da palavra). */
.esc-titulo{margin:0 0 12px;font-family:var(--r-fonte-titulo, inherit);font-weight:400;line-height:1.2}
.esc .r-passos-caixa{margin:0 -8px 16px}
.esc .r-passo-num{padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.esc .r-passos-agora{margin:12px 8px 0}
.esc .r-passos-agora:focus{outline:none}
.esc-etapa > .r-btn, .esc-etapa > .r-pilha-botoes{margin-top:16px}
.esc .r-pilha-botoes{gap:12px}
.esc-btn-linha{margin-top:12px}
.esc-fonte-marca .r-ic{width:1.1em;height:1.1em}
.esc .r-mais-opcoes{margin-top:20px}
/* Dentro da folha do app (papel com pregos): a folha já é o papel. */
.esc-na-folha.esc{background:none;padding:0;max-width:none}
.esc-passos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4, 1fr);
}
.esc-passo{position:relative;display:flex;justify-content:center}
.esc-passo:not(:last-child)::after{           /* linha até o próximo passo */
  content:"";position:absolute;top:50%;left:calc(50% + 28px);right:calc(-50% + 28px);
  height:4px;margin-top:-2px;background:var(--esc-borda);border-radius:2px;
}
.esc-passo-num{
  position:relative;z-index:1;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;padding:0;
  font-family:var(--r-fonte-titulo, inherit);font-weight:700;
  font-size:calc(var(--esc-letra) * 1.2);line-height:1;
  background:var(--esc-papel-2);color:var(--esc-tinta);
  border:3px solid var(--esc-borda);cursor:pointer;
}
.esc-passo--feito .esc-passo-num{background:var(--esc-ok-fundo);border-color:var(--esc-ok-borda);color:var(--esc-recado-tinta)}
.esc-passo--atual .esc-passo-num{
  background:var(--esc-couro);color:var(--esc-couro-texto);border-color:var(--esc-couro-borda);
  box-shadow:0 0 0 4px var(--esc-papel), 0 0 0 7px var(--esc-couro);
}
.esc-passo-agora{
  margin:16px 0 18px !important;padding:10px 14px;
  background:var(--esc-papel-2);border-left:6px solid var(--esc-couro);border-radius:6px;
  font-weight:700;font-size:calc(var(--esc-letra) * 1.1);line-height:1.3;
}
.esc-passo-agora:focus{outline:none}

/* ---- textos */
.esc-rotulo{display:block;margin:0 0 8px !important;font-weight:700;font-size:var(--esc-letra);line-height:1.35}
.esc-frase{margin:0 0 14px !important;font-weight:700}
.esc-ajuda{margin-top:10px !important;color:var(--esc-tinta-2);font-size:var(--esc-letra);line-height:1.45}
.esc-subtitulo{margin:0 0 6px;font-family:var(--r-fonte-titulo, inherit);font-size:calc(var(--esc-letra) * 1.25);line-height:1.25}

/* ---- botões (próprios: não dependem do .btn do app) */
.esc-btn{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  width:100%;min-height:var(--esc-botao);margin:0;padding:8px 16px;
  background:var(--esc-papel-2);color:var(--esc-tinta);
  border:3px solid var(--esc-borda);border-radius:12px;
  font:inherit;font-weight:700;font-size:calc(var(--esc-letra) * 1.05);line-height:1.2;
  text-align:center;cursor:pointer;touch-action:manipulation;
  -webkit-appearance:none;appearance:none;
}
.esc-btn:active{transform:translateY(2px)}
.esc-btn-principal{
  min-height:var(--esc-botao-principal);
  background:var(--esc-couro);color:var(--esc-couro-texto);border-color:var(--esc-couro-borda);
  font-size:calc(var(--esc-letra) * 1.1);
}
.esc-btn[disabled]{border-style:dashed;cursor:progress}
.esc-btn-principal[disabled]{background:var(--esc-papel-2);color:var(--esc-tinta)}
.esc-etapa > .esc-btn, .esc-etapa > .esc-pilha{margin-top:16px}
.esc-btn-voltar{margin-top:12px}
.esc-pilha{display:flex;flex-direction:column;gap:12px}

/* ---- passo 1: campo de texto */
.esc-campo{
  display:block;width:100%;
  min-height:calc(3 * 1.35em + 30px);
  padding:12px 14px;resize:none;
  background:var(--esc-arte);color:#21170F;
  border:3px solid var(--esc-borda);border-radius:12px;
  font-family:inherit;font-size:calc(var(--esc-letra) * 1.2);font-weight:700;line-height:1.35;
  -webkit-appearance:none;appearance:none;
}
.esc-campo:focus{outline:none;border-color:var(--esc-couro);box-shadow:0 0 0 4px var(--r-foco-halo, var(--esc-couro))}

/* ---- recados (aviso grande com fundo; nada de letra colorida solta) */
.esc-recado{
  display:flex;flex-direction:column;gap:10px;
  margin-top:14px !important;padding:12px 14px;
  background:var(--esc-info-fundo);color:var(--esc-recado-tinta);
  border:3px solid var(--esc-info-borda);border-left-width:8px;border-radius:10px;
  font-weight:700;line-height:1.4;
}
.esc-recado--ok{background:var(--esc-ok-fundo);border-color:var(--esc-ok-borda)}
.esc-recado--erro{background:var(--esc-erro-fundo);border-color:var(--esc-erro-borda)}
.esc-recado--atencao{background:var(--esc-atencao-fundo);border-color:var(--esc-atencao-borda)}
.esc-recado-texto{overflow-wrap:anywhere}
.esc-btn-desfazer{min-height:56px;background:var(--esc-papel-2);color:var(--esc-tinta)}

/* ---- passo 1: textos guardados */
.esc-salvos{margin-top:32px;padding-top:20px;border-top:3px dashed var(--esc-borda)}
.esc-lista{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.esc-salvo{display:flex;flex-direction:column;gap:8px;
  padding:10px;border:3px solid var(--esc-borda);border-radius:var(--esc-raio);background:var(--esc-papel-2)}
.esc-salvo-abre{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:100%;min-height:var(--esc-botao);padding:0;text-align:left;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer;
}
.esc-salvo-tinta{
  display:block;height:72px;padding:6px 10px;border-radius:8px;
  background:var(--esc-arte);border:2px solid var(--esc-borda);
}
.esc-salvo-tinta svg{display:block;width:100%;height:100%}
.esc-salvo-txt{display:flex;flex-direction:column;min-width:0}
.esc-salvo-nome{font-weight:700;overflow-wrap:anywhere}
.esc-salvo-info{color:var(--esc-tinta-2)}
.esc-salvo-apaga{min-height:56px;color:var(--esc-perigo);border-color:var(--esc-perigo);background:var(--esc-papel-2)}
.esc-salvo-apaga.confirmar{background:var(--esc-perigo);border-color:var(--esc-perigo);color:var(--esc-perigo-texto)}

/* ---- passo 2: letras (cada cartão mostra o texto dele) */
.esc-fontes{display:flex;flex-direction:column;gap:12px}
.esc-fonte{
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  width:100%;padding:10px 12px 12px;text-align:left;
  background:var(--esc-papel-2);color:var(--esc-tinta);
  border:3px solid var(--esc-borda);border-radius:var(--esc-raio);
  font:inherit;cursor:pointer;touch-action:manipulation;
}
.esc-fonte-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.esc-fonte-nome{font-weight:700;font-size:calc(var(--esc-letra) * 1.05);line-height:1.25}
.esc-fonte-marca{
  display:none;align-items:center;gap:4px;flex:0 0 auto;
  padding:2px 10px;border-radius:999px;
  background:var(--esc-couro);color:var(--esc-couro-texto);font-weight:700;
}
.esc-fonte-marca .esc-ic{stroke-width:3}
.esc-fonte[aria-checked="true"]{border-color:var(--esc-couro);border-width:5px;padding:8px 10px 10px}
.esc-fonte[aria-checked="true"] .esc-fonte-marca{display:inline-flex}
.esc-fonte-tinta{
  display:block;height:76px;border-radius:8px;
  background:var(--esc-arte);border:2px solid var(--esc-borda);padding:6px 10px;
}
.esc-fonte-tinta svg{display:block;width:100%;height:100%}
.esc-fonte-tinta.esperando{background:repeating-linear-gradient(90deg,var(--esc-arte) 0 40%,var(--esc-papel) 50%,var(--esc-arte) 60% 100%)}
.esc-fonte-falha{display:grid;place-items:center;height:100%;text-align:center;color:#21170F;font-weight:700;line-height:1.25}
.esc-fontes + .esc-btn{margin-top:14px}

/* ---- prévia grande (passos 3 e 4; fica presa no alto enquanto ele ajusta) */
.esc-palco-fixo{
  position:sticky;top:var(--esc-topo, var(--topo-altura, 0px));z-index:5;
  margin:0 0 18px;padding:8px 0 10px;
  background:var(--esc-papel);
  border-bottom:3px solid var(--esc-borda);
}
.esc-palco{
  position:relative;display:grid;place-items:center;overflow:hidden;
  height:clamp(96px, 20vh, 160px);padding:10px 12px;
  background:var(--esc-arte);border:2px solid var(--esc-borda);border-radius:var(--esc-raio);
}
.esc-palco svg{display:block;width:100%;height:100%}
.esc-desenho{fill:#000;stroke:none}
.esc-palco-vazio{
  position:absolute;inset:0;display:grid;place-items:center;padding:12px;
  text-align:center;color:#21170F;font-weight:700;
}
.esc-medidas{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:8px !important}
.esc-medidas strong{font-size:calc(var(--esc-letra) * 1.15)}
.esc-avisos{margin-top:8px !important;padding:8px 12px;border-radius:8px;
  background:var(--esc-atencao-fundo);color:var(--esc-recado-tinta);border:2px solid var(--esc-atencao-borda);font-weight:700}
.esc-avisos:empty{display:none}

/* ---- passo 3: largura e Mais opções */
.esc-medida{display:grid;grid-template-columns:56px minmax(0,1fr) auto 56px;align-items:center;gap:8px}
.esc-medida-passo{width:56px;min-height:56px;padding:0;font-size:calc(var(--esc-letra) * 1.5);line-height:1}
.esc-medida-campo{
  width:100%;min-width:0;height:64px;padding:0 10px;text-align:center;
  background:var(--esc-arte);color:#21170F;
  border:3px solid var(--esc-borda);border-radius:12px;
  font:inherit;font-weight:700;font-size:calc(var(--esc-letra) * 1.5);
  -webkit-appearance:none;appearance:none;
}
.esc-unidade{font-weight:700}
.esc-atalhos{display:grid;grid-template-columns:repeat(auto-fit, minmax(calc(var(--esc-letra) * 4.2), 1fr));gap:8px;margin-top:12px}
.esc-atalho{min-height:56px;padding:4px 6px;white-space:nowrap}
.esc-atalho[aria-pressed="true"]{background:var(--esc-couro);color:var(--esc-couro-texto);border-color:var(--esc-couro-borda)}
.esc-altura{margin-top:12px !important;font-weight:700}

.esc-grupo{margin-top:18px}
.esc-escolha{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.esc-escolha-3{grid-template-columns:repeat(3, 1fr)}
.esc-escolha > button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--esc-botao);padding:6px 4px;
  background:var(--esc-papel);color:var(--esc-tinta);
  border:3px solid var(--esc-borda);border-radius:12px;
  font:inherit;font-weight:700;line-height:1.2;cursor:pointer;
}
.esc-escolha > button[aria-pressed="true"]{background:var(--esc-couro);color:var(--esc-couro-texto);border-color:var(--esc-couro-borda)}
.esc-deslize-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.esc-valor{white-space:nowrap}
.esc-deslize{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:8px}
.esc-deslize input[type=range]{width:100%;min-width:0;height:56px;margin:0;accent-color:var(--esc-couro)}

/* Letra muito grande ("Maior") em tela estreita: os 3 alinhamentos em coluna. */
@media (max-width:420px){
  .esc-escolha-3{grid-template-columns:1fr}
  .esc-escolha-3 > button{flex-direction:row;gap:10px}
}

/* ---- folha por cima (quando o editor de peça pede um texto) */
.esc-folha{
  position:fixed;inset:0;z-index:80;            /* acima das folhas do editor (até 70) */
  background:var(--esc-papel);color:var(--esc-tinta);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
  font-family:var(--r-fonte-texto, inherit);font-size:var(--esc-letra);
}
.esc-folha-topo{
  position:sticky;top:0;z-index:6;
  padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--r-topo, var(--esc-papel));border-bottom:3px solid var(--esc-borda);
}
.esc-folha-voltar{
  width:auto;min-height:56px;justify-content:flex-start;
  background:var(--esc-papel-2);
}
.esc-folha-corpo{padding:14px 14px 24px}
.esc-folha-barra{position:sticky;bottom:0;z-index:6;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--esc-papel);border-top:3px solid var(--esc-borda)}
.esc-folha-barra:empty{display:none}