/* 06 · CONTROLE · prefixo .ctl-
   Três itens e uma tela. A tela é um palco com o corte de 15°: em cima, o "ar" por onde os pedidos
   voam da esquerda para a direita; embaixo, as duas listas (o resumo em texto). À esquerda do corte
   fica o que não saiu ("Bloqueado antes de sair"); à direita, o que passou ("Dentro do escopo").
   Geometria: --corte é o x do corte no topo do palco; --ar é a altura da faixa de voo.
   O JS (js/06-controle.js) move os pedidos só com transform e lê a mesma geometria do DOM.
   Sem JS ou com movimento reduzido: os três .ctl-chip-fixo mostram um instante parado e legível. */

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

/* borda superior: degrau de 15° com a cor da seção anterior (o papel do capítulo Defense), que anda com a rolagem */
.ctl-borda{--bd:clamp(28px,4vw,56px);--s:calc(8% + var(--p,1)*40%);--kb:calc(var(--bd)*var(--tan15));
  position:absolute;left:0;right:0;top:-1px;height:var(--bd);background:var(--c-papel);pointer-events:none;
  clip-path:polygon(0 0,calc(var(--s) + var(--kb)) 0,var(--s) 100%,0 100%)}

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

/* ---------- itens ---------- */
.ctl-itens{display:grid;gap:0}
.ctl-itens>li{position:relative;padding:var(--e-4) 0;border-top:1px solid var(--linha)}
.ctl-itens>li:last-child{border-bottom:1px solid var(--linha)}
.ctl-item-t{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--f-sans);letter-spacing:-.03em;color:var(--texto)}
.ctl-itens p{margin-top:6px;font:400 clamp(1rem,1.3vw,1.125rem)/1.45 var(--f-sans);color:var(--texto-2);text-wrap:pretty}
/* item em destaque (ponteiro, toque ou o passeio automático): o fio de cima acende, os outros apagam */
.ctl-itens>li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--texto);transform:scaleX(0);transform-origin:0 50%;transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.ctl-itens>li.ctl-item-on::before{transform:scaleX(1)}
.ctl-itens.ctl-tem-on>li:not(.ctl-item-on){opacity:.42}
.mov .ctl-itens>li{cursor:default}

/* ---------- tela ---------- */
.ctl-tela{position:relative}
html:not(.mov) .ctl-barra{display:none}
.ctl-barra{gap:var(--e-4);min-height:56px}
.ctl-degrau{flex:none}
.mov .ctl-degrau.ativo>i{animation-iteration-count:infinite}
/* fita do registro: um traço por pedido decidido (branco passou, laranja bloqueado) */
.ctl-fita{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;height:14px;overflow:hidden;transition:opacity 300ms var(--curva-entrada)}
.ctl-fita>i{flex:none;width:2px;height:12px;background:var(--texto-3);opacity:.22;transform:skewX(calc(-1*var(--inclinacao))) scaleY(.5)}
.ctl-fita>i.ctl-tq-ok{background:var(--texto);opacity:.85;transform:skewX(calc(-1*var(--inclinacao)));animation:ctl-tq 420ms cubic-bezier(.16,1,.3,1)}
.ctl-fita>i.ctl-tq-blk{background:var(--marca);opacity:1;transform:skewX(calc(-1*var(--inclinacao)));animation:ctl-tq 420ms cubic-bezier(.16,1,.3,1)}
@keyframes ctl-tq{from{transform:skewX(calc(-1*var(--inclinacao))) scaleY(0)}}
/* botão real de pausa */
.ctl-pausa{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:118px;min-height:36px;padding:0 14px;border:1px solid var(--borda-controle);border-radius:var(--r-controle);font:700 .8125rem/1 var(--f-sans);color:var(--texto);transition:background-color var(--dur-micro) var(--curva-entrada),border-color var(--dur-micro) var(--curva-entrada),color var(--dur-micro) var(--curva-entrada),opacity 300ms var(--curva-entrada)}
.ctl-pausa::before{content:"";position:absolute;inset:-5px 0}
.ctl-pausa:hover{border-color:var(--texto)}
.ctl-pausa-ic{flex:none;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.ctl-pausado .ctl-pausa{background:var(--texto);border-color:var(--texto);color:var(--fundo)}
.ctl-pausado .ctl-pausa-ic{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.ctl-pausa::after{content:"";position:absolute;inset:-1px;border:1px solid var(--texto);border-radius:inherit;opacity:0;pointer-events:none}
.mov .ctl-tela[data-ctl-ve="pausa"] .ctl-pausa::after{animation:ctl-anel 1100ms cubic-bezier(.16,1,.3,1) infinite}
@keyframes ctl-anel{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.6)}}

