/* Polozi Social — /app
 *
 * SO LAYOUT. ZERO TOKEN NOVO.
 * Toda cor, raio, sombra e tipografia vem de tokens.css, que por sua vez e
 * copia literal de ws-50-100/index.html. Se algo aqui precisar de uma cor
 * nova, a resposta certa e usar uma que ja existe — identidade duplicada
 * aparece na primeira captura de tela lado a lado.
 *
 * Este arquivo existe porque a CSP `estrita` proibe <style> inline nesta
 * pagina. Nao e preferencia de organizacao: e o que faz XSS aqui nao virar
 * execucao.
 */

/* A pagina nasce ESCONDIDA ate o i18n.js pintar o idioma. O HTML traz o texto
   em portugues como padrao e o i18n.js roda no fim do <body>: sem isto o
   navegador pinta "Seu Instagram / Verificando..." antes de trocar pro ingles.
   Visto no screencast do App Review, na volta do OAuth (a pagina recarrega
   inteira). A animacao e rede de seguranca: se o i18n.js falhar, a pagina
   aparece sozinha em 1,5s em vez de ficar em branco pra sempre. */
.i18n-pendente body{visibility:hidden;animation:i18n-mostra 0s 1.5s forwards}
@keyframes i18n-mostra{to{visibility:visible}}

/* A caixa de consentimento. `input` em tokens.css e `width:100%` (campo de
   formulario); checkbox precisa voltar ao tamanho natural, senao vira uma
   barra atravessando a tela. */
.aceite{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:14px;color:var(--off);line-height:1.5}
.aceite input[type=checkbox]{width:19px;height:19px;flex:0 0 19px;margin-top:2px;
  accent-color:var(--gold);cursor:pointer}

/* Texto legal: rolavel, pra pagina nao virar um scroll infinito antes do botao.
   Altura generosa de proposito — texto de consentimento escondido atras de 3
   linhas de rolagem e a forma classica de nao ser lido. */
.termo{max-height:340px;overflow-y:auto;padding:16px;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(10,10,12,.45);
  font-size:13.5px;color:#cfcfca;line-height:1.6}
.termo p{margin-bottom:10px}
.termo ul{list-style:none;margin:0 0 10px}
.termo li{position:relative;padding-left:18px;margin-bottom:6px}
.termo li::before{content:"";position:absolute;left:4px;top:8px;
  width:6px;height:6px;border-radius:999px;background:var(--gold)}
.termo b{color:var(--off)}

/* `.tag` em tokens.css e caixa-alta (e pill de secao). O @ do Instagram e
   minusculo de verdade — mostrar "@JOAOPOLOZI" seria exibir um handle que nao
   existe, e o revisor da Meta compara com a conta na tela dele. */
#conta-usuario{text-transform:none;letter-spacing:.02em}

/* Ficha da conta conectada. */
.dados{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  font-size:14px;align-items:baseline}
.dados dt{color:var(--mut);font-size:13px}
.dados dd{color:var(--off);word-break:break-word}

/* O ATRIBUTO `hidden` TEM QUE GANHAR. Nao e preferencia — e conserto.

   `hidden` so esconde porque a folha de estilo do NAVEGADOR traz
   `[hidden]{display:none}`, e regra de navegador perde pra qualquer regra de
   autor. `tokens.css` define `.cta{display:inline-flex}` e `.preview{display:block}`,
   entao todo botao de `/app` continuava VISIVEL depois de `el.hidden = true`.

   O sintoma foi visto ao vivo: com o post ja aprovado, o botao "Aprovar"
   continuava na tela ao lado de "Publicar agora"; e com o post ainda em
   rascunho, "Publicar agora" aparecia e devolvia 409. As telas (`.glass`) nunca
   quebraram porque `.glass` nao define `display` — por isso passou despercebido.

   `!important` aqui e o certo: esta regra existe para devolver o comportamento
   da plataforma que o estilo de autor atropelou sem querer. */
[hidden]{display:none !important}

/* `.ferr` em tokens.css nasce `display:none` e so aparece dentro de
   `.field.bad`. Aqui os erros vivem soltos, entao o app.js controla o
   atributo `hidden` e esta classe devolve a visibilidade. */
.erro-visivel:not([hidden]){display:block}

/* Aviso vindo do callback (?erro= / ?conectado=). */
.aviso{padding:13px 16px;border-radius:12px;font-size:14px;
  border:1px solid var(--line);background:rgba(10,10,12,.45)}
.aviso.ruim{border-color:var(--red);color:var(--red)}
.aviso.bom{border-color:var(--green);color:var(--green)}

a{color:var(--gold)}

/* O botao de sair nao compete com a acao principal. */
#sair-botao{color:var(--mut)}

/* ------------------------------------------------------------- compositor */

/* Preview local, antes do upload. Teto de altura porque foto 4:5 em tela de
   celular empurraria o botao pra fora da primeira dobra — e botao que exige
   rolagem e botao que nao se aperta. */
.preview{display:block;width:100%;max-height:360px;object-fit:contain;
  border:1px solid var(--line);border-radius:12px;background:rgba(10,10,12,.45)}

textarea{width:100%;min-height:120px;resize:vertical;font:inherit;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(10,10,12,.45);color:var(--off);line-height:1.5}

/* Contador acima do limite: vermelho ANTES de o servidor recusar. */
.excedido{color:var(--red)}

/* O rascunho montado e um estado novo, nao um pedaco do formulario — a borda
   dourada marca que dali pra frente a acao e irreversivel. */
.rascunho{padding:16px;border:1px solid var(--gold);border-radius:12px;
  background:rgba(10,10,12,.45)}

.historico{list-style:none;display:grid;gap:10px}
.historico li{display:grid;gap:2px;padding:11px 13px;font-size:13.5px;
  border:1px solid var(--line);border-radius:12px;background:rgba(10,10,12,.45)}
.historico .quando{color:var(--mut);font-size:12.5px}
.historico .trecho{color:var(--off);word-break:break-word}
.historico .estado{color:var(--mut);font-size:12.5px}
.historico .estado.publicado{color:var(--green)}
.historico .estado.erro{color:var(--red)}

/* Input de arquivo nativo: invisivel mas focavel (teclado e leitor de tela
   continuam chegando nele). Quem aparece e o <label> `.arquivo-botao`. */
.arquivo{position:relative;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.arquivo-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.arquivo-botao{cursor:pointer}
.arquivo-input:focus-visible + .arquivo-botao{outline:2px solid var(--gold);outline-offset:2px}
#foto-nome{word-break:break-all}

/* Dialogo de confirmacao. Fundo SOLIDO de proposito: `--card` e translucido e,
   sobre o backdrop, o texto do fundo vazaria atras da pergunta. */
.confirmar{margin:auto;width:calc(100% - 32px);max-width:440px;padding:22px;
  background:var(--bg);border:1px solid var(--gold);border-radius:18px;color:var(--off)}
.confirmar::backdrop{background:rgba(0,0,0,.65)}
.confirmar p{font-size:15px;line-height:1.55}

@media(max-width:560px){
  .dados{grid-template-columns:1fr;gap:2px 0}
  .dados dd{margin-bottom:8px}
}

#analytics-resultado{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
[data-analytics-termo]{max-height:220px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:10px}