/* pages/redacao.css - estilos exclusivos da pagina "redacao".
 * Use SOMENTE tokens de app.css (var(--bg2), var(--sp-4), var(--r-md), var(--fs-sm)...).
 * Carregado por app.html depois de app.css; escopo sugerido: #page-redacao ou prefixo proprio.
 * Nao edite app.css para estilos de pagina (evita conflitos de merge). */

/* ══════════════════════════════════════════════════════════════════
 * FOUNDATION v2 — carregamento, contador, rascunho e resultado
 * (mobile-first; tokens de app.css; animações só opacity/transform)
 * ══════════════════════════════════════════════════════════════════ */

/* Overlay de correção: caveira dourada pulsando (opacity) + etapas */
.rd2-loading{margin-top:var(--sp-5);padding:var(--sp-5) var(--sp-4);border:1px solid var(--border2);border-radius:var(--r-md);background:var(--bg3);text-align:center}
.rd2-loading-skull{display:block;width:56px;height:56px;margin:0 auto var(--sp-3);object-fit:contain;animation:pa-loader-pulse 1.6s ease-in-out infinite}
.rd2-loading-title{font:700 var(--fs-md)/1.3 var(--font-d);color:var(--text);margin-bottom:var(--sp-1)}
.rd2-loading-sub{font-size:var(--fs-sm);color:var(--text2);font-variant-numeric:tabular-nums}
.rd2-loading-track{height:6px;margin:var(--sp-4) auto var(--sp-3);max-width:360px;border-radius:var(--r-pill);background:var(--bg4);overflow:hidden}
.rd2-loading-bar{height:100%;width:var(--w,8%);border-radius:inherit;background:var(--grad-gold,var(--gold));transition:width var(--dur-4) var(--ease-out)}
.rd2-loading-steps{list-style:none;margin:0 auto var(--sp-3);padding:0;display:grid;gap:var(--sp-2);max-width:320px;text-align:left}
.rd2-loading-step{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text3)}
.rd2-loading-step.is-active{color:var(--text);font-weight:600}
.rd2-loading-step.is-done{color:var(--green-text)}
.rd2-loading-step-dot{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;flex:none}
.rd2-loading-step.is-done .rd2-loading-step-dot{background:currentColor}
.rd2-loading-step.is-active .rd2-loading-step-dot{border-color:var(--gold);background:var(--gold-dim);animation:pa-loader-pulse 1.2s ease-in-out infinite}
.rd2-loading-hint{font-size:var(--fs-xs);color:var(--text3)}
.rd2-timeout-notice{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--amber);border-radius:var(--r-md);background:var(--amber-dim);color:var(--text);font-size:var(--fs-sm);line-height:1.45}
.rd2-timeout-notice[hidden]{display:none}

/* Editor: textarea confortável, contador e medidor de linhas */
.rd2-textarea{min-height:240px;max-height:70dvh;font-size:16px;line-height:1.6;resize:vertical}
.rd2-char-counter{position:sticky;bottom:calc(var(--safe-b) + var(--sp-2));z-index:3;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.rd2-lines-meter{height:6px;margin-top:var(--sp-2);border-radius:var(--r-pill);background:var(--bg4);overflow:hidden}
.rd2-lines-meter>span{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--text3);transition:width var(--dur-3) var(--ease-out)}
.rd2-lines-meter[data-state="ok"]>span{background:var(--green)}
.rd2-lines-meter[data-state="warn"]>span{background:var(--amber)}
.rd2-lines-meter[data-state="bad"]>span{background:var(--red)}
.rd2-lines-meter>span{width:var(--w,0%)}
.rd2-lines-meter{--w:0%}
@media (max-width:768px){
  .rd2-send-cta-wrap{position:sticky;bottom:calc(var(--safe-b) + var(--sp-2));z-index:4}
  .rd2-submit-btn{min-height:var(--tap);width:100%;max-width:none}
}

/* Resultado: anel de nota */
.rd-hero-center{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.rd2-score-ring{width:112px;height:112px}
.rd2-score-ring .progress-ring__bar,.rd2-score-ring .progress-ring__track{stroke-width:3}
@media (min-width:640px){.rd-hero-center{flex-direction:row;justify-content:center;gap:var(--sp-6)}.rd2-score-ring{width:128px;height:128px}}

@media (prefers-reduced-motion:reduce){
  .rd2-loading-skull,.rd2-loading-step.is-active .rd2-loading-step-dot{animation:none;opacity:1}
  .rd2-loading-bar,.rd2-lines-meter>span{transition:none}
}

/* Critérios da banca: barras animadas (transform) e categorias de erro */
.rd-crit-bar{transform-origin:left;animation:rd2-bar-in var(--dur-4) var(--ease-out) both}
@keyframes rd2-bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rd2-errcat-card{margin-top:var(--sp-4);padding:var(--sp-4)}
.rd2-errcat-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.rd2-errcat-title h3{margin:0;font:700 var(--fs-md)/1.3 var(--font-d)}
.rd2-errcat-title span{font-size:var(--fs-sm);color:var(--text3)}
.rd2-errcat-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.rd2-errcat-head{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:4px;color:var(--text)}
.rd2-errcat-track{height:8px;border-radius:var(--r-pill);background:var(--bg4);overflow:hidden}
.rd2-errcat-bar{height:100%;border-radius:inherit;transform-origin:left;animation:rd2-bar-in var(--dur-4) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.rd-crit-bar,.rd2-errcat-bar{animation:none}}