/* palco: faixa de voo + listas, cortados pela diagonal */
.ctl-palco{--corte:68%;--ar:196px;position:relative;overflow:hidden;isolation:isolate}
.ctl-palco::before{content:"";position:absolute;z-index:-1;top:0;left:var(--corte);width:100%;height:var(--ar);background:var(--fundo);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:0 0}
.ctl-corte{position:absolute;z-index:2;top:0;left:var(--corte);width:1px;height:var(--ar);background:var(--borda-controle);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:0 0;pointer-events:none;transition:background-color 300ms var(--curva-entrada)}
.ctl-ar{position:relative;height:var(--ar);transition:opacity 300ms var(--curva-entrada)}
.ctl-ar::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 400ms var(--curva-entrada);
  background-image:repeating-linear-gradient(105deg,transparent 0 13px,color-mix(in srgb,var(--texto) 7%,transparent) 13px 14px)}
.ctl-pausado .ctl-ar::after{opacity:1}
.ctl-raia{position:absolute;left:0;right:0;height:1px;background-image:linear-gradient(90deg,var(--linha) 0 5px,transparent 5px 14px);background-size:14px 1px}
.ctl-raia:nth-child(1){top:20%}.ctl-raia:nth-child(2){top:47%}.ctl-raia:nth-child(3){top:74%}
.ctl-voo{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity 300ms var(--curva-entrada)}

/* pedido: etiqueta de rota */
.ctl-chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--borda-controle);border-radius:var(--r-etiqueta);background:var(--sup-2);font:400 .75rem/1 var(--f-mono);color:var(--texto);white-space:nowrap;will-change:transform,opacity}
.ctl-chip.ctl-passou{border-color:var(--texto);background:var(--sup)}
.ctl-chip.ctl-blk{border-color:var(--marca);background:var(--marca);color:var(--c-preto);font-weight:700}
/* instante parado (sem JS / movimento reduzido): um passou, um bateu no corte, um a caminho */
.ctl-chip-fixo{top:var(--cy);left:var(--cx);transform:translateY(-50%)}
.ctl-chip-fixo.ctl-passou{left:auto;right:var(--e-2)}
.ctl-chip-fixo.ctl-blk{left:auto;right:calc(100% - var(--corte) + var(--ar)*.47*var(--tan15) + 3px)}
/* faísca no ponto do corte onde um pedido foi decidido */
.ctl-faisca{position:absolute;left:0;top:0;width:3px;height:34px;margin:-17px 0 0 -1px;background:var(--texto);opacity:0;pointer-events:none}
.ctl-faisca.ctl-f-blk{background:var(--marca);width:4px}
.ctl-faisca.ctl-fa{animation:ctl-faisca-a 620ms cubic-bezier(.16,1,.3,1)}
.ctl-faisca.ctl-fb{animation:ctl-faisca-b 620ms cubic-bezier(.16,1,.3,1)}
@keyframes ctl-faisca-a{0%{opacity:1;clip-path:inset(40% 0 40% 0)}35%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes ctl-faisca-b{0%{opacity:1;clip-path:inset(40% 0 40% 0)}35%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}

/* listas: o resumo em texto */
.ctl-listas{position:relative;z-index:1;transition:opacity 300ms var(--curva-entrada)}
.ctl-lado{position:relative;padding:var(--e-6) 20px;border-top:1px solid var(--linha)}
.ctl-fora{background:var(--sup)}
.ctl-dentro{background:var(--fundo)}
.ctl-lado-t{display:flex;align-items:center;gap:10px;margin-bottom:var(--e-3);font:700 1rem/1.3 var(--f-sans);color:var(--texto);white-space:nowrap}
.ctl-lado li{position:relative;z-index:0;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:10px 0;border-top:1px solid var(--linha);font:400 .875rem/1.4 var(--f-mono);color:var(--texto)}
.ctl-lado li.ctl-sans{font-family:var(--f-sans);font-size:.9375rem}
.ctl-fora li{color:var(--texto-2)}
.ctl-n{margin-left:auto;font:400 .8125rem/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--texto-3);transition:color 300ms var(--curva-entrada)}
.ctl-n:empty{display:none}
.ctl-lado-t .ctl-n{font-size:.9375rem;color:var(--acento)}
/* linha que acabou de receber um pedido: pisca (laranja no bloqueio, branco no que passou) */
.ctl-lado li::before{content:"";position:absolute;inset:0 -8px;z-index:-1;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--texto) 10%,transparent)}
.ctl-fora li::before{background:color-mix(in srgb,var(--marca) 30%,transparent)}
.ctl-lado li.ctl-pa::before{animation:ctl-pisca-a 900ms cubic-bezier(.16,1,.3,1)}
.ctl-lado li.ctl-pb::before{animation:ctl-pisca-b 900ms cubic-bezier(.16,1,.3,1)}
.ctl-lado li.ctl-pa .ctl-n{animation:ctl-sobe-a 500ms cubic-bezier(.16,1,.3,1)}
.ctl-lado li.ctl-pb .ctl-n{animation:ctl-sobe-b 500ms cubic-bezier(.16,1,.3,1)}
@keyframes ctl-pisca-a{0%{opacity:1}100%{opacity:0}}
@keyframes ctl-pisca-b{0%{opacity:1}100%{opacity:0}}
@keyframes ctl-sobe-a{0%{transform:translate3d(0,7px,0);opacity:0}100%{transform:none;opacity:1}}
@keyframes ctl-sobe-b{0%{transform:translate3d(0,7px,0);opacity:0}100%{transform:none;opacity:1}}
.ctl-aviso{margin-top:var(--e-3);font:400 var(--t-legenda)/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}

