/* ==========================================================================
   FLUXO CONECTADO — prefixo flx-
   Caixas em sequência, ligadas por traço de 1px que termina em ponta:
   de onde vem, por onde passa, onde chega.

   Tokens usados:
     --rule-2         traço, ponta e contorno da caixa (o desenho inteiro)
     --accent         cor da ponta — a direção é a informação da peça
     --fg             rótulo da caixa
     --fg-2           linha de apoio
     --fg-muted       número ordinal e a ressalva
     --display        face do número e do rótulo
     --sans           face da linha de apoio (herdada do body)
     --radius-media   canto da caixa; 0 no tema flat da Liberta
   Primitivas do core (usadas, não recopiadas): .wrap .sec-pad .sec-head
   .eyebrow h2.sec-title .sec-lead .visually-hidden.

   A CAIXA É UM CONTORNO, NÃO UM CARTÃO, e essa é a decisão que separa esta
   peça de uma grade de quatro cards. O contorno tem a MESMA espessura e a
   MESMA cor do traço que liga uma caixa à outra, então o olho lê um desenho
   só. Vestir a caixa com a primitiva .glass do core resolveria a aparência e
   destruiria a leitura: um card de vidro com um tracinho ao lado é uma grade
   com enfeite, não um diagrama. Por isso também não há hover em lugar nenhum
   — nada aqui é clicável, e realce ao passar o mouse numa caixa inerte é
   promessa falsa (a peça inteira tem zero paradas de Tab, de propósito).

   ONDE O TRAÇO MORA: no VÃO da grade. `left:100%` é a borda direita do <li>,
   e o <li> tem a largura exata da caixa; `width:var(--flx-gap)` é o próprio
   vão. Daí o traço ligar a borda de uma caixa à borda da seguinte em
   QUALQUER largura, sem uma linha de JavaScript e sem medir DOM — que é o
   que o irmão dados/diagrama-hub precisa fazer, porque a topologia dele é um
   hub com traço na diagonal. Cadeia não pede cálculo.

   NÃO EXISTE @media(prefers-reduced-motion) NESTE ARQUIVO, e a ausência é
   deliberada: não há transição, animação ou keyframe aqui. A única entrada
   da peça é o [data-rv] do core, que o core já desliga — e o traço, sendo
   pseudo-elemento do nó revelado, entra com ele (opacidade e blur valem para
   o elemento e todo o seu conteúdo gerado). Mesmo caso do
   prova/stats-contador-regua.
   ========================================================================== */

.flx{
  /* Vão horizontal entre caixas — é também o COMPRIMENTO do traço. Uma
     variável só para as duas coisas: separá-las é o jeito de o traço deixar
     de encostar nas caixas no dia em que alguém mexer no respiro. */
  --flx-gap:clamp(20px,2.6vw,44px);
  /* O mesmo, no empilhado. Não reaproveita --flx-gap porque 20px de vão
     vertical entre duas caixas largas lê como erro de layout. */
  --flx-stack-gap:34px;
  --flx-pad:clamp(18px,1.7vw,26px);
  /* A ponta, em dois parafusos: comprimento e MEIA-ALTURA. Os dois são
     inteiros de propósito, e isso foi medido. A ponta é o triângulo de
     bordas, e o navegador arredonda `border-width` a pixel inteiro: com a
     meia-altura escrita como calc(--flx-arrow * .6) = 4,2px, o layout usava
     4px e o vértice ficava 0,2px ACIMA do eixo do traço. Derivar uma da
     outra parece mais limpo e sai errado. */
  --flx-arrow:8px;
  --flx-arrow-half:3px;
  --flx-line:var(--rule-2);
  /* A ponta é a única coisa em cor de marca, porque a DIREÇÃO é a informação
     da peça — o resto do desenho é estrutura. Para um diagrama monocromático,
     --flx-arrow-color:var(--rule-2).

     Lê --accent-ink, e não --accent, mesmo sendo uma FORMA e não texto: em
     escopo escuro os dois são o mesmo valor, e em escopo claro o accent puro
     não fecha contraste (1.36:1 com o sage da Liberta sobre o creme). Uma
     seta de 8x6px que ninguém vê apaga a direção, que é justamente a
     informação da peça — o problema é o mesmo do realce de texto, e a
     solução do core serve nos dois. O fallback mantém de pé quem colar o
     bloco fora de um escopo de tom. Ver CLAUDE.md §3 e MANUAL §3. */
  --flx-arrow-color:var(--accent-ink,var(--accent));
  /* Teto da caixa no empilhado. Sem ele, em 768px a caixa vira uma lâmina de
     690px com um traço de 34px embaixo. */
  --flx-box-max:520px;
}

/* Só a largura: o resto — inclusive a centralização dos filhos vem do .sec-head do core (desde 2026-09-29) — vem da primitiva. */
.flx-head{--head-max:720px}

/* ---------------------------------------------------------------- a cadeia */
/* grid-auto-flow:column com grid-auto-columns:minmax(0,1fr) dá UMA COLUNA
   POR <li>, sem ninguém declarar quantas. É o que faz 3, 4 ou 5 caixas
   funcionarem no mesmo arquivo: um repeat(4,1fr) obrigaria a manter a
   contagem em sincronia com o markup, e a quinta caixa sairia por baixo.
   O `0` do minmax não é enfeite: sem ele a coluna nunca encolhe abaixo do
   min-content do texto e a fileira estoura a página. */
.flx-lista{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:var(--flx-gap);
  margin-top:clamp(40px,6vh,72px);
}

