/* 04 · ACHADO · prefixo .ach-
   Uma moldura escura sobre a seção clara, alinhada à coluna do título. Três abas.
   Movimento (só sob html.mov; o estado final é o padrão):
   - borda superior: a seção preta de cima desce num degrau de 15° que anda com a rolagem
   - troca de abas: o painel novo entra por um corte de 15° medido em px (--k = altura × tan 15°)
   - Prova: pedido digitado, pulso laranja, resposta carimbada
   - Reteste: "Refazer o ataque" digita o pedido, o pulso bate no corte e o 200 vira 404 */

.ach{--secao-y:clamp(4rem,6.6vw,6rem)}
.ach .secao-cab{margin-bottom:clamp(32px,4vw,56px)}

/* borda superior: degrau de 15° com a cor da seção anterior (preta) */
.ach-borda{--bd:clamp(28px,4vw,56px);--s:calc(10% + var(--p,1)*52%);--kb:calc(var(--bd)*var(--tan15));
  position:absolute;left:0;right:0;top:-1px;height:var(--bd);background:var(--c-preto);pointer-events:none;
  clip-path:polygon(0 0,calc(var(--s) + var(--kb)) 0,var(--s) 100%,0 100%)}

.ach-corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha)}
.ach-quadro{grid-column:1/-1;min-width:0}
@media (min-width:1200px){.ach-quadro{grid-column:4/-1}}

/* identidade do achado */
.ach-topo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4);padding:20px 20px 16px}
.ach-id{font:400 .875rem/1 var(--f-mono);color:var(--texto-3)}
.ach-nome{flex:1 1 100%;order:3;font:700 1.375rem/1.2 var(--f-sans);letter-spacing:-.03em;color:var(--texto)}
.ach-topo .etiqueta{margin-left:auto;font-size:.8125rem}

/* abas */
.ach-lista{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--linha)}
.ach-aba{position:relative;min-height:52px;padding:0 var(--e-1);font:700 1rem/1 var(--f-sans);color:var(--texto-3);transition:color var(--dur-entrada) var(--curva-entrada)}
.ach-aba:hover,.ach-aba[aria-selected="true"]{color:var(--texto)}
.ach-aba:focus-visible{outline-offset:-4px}
/* indicador: um traço só, que desliza de uma aba à outra (--x e --w em px, postos pelo JS) */
.ach-ind{position:absolute;left:0;bottom:-1px;width:1px;height:2px;background:var(--texto);transform-origin:0 50%;
  transform:translate3d(var(--x,0px),0,0) scaleX(var(--w,0));transition:transform 520ms cubic-bezier(.16,1,.3,1);pointer-events:none}

/* painéis */
.ach-painel{display:grid;align-content:start;align-items:start;gap:var(--e-6);padding:var(--e-6) 20px 28px;min-width:0}
.ach-painel:focus-visible{outline-offset:-4px}
.ach-painel-t{font:400 var(--t-rotulo)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.ach-abas .ach-painel-t{display:none}
/* com abas: os três painéis ocupam a mesma célula, então a moldura não muda de altura na troca */
.ach-paineis{position:relative;display:grid;overflow:hidden}
.ach-abas .ach-painel{grid-area:1/1}
.ach-abas .ach-painel:not(.ach-ativo){visibility:hidden}
.ach:not(.ach-abas) .ach-painel{border-top:1px solid var(--linha)}
.ach-frase{font:700 clamp(1.375rem,2.1vw,1.875rem)/1.2 var(--f-sans);letter-spacing:-.03em;color:var(--texto);text-wrap:balance}
.ach-frase-2{display:block;margin-top:var(--e-2);font:400 clamp(1rem,1.3vw,1.125rem)/1.4 var(--f-sans);letter-spacing:0;color:var(--texto-2)}

/* troca de abas: corte de 15° que varre a moldura */
.ach-varre{display:none}
.mov .ach-abas .ach-painel.ach-sai{visibility:visible}
.mov .ach-abas .ach-painel.ach-entra{z-index:1;background:var(--sup);animation:ach-corte 720ms var(--curva-tela) both}
.mov .ach-abas .ach-varre{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.ach-varre::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--texto);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:0 0}
.ach-varre::after{content:"";position:absolute;right:100%;top:0;bottom:0;width:140px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--texto) 9%,transparent));transform:skewX(calc(-1*var(--inclinacao)));transform-origin:100% 0}
.mov .ach-varre.ach-varre-on{animation:ach-varre 720ms var(--curva-tela) both}
@keyframes ach-corte{
  from{clip-path:polygon(0 0,0px 0,calc(0px - var(--k,120px)) 100%,0 100%)}
  to{clip-path:polygon(0 0,calc(100% + var(--k,120px)) 0,100% 100%,0 100%)}
}
@keyframes ach-varre{
  0%{transform:translate3d(0,0,0);opacity:1}
  85%{opacity:1}
  100%{transform:translate3d(calc(100% + var(--k,120px)),0,0);opacity:0}
}

