/* 05 · PLATAFORMA · prefixo .plt-
   Seletor de duas visões + uma moldura. No desktop largo o seletor fica na coluna do rótulo
   e a moldura na coluna do título.
   Movimento (só sob html.mov; o estado final é o padrão): borda superior em degrau de 15°, cortina
   na entrada e na troca de visão, barras que crescem, números que contam (JS), linhas que reagem
   ao ponteiro e o resumo do HFY-0142 (montado pelo JS). */

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

.plt-borda{--bd:clamp(28px,4vw,56px);--s:calc(90% - var(--p,1)*52%);--kb:calc(var(--bd)*var(--tan15));
  position:absolute;left:0;right:0;top:-1px;height:var(--bd);background:var(--c-branco);pointer-events:none;
  clip-path:polygon(calc(var(--s) + var(--kb)) 0,100% 0,100% 100%,var(--s) 100%)}

.plt-corpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha);row-gap:var(--e-6)}
.plt-seletor,.plt-fig{grid-column:1/-1;min-width:0}

/* seletor */
.plt-seletor{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linha);border-radius:var(--r-controle);padding:var(--e-1);gap:var(--e-1)}
.plt-aba{min-height:48px;padding:0 var(--e-2);border-radius:var(--r-etiqueta);font:700 .9375rem/1.15 var(--f-sans);color:var(--texto-2);transition:background-color var(--dur-micro) var(--curva-entrada),color var(--dur-micro) var(--curva-entrada)}
.plt-aba:hover{color:var(--texto)}
.plt-aba[aria-selected="true"]{background:var(--texto);color:var(--fundo)}