/* ---------- item em destaque → parte da tela ---------- */
.ctl-tela[data-ctl-ve="escopo"] .ctl-ar,.ctl-tela[data-ctl-ve="escopo"] .ctl-voo,.ctl-tela[data-ctl-ve="escopo"] .ctl-fita,.ctl-tela[data-ctl-ve="escopo"] .ctl-pausa{opacity:.28}
.ctl-tela[data-ctl-ve="escopo"] .ctl-corte{background:var(--texto)}
.ctl-tela[data-ctl-ve="registro"] .ctl-ar,.ctl-tela[data-ctl-ve="registro"] .ctl-voo,.ctl-tela[data-ctl-ve="registro"] .ctl-pausa{opacity:.28}
.ctl-tela[data-ctl-ve="registro"] .ctl-n{color:var(--texto)}
.ctl-tela[data-ctl-ve="registro"] .ctl-fita>i{opacity:.6}
.ctl-tela[data-ctl-ve="registro"] .ctl-fita>i.ctl-tq-ok,.ctl-tela[data-ctl-ve="registro"] .ctl-fita>i.ctl-tq-blk{opacity:1}
.ctl-tela[data-ctl-ve="pausa"] .ctl-ar,.ctl-tela[data-ctl-ve="pausa"] .ctl-voo,.ctl-tela[data-ctl-ve="pausa"] .ctl-listas,.ctl-tela[data-ctl-ve="pausa"] .ctl-fita{opacity:.28}
.ctl-tela[data-ctl-ve="pausa"] .ctl-pausa{border-color:var(--texto)}

/* ---------- a partir do tablet: listas lado a lado, a diagonal atravessa o palco inteiro ---------- */
@media (min-width:720px){
  .ctl-itens{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--calha)}
  .ctl-itens>li,.ctl-itens>li:last-child{padding:20px var(--e-4) 0 0;border-bottom:0}
  .ctl-palco{--corte:64%;--ar:216px;--lh:200px}
  .ctl-palco::before,.ctl-corte{height:100%}
  .ctl-chip{height:28px;padding:0 10px;font-size:.8125rem}
  .ctl-listas{display:grid;grid-template-columns:calc(var(--corte) - var(--ar)*var(--tan15)) minmax(0,1fr);border-top:1px solid var(--linha)}
  .ctl-lado{padding:var(--e-6) var(--e-8) var(--e-8);border-top:0;background:none}
  .ctl-fora{padding-right:calc(var(--lh)*var(--tan15) + 22px)}
  .ctl-dentro{padding-left:28px}
  .ctl-lado-t{margin-bottom:var(--e-4)}
  .ctl-lado li{padding:var(--e-3) 0;font-size:.9375rem}
  .ctl-lado li.ctl-sans{font-size:1rem}
  .ctl-barra{padding-inline:var(--e-6) var(--e-4)}
}
@media (min-width:900px){
  .ctl-lado-t{font-size:1.125rem}
}

/* desktop largo: itens empilhados na esquerda, tela na direita */
@media (min-width:1200px){
  .ctl-corpo{align-items:center}
  .ctl-itens{grid-column:1/span 4;grid-template-columns:1fr;margin-right:var(--e-8)}
  .ctl-itens>li,.ctl-itens>li:last-child{padding:var(--e-6) 0}
  .ctl-itens>li:last-child{border-bottom:1px solid var(--linha)}
  .ctl-fig{grid-column:5/-1}
  .ctl-palco{--ar:236px}
}

/* com a simulação viva, o instante parado sai; pausar congela também o que é CSS */
.ctl-vivo .ctl-chip-fixo{display:none}
.ctl-pausado .ctl-degrau>i,.ctl-pausado .ctl-faisca,.ctl-pausado .ctl-fita>i,.ctl-pausado .ctl-lado li::before{animation-play-state:paused}
.mov .ctl-itens>li{transition:opacity 400ms var(--curva-entrada)}