/* bloco de código */
.ach-codigo{min-width:0;border:1px solid var(--linha);border-radius:var(--r-moldura);background:var(--fundo);font:400 .8125rem/1.7 var(--f-mono);color:var(--texto-2)}
.ach-cod-parte{position:relative;padding:14px var(--e-4)}
.ach-cod-parte+.ach-cod-parte{border-top:1px solid var(--linha)}
.ach-cod-rot{display:flex;align-items:center;gap:var(--e-2);margin-bottom:var(--e-1);font:400 .8125rem/1.5 var(--f-sans);color:var(--texto-3)}
.ach-codigo pre{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.ach-codigo code{font:inherit}
.ach-codigo b{color:var(--texto)}
.ach-l{display:inline-block;white-space:pre-wrap}
.ach-status{position:relative;display:inline-block}
.ach-pulso{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--marca);transform:scaleX(0);pointer-events:none}
.ach-resp .ponto{position:relative}
.ach-resp .ponto::after{content:"";position:absolute;inset:-1px;border:1px solid var(--marca);opacity:0}

/* Prova · digitação: cada letra é um span posto pelo JS; o texto original volta ao fim */
.ach-c{opacity:0}
.ach-c.ach-on{opacity:1}
.ach-c.ach-cur{position:relative}
.ach-c.ach-cur::after{content:"";position:absolute;left:100%;top:.2em;bottom:.2em;width:.55em;background:var(--texto)}
/* Prova · resposta: espera vazia, depois chega com o pulso laranja */
.mov .ach-esp .ach-resp>p,.mov .ach-esp .ach-resp>pre{opacity:0}
.mov .ach-chega .ach-pulso{animation:ach-pulso 760ms var(--curva-tela) both}
.mov .ach-chega .ach-resp .ach-cod-rot{animation:ach-sobe 520ms cubic-bezier(.16,1,.3,1) 380ms both}
.mov .ach-chega .ach-resp .ponto::after{animation:ach-anel 900ms cubic-bezier(.16,1,.3,1) 420ms both}
.mov .ach-chega .ach-status{animation:ach-carimbo-a 300ms var(--curva-tela) 480ms both}
.mov .ach-chega .ach-status::after{content:"";position:absolute;inset:-1px -6px;background:var(--marca);animation:ach-carimbo-b 360ms var(--curva-tela) 840ms both}
.mov .ach-chega .ach-resp .ach-l{animation:ach-sobe 520ms cubic-bezier(.16,1,.3,1) 900ms both}
.mov .ach-chega .ach-resp .ach-l+.ach-l{animation-delay:990ms}
@keyframes ach-pulso{
  0%{transform:scaleX(0);transform-origin:0 50%}
  50%{transform:scaleX(1);transform-origin:0 50%}
  51%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
@keyframes ach-sobe{from{opacity:0;transform:translate3d(-3px,10px,0)}to{opacity:1;transform:none}}
@keyframes ach-anel{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.5)}}
@keyframes ach-carimbo-a{from{clip-path:inset(-2px 100% -2px -8px)}to{clip-path:inset(-2px -8px -2px -8px)}}
@keyframes ach-carimbo-b{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* Correção · a linha nova entra e recebe o realce */
.ach-l-nova{position:relative}
.ach-l-nova::before{content:"";position:absolute;inset:0 -8px;z-index:-1;background:color-mix(in srgb,var(--texto) 12%,transparent);transform-origin:0 50%}
.ach-patch pre{position:relative;z-index:0}
.mov .ach-ativo .ach-patch .ach-l{animation:ach-sobe 520ms cubic-bezier(.16,1,.3,1) 420ms both}
.mov .ach-ativo .ach-patch .ach-l-nova{animation-delay:560ms}
.mov .ach-ativo .ach-patch .ach-l-nova::before{animation:ach-realce 700ms var(--curva-tela) 760ms both}
@keyframes ach-realce{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Reteste · antes | depois, separados pelo corte de 15° */
.ach-rt-txt{display:grid;gap:var(--e-6);justify-items:start;min-width:0}
.ach-refaz{gap:10px}
.ach-refaz .icone{transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.ach-refaz:hover .icone{transform:rotate(-180deg)}
.ach-refaz[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ach-rt{min-width:0;border:1px solid var(--linha);border-radius:var(--r-moldura);background:var(--fundo);overflow:hidden}
.ach-rt-ped{position:relative;padding:12px var(--e-4);border-bottom:1px solid var(--linha);font:400 .8125rem/1.7 var(--f-mono);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-rt-ped code{font:inherit}
html:not(.mov) .ach-rt-ped{display:none}
.ach-rt-pulso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--marca);transform:scaleX(0);transform-origin:0 50%}
.ach-rt-lados{display:flex;align-items:stretch;gap:clamp(16px,3.4vw,48px);padding:var(--e-6) var(--e-4)}
.ach-rt-lado{display:flex;flex-direction:column;gap:var(--e-2);min-width:0}
.ach-rt-rot{font:400 .875rem/1.4 var(--f-sans);color:var(--texto-3)}
.ach-rt-cod{font:700 clamp(1.75rem,4vw,3.25rem)/1.1 var(--f-mono);letter-spacing:-.04em;color:var(--texto);white-space:nowrap}
.ach-rt-antes .ach-rt-cod{color:var(--texto-3)}
.ach-rt-corte{position:relative;flex:none;width:1px;background:var(--borda-controle);transform:skewX(calc(-1*var(--inclinacao)))}
.ach-rt-corte::after{content:"";position:absolute;inset:0 -1px;background:var(--marca);opacity:0}
/* rolo: os dígitos do "depois" sobem um a um (montado pelo JS) */
.ach-rl{display:inline-grid;overflow:hidden;vertical-align:bottom}
.ach-rl>span{grid-area:1/1;display:flex;white-space:pre}
.ach-rl i{display:block;font-style:normal;transition:transform 560ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--j,0)*60ms)}
.ach-rl-a{color:var(--texto-3)}
.ach-rl-a i{transform:translate3d(0,-110%,0)}
.ach-rt-volta .ach-rl-a i{transform:none}
.ach-rt-volta .ach-rl-b i{transform:translate3d(0,110%,0)}
.mov .ach-rt-vai .ach-rt-pulso{animation:ach-rt-pulso 520ms var(--curva-tela) both}
.mov .ach-rt-bate .ach-rt-corte::after{animation:ach-rt-bate 900ms cubic-bezier(.16,1,.3,1) both}
.mov .ach-rt-bate .ach-rt-depois .ach-rt-rot{animation:ach-sobe 520ms cubic-bezier(.16,1,.3,1) both}
@keyframes ach-rt-pulso{
  0%{transform:scaleX(0);transform-origin:0 50%}
  60%{transform:scaleX(1);transform-origin:0 50%}
  61%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
@keyframes ach-rt-bate{0%{opacity:1;transform:scaleX(3)}100%{opacity:0;transform:scaleX(1)}}

/* moldura: entra, e o conteúdo do topo assenta depois da cortina */
.mov .ach-quadro[data-vista] .ach-topo>*{opacity:0;transform:translate3d(-4px,14px,0);transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 800ms cubic-bezier(.16,1,.3,1);transition-delay:calc(420ms + var(--i,0)*80ms)}
.mov .ach-quadro[data-vista].na-vista .ach-topo>*{opacity:1;transform:none}
.ach-topo>:nth-child(2){--i:1}.ach-topo>:nth-child(3){--i:2}

@media (max-width:339px){
  .ach-painel{padding-inline:var(--e-4)}
  .ach-codigo{font-size:.75rem}
  .ach-rt-lados{padding-inline:var(--e-3)}
}
@media (min-width:720px){
  .ach-topo{padding:var(--e-6) var(--e-8) 20px}
  .ach-nome{flex:0 1 auto;order:0;font-size:1.5rem}
  .ach-topo .etiqueta{font-size:.875rem}
  .ach-lista{display:flex;gap:var(--e-8);padding:0 var(--e-8)}
  .ach-aba{min-height:56px;font-size:1.125rem}
  .ach-painel{grid-template-columns:5fr 7fr;column-gap:var(--e-12);align-content:center;align-items:center;padding:var(--e-8)}
  .ach-painel-t{grid-column:1/-1}
  .ach-codigo{font-size:.9375rem}
  .ach-cod-parte{padding:var(--e-4) var(--e-6)}
  .ach-cod-rot{font-size:.875rem}
  .ach-rt-ped{padding:14px var(--e-6);font-size:.9375rem}
  .ach-rt-lados{padding:var(--e-8) var(--e-6)}
  .ach-quadro .moldura-nota{padding-inline:var(--e-8)}
}