/* moldura e visões */
.plt-visao{padding:var(--e-6) 20px}
.plt-visao:focus-visible{outline-offset:-4px}
.plt-visao-t{margin-bottom:var(--e-4);font:400 var(--t-rotulo)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.plt-abas .plt-visao-t{display:none}
/* com abas: as duas visões ocupam a mesma célula, então a moldura não muda de altura na troca */
.plt-visoes{position:relative;display:grid;overflow:hidden}
.plt-abas .plt-visao{grid-area:1/1;min-width:0}
.plt-abas .plt-visao:not(.plt-ativo){visibility:hidden}
.plt:not(.plt-abas) .plt-visao+.plt-visao{border-top:1px solid var(--linha)}
.plt-linha{margin-top:var(--e-6);font:400 clamp(1rem,1.3vw,1.125rem)/1.5 var(--f-sans);color:var(--texto-2)}

/* para quem decide: três números e um gráfico */
.plt-decide{display:grid;gap:var(--e-8)}
.plt-numeros>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-4);padding:14px 0;border-top:1px solid var(--linha)}
.plt-numeros>div:first-child{border-top:0;padding-top:0}
.plt-numeros dt{font:400 1rem/1.3 var(--f-sans);color:var(--texto-2)}
.plt-numeros dd{font:400 .9375rem/1 var(--f-sans);color:var(--texto-2);white-space:nowrap}
.plt-numeros b{margin-right:.12em;font:700 clamp(2.5rem,4.4vw,3.5rem)/.9 var(--f-sans);letter-spacing:-.05em;color:var(--texto);font-variant-numeric:tabular-nums}
.plt-grafico-t{margin-bottom:var(--e-4);font:400 1rem/1.3 var(--f-sans);color:var(--texto-2)}
.plt-barras{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.4vw,20px);align-items:end}
.plt-barras>li{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.plt-barras b{font:700 .9375rem/1 var(--f-sans);color:var(--texto);font-variant-numeric:tabular-nums}
.plt-barras i{display:block;height:calc(var(--v)*6px);border-top:2px solid var(--borda-controle);transform-origin:50% 100%;
  background:repeating-linear-gradient(105deg,color-mix(in srgb,var(--borda-controle) 70%,transparent) 0 2px,color-mix(in srgb,var(--borda-controle) 14%,transparent) 2px 7px)}
.plt-barras span{font:400 .8125rem/1 var(--f-sans);color:var(--texto-3)}
.plt-barra-atual i{background:var(--marca);border-top-color:var(--marca)}

/* para quem corrige: quatro achados por prioridade */
.plt-achados>li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cod sev" "tit tit" "dono prazo";gap:6px var(--e-4);align-items:center;padding:var(--e-4) 0;border-top:1px solid var(--linha);font-size:.875rem;color:var(--texto-2)}
.plt-achados>li:first-child{border-top:0;padding-top:0}
.plt-achados>li:last-child{padding-bottom:0}
.plt-cod{grid-area:cod;font:400 .8125rem/1 var(--f-mono);color:var(--texto-3)}
.plt-tit{grid-area:tit;font:700 1rem/1.3 var(--f-sans);color:var(--texto);text-wrap:balance}
.plt-sev{grid-area:sev}
.plt-sev .etiqueta{font-size:.8125rem}
.plt-dono{grid-area:dono}
.plt-prazo{grid-area:prazo;display:inline-flex;align-items:center;gap:var(--e-2);color:var(--texto);white-space:nowrap}
.plt-feito .plt-tit{font-weight:400;color:var(--texto-2)}
.plt-feito .plt-prazo{color:var(--texto-2)}

@media (min-width:720px){
  .plt-seletor{justify-self:start;grid-template-columns:auto auto}
  .plt-aba{padding:0 var(--e-6);font-size:1rem}
  .plt-visao{padding:var(--e-8)}
  .plt-sev .etiqueta{font-size:.875rem}
  .plt-quadro .moldura-nota{padding-inline:var(--e-8)}
  .plt-decide{grid-template-columns:5fr 7fr;column-gap:var(--e-16);align-items:center}
  .plt-visao-t{grid-column:1/-1}
  .plt-numeros dt{font-size:1.125rem}
  .plt-numeros>div{padding:var(--e-4) 0}
  .plt-barras b{font-size:1rem}
  .plt-barras span{font-size:.875rem}
}

/* a partir de 900 px os achados viram linhas de tabela */
@media (min-width:900px){
  .plt-abas .plt-corrige{display:flex;flex-direction:column;justify-content:center}
  .plt-decide{align-content:center}
  .plt-achados>li{grid-template-columns:5.5rem minmax(0,1fr) 4.5rem 8rem 9.75rem;grid-template-areas:"cod tit sev dono prazo";column-gap:var(--e-4);min-height:60px;padding:var(--e-3) 0;font-size:1rem}
  .plt-achados>li:first-child,.plt-achados>li:last-child{padding:var(--e-3) 0}
  .plt-cod{font-size:.875rem}
}

/* desktop largo: seletor vertical na coluna do rótulo, moldura na coluna do título */
@media (min-width:1200px){
  .plt-seletor{grid-column:1/span 3;align-self:start;justify-self:stretch;grid-template-columns:1fr;gap:0;padding:0;border:0;border-radius:0;margin-right:var(--e-8)}
  .plt-aba{min-height:64px;padding:0;border-top:1px solid var(--linha);border-radius:0;text-align:left;font-size:1.25rem;letter-spacing:-.02em;color:var(--texto-3)}
  .plt-aba:last-child{border-bottom:1px solid var(--linha)}
  .plt-aba[aria-selected="true"]{background:none;color:var(--texto)}
  .plt-aba[aria-selected="true"]::after{content:"";float:right;width:2px;height:20px;margin-right:var(--e-2);background:var(--texto);transform:skewX(calc(-1*var(--inclinacao)))}
  .plt-fig{grid-column:4/-1}
}

/* ---------- MOVIMENTO ---------- */
/* troca de visão: cortina de 15° medida em px (--k = altura × tan 15°, posta pelo JS) */
.plt-varre{display:none}
.mov .plt-abas .plt-visao.plt-sai{visibility:visible}
.mov .plt-abas .plt-visao.plt-entra{z-index:1;background:var(--sup);animation:plt-corte 760ms var(--curva-tela) both}
.mov .plt-abas .plt-varre{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.plt-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}
.plt-varre::after{content:"";position:absolute;right:100%;top:0;bottom:0;width:160px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--texto) 9%,transparent));transform:skewX(calc(-1*var(--inclinacao)));transform-origin:100% 0}
.mov .plt-varre.plt-varre-on{animation:plt-varre 760ms var(--curva-tela) both}
@keyframes plt-corte{
  from{clip-path:polygon(0 0,0px 0,calc(0px - var(--k,140px)) 100%,0 100%)}
  to{clip-path:polygon(0 0,calc(100% + var(--k,140px)) 0,100% 100%,0 100%)}
}
@keyframes plt-varre{
  0%{transform:translate3d(0,0,0);opacity:1}
  85%{opacity:1}
  100%{transform:translate3d(calc(100% + var(--k,140px)),0,0);opacity:0}
}

/* para quem decide: barras crescem em sequência, rótulos sobem; .plt-zera é o estado inicial (JS) */
.mov .plt-barras i{transition:transform 1000ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*95ms + 200ms)}
.mov .plt-barras b{transition:opacity 500ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*95ms + 520ms)}
.mov .plt-numeros>div{transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 800ms cubic-bezier(.16,1,.3,1)}
.mov .plt-numeros>div:nth-child(2){transition-delay:90ms}
.mov .plt-numeros>div:nth-child(3){transition-delay:180ms}
.mov .plt-zera .plt-barras i{transform:scaleY(0);transition:none}
.mov .plt-zera .plt-barras b{opacity:0;transform:translate3d(0,10px,0);transition:none}
.mov .plt-zera .plt-numeros>div{opacity:0;transform:translate3d(-4px,14px,0);transition:none}
.plt-barras>li{transition:opacity var(--dur-entrada) var(--curva-entrada)}
.mov-ponteiro .plt-barras:hover>li:not(:hover){opacity:.38}

/* para quem corrige: linhas reagem ao ponteiro (realce que entra da esquerda + seta) */
.plt-achados>li{position:relative;z-index:0;transition:opacity var(--dur-entrada) var(--curva-entrada)}
.plt-achados>li::before{content:"";position:absolute;inset:0 -12px;z-index:-1;background:var(--sup-2);transform:scaleX(0);transform-origin:0 50%;transition:transform 480ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.mov-ponteiro .plt-achados>li:hover::before,.plt-achados>li.plt-aberto::before{transform:scaleX(1)}
.mov-ponteiro .plt-achados:hover>li:not(:hover){opacity:.45}
.mov-ponteiro .plt-achados>li:hover .plt-tit{color:var(--texto)}
/* no toque (e na primeira vez de todo mundo): o realce passa sozinho pelas linhas, em sequência */
.mov .plt-toca .plt-achados>li{animation:plt-linha 720ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*80ms + 320ms)}
.mov .plt-toca .plt-achados>li::before{animation:plt-passa 900ms var(--curva-tela) both;animation-delay:calc(var(--i,0)*120ms + 760ms)}
@keyframes plt-linha{from{opacity:0;transform:translate3d(-4px,14px,0)}to{opacity:1;transform:none}}
@keyframes plt-passa{
  0%{transform:scaleX(0);transform-origin:0 50%;opacity:1}
  50%{transform:scaleX(1);transform-origin:0 50%;opacity:1}
  100%{transform:scaleX(1);transform-origin:0 50%;opacity:0}
}

/* resumo do HFY-0142: a linha vira um botão de abrir (montado pelo JS com o texto da seção Achado) */
.plt-mais{font:inherit;color:inherit;letter-spacing:inherit;text-align:left;text-wrap:balance}
.plt-mais::before{content:"";position:absolute;inset:0 -12px;z-index:1}
.plt-mais:focus-visible{outline-offset:4px}
.plt-sinal{position:absolute;right:-9px;top:13px;width:11px;height:11px;color:var(--texto);transition:transform 520ms cubic-bezier(.16,1,.3,1)}
.plt-sinal::before,.plt-sinal::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.plt-sinal::after{transform:rotate(90deg)}
.plt-aberto .plt-sinal{transform:rotate(135deg)}
.plt-abre>.plt-sev{padding-right:var(--e-4)}
.plt-achados>li.plt-abre{grid-template-areas:"cod sev" "tit tit" "dono prazo" "res res"}
.plt-resumo{grid-area:res;display:grid;grid-template-rows:0fr;min-width:0;transition:grid-template-rows 620ms cubic-bezier(.16,1,.3,1)}
.plt-aberto .plt-resumo{grid-template-rows:1fr}
.plt-resumo-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear 620ms}
.plt-aberto .plt-resumo-in{visibility:visible;transition-delay:0s}
.plt-resumo dl{display:grid;gap:var(--e-4) var(--e-6);margin-top:var(--e-3);padding:var(--e-4) 0 var(--e-2);border-top:1px dashed var(--linha)}
.plt-resumo dt{margin-bottom:var(--e-1);font:400 var(--t-rotulo)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.plt-resumo dd{font:400 .9375rem/1.45 var(--f-sans);color:var(--texto);text-wrap:pretty}
.plt-resumo code{font:400 .875rem/1 var(--f-mono);color:var(--texto-2)}
.plt-resumo code+code{color:var(--texto)}
.plt-resumo dl>div{opacity:0;transform:translate3d(-3px,10px,0);transition:opacity 500ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1)}
.plt-aberto .plt-resumo dl>div{opacity:1;transform:none;transition-delay:calc(var(--j,0)*80ms + 160ms)}

@media (min-width:720px){
  .plt-sinal{right:-20px}
  .plt-abre>.plt-sev{padding-right:0}
}
@media (min-width:900px){
  .plt-achados>li.plt-abre{grid-template-areas:"cod tit sev dono prazo" "res res res res res";grid-template-rows:minmax(36px,auto) auto;row-gap:0;align-content:center}
  .plt-sinal{top:25px}
  .plt-resumo{padding-left:calc(5.5rem + var(--e-4))}
  .plt-resumo dl{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--e-2)}
  .plt-achados>li::after{content:"→";position:absolute;right:-24px;top:50%;font:400 1rem/1 var(--f-sans);color:var(--texto);opacity:0;transform:translate3d(-8px,-50%,0);transition:opacity var(--dur-entrada) var(--curva-entrada),transform 480ms cubic-bezier(.16,1,.3,1);pointer-events:none}
  .mov-ponteiro .plt-achados>li:not(.plt-abre):hover::after{opacity:1;transform:translate3d(0,-50%,0)}
}