.flx-passo{position:relative;display:grid;min-width:0}
/* §6.5 do contrato, preventivo: nada nesta peça alterna estado, mas
   `display:grid` numa regra de autor vence o [hidden] do navegador, e cortar
   a cadeia de cinco para três caixas é o caso em que alguém tenta esconder
   em vez de apagar. Com esta linha, o <li> escondido some E a grade fecha a
   coluna sozinha. Ainda assim, o certo é APAGAR o <li>. */
.flx-passo[hidden]{display:none}

.flx-caixa{
  border:1px solid var(--flx-line);
  border-radius:var(--radius-media);
  padding:var(--flx-pad);
}

.flx-num{
  display:block;
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.16em;color:var(--fg-muted);
}
.flx-rotulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.25vw,18px);line-height:1.25;letter-spacing:-.012em;
  color:var(--fg);margin-top:14px;
}
.flx-apoio{
  font-size:clamp(12.5px,1vw,14px);line-height:1.55;
  color:var(--fg-2);margin-top:9px;
}

/* ------------------------------------------------------------- o traço */
/* Pseudo-elemento, e não um nó: assim o desenho não existe na árvore de
   acessibilidade, o que é melhor que um <span> com aria-hidden. Quem carrega
   a relação em texto é o .flx-rel do markup.

   :not(:last-child) — a última caixa não liga a nada. A mesma condição vale
   para o .flx-rel, que a última caixa simplesmente não tem.

   O :has() é cinto e suspensório para quem cortar a cadeia com [hidden] em
   vez de apagar o <li>: sem ele, esconder a última caixa deixaria a ponta da
   penúltima apontando para o vazio. Onde :has() não existe, o pior caso é a
   seta órfã — nunca um layout quebrado. */
.flx-passo:not(:last-child)::before,
.flx-passo:not(:last-child)::after{content:"";position:absolute}
.flx-passo:has(+ .flx-passo[hidden])::before,
.flx-passo:has(+ .flx-passo[hidden])::after{content:none}

/* O traço: uma borda de 1px num elemento de altura zero. `top` desconta meio
   pixel para que o traço fique CENTRADO no eixo da caixa, e não meio pixel
   abaixo dele — é essa meia-linha que o teste de "liga os centros" mede. */
.flx-passo:not(:last-child)::before{
  left:100%;width:var(--flx-gap);
  top:calc(50% - .5px);height:0;
  border-top:1px solid var(--flx-line);
}

/* A ponta: o triângulo de bordas. Vértice EXATAMENTE na borda esquerda da
   caixa seguinte — a caixa tem `left` recuado de --flx-arrow e o vértice do
   border-left cai na borda direita do próprio elemento, que é 100% + o vão.
   Nada de rotate(45deg): girar um quadrado põe o vértice a meia diagonal do
   centro, e o alinhamento passaria a depender de um √2 escrito à mão. */
.flx-passo:not(:last-child)::after{
  left:calc(100% + var(--flx-gap) - var(--flx-arrow));
  top:calc(50% - var(--flx-arrow-half));
  width:0;height:0;
  border:var(--flx-arrow-half) solid transparent;
  border-right:0;
  border-left:var(--flx-arrow) solid var(--flx-arrow-color);
}

/* .flx-rel não tem regra própria, e é intencional: ele veste a
   .visually-hidden do core e existe para NOMEAR o slot — é onde a skill de
   layout escreve a relação ("Segue para a custódia"). Ver bin/editorial.json. */

/* ------------------------------------------------------------- a ressalva */
/* Tipografia pela primitiva .nota do core; aqui só posição e medida — 64ch
   para a ressalva centrada não virar uma linha longa sob a cadeia. */
.flx-nota{
  --nota-max:64ch;
  margin:clamp(30px,4vh,48px) auto 0;
  text-align:center;
}

/* ==========================================================================
   EMPILHADO — a cadeia vira vertical e o traço acompanha
   UM breakpoint só, no 900px da casa (o mesmo do dados/diagrama-hub). Não há
   estado intermediário de duas colunas, e a ausência é decisão: cadeia que
   quebra em duas fileiras precisa de traço em COTOVELO, ligando o fim de uma
   fileira ao começo da seguinte — e é exatamente aí que CSS puro morre e o
   SVG calculado do dados/diagrama-hub passa a ser a resposta certa. Melhor
   empilhar do que desenhar um cotovelo errado.

   Medido a 901px, que é o pior caso da fileira: quatro caixas de 185px, sem
   estouro. Com CINCO caixas a mesma largura dá 143px, e aí a linha de apoio
   quebra em cinco linhas de doze caracteres — daí a variação "cinco caixas,
   só rótulo" da ficha. É regra editorial, não de CSS: nenhuma media query
   sabe quantos <li> existem.

   O TRAÇO VAI AO CENTRO, não à esquerda. À esquerda, com o número em cima
   dele, a peça vira o filete do listas/linha-do-tempo-etapas — que é outro
   componente, para outro conteúdo (ver a ficha).
   ========================================================================== */
@media(max-width:900px){
  .flx-lista{
    grid-auto-flow:row;
    grid-template-columns:minmax(0,1fr);
    gap:var(--flx-stack-gap);
  }
  .flx-passo{max-width:var(--flx-box-max);margin-inline:auto;width:100%}

  .flx-passo:not(:last-child)::before{
    left:calc(50% - .5px);width:0;
    top:100%;height:var(--flx-stack-gap);
    border-top:0;
    border-left:1px solid var(--flx-line);
  }
  .flx-passo:not(:last-child)::after{
    left:calc(50% - var(--flx-arrow-half));
    top:calc(100% + var(--flx-stack-gap) - var(--flx-arrow));
    border:var(--flx-arrow-half) solid transparent;
    border-bottom:0;
    border-top:var(--flx-arrow) solid var(--flx-arrow-color);
  }

  .flx-rotulo{font-size:17px}
  .flx-apoio{font-size:14px}
}