/* =========================================================================
   ODX — a folha partilhada da família de percursos.
   =========================================================================

   ★ PORQUE É QUE ISTO FOI EXTRAÍDO, E NÃO GUARDADO POR COMPARAÇÃO.

   O relatório `docs/percursos/percursos-pagina.md` (ponto 4.2) deixou duas
   saídas para a deriva dos tokens: extrair uma folha partilhada, ou manter a
   duplicação e escrever uma guarda que compare os blocos `:root` byte a byte.
   Medi antes de escolher, e a medição decidiu:

   - os blocos `:root` do `index.html` e do `percurso.html` estão HOJE byte a
     byte iguais (`diff` das linhas 19–76 contra 17–74: idênticos). Ou seja
     **a guarda de `:root` não teria apanhado nada**;
   - e no entanto a deriva já tinha acontecido — QUATRO vezes, todas nas
     regras por baixo do `:root`, onde a guarda proposta não olhava:
       1. `.cartao:focus-visible` — o `index.html` corrigiu-o a 18/08 («outline
          :none sem nada no lugar era apagar o foco do teclado») e o
          `percurso.html` ficou com o `outline:none`;
       2. a regra `a:focus-visible,button:focus-visible{outline:…}` não existe
          de todo no `percurso.html` — a página inteira sem anel de foco;
       3. `.cartao .ico{color:var(--brand)}` contra `var(--brand-ink)` no
          `index.html` (a mesma correcção de contraste que o `.mais` levou);
       4. `.passo.decide .n{color:var(--actor-human)}` contra
          `var(--actor-human-ink)`.
     São o mesmo defeito do `--actor-human-ink` (2,76:1) outra vez, e nenhum
     deles vive num `:root`.

   A lição: a deriva não mora nos tokens, mora nas REGRAS que os usam. Uma
   guarda desenhada para o sítio onde o defeito apareceu da primeira vez não
   cobre a classe. Extrair é a única saída que a fecha.

   O que se paga por isto, dito por extenso: se esta folha não chegar pela
   rede, as páginas da família aparecem sem estilo nenhum. Aparecem — o HTML é
   semântico e lê-se — e é uma degradação VISÍVEL, ao contrário da deriva, que
   é invisível. A CSP já a permite (`style-src 'self'`), e ela vai com `?v=`
   porque a lição do `Cache-Control` desta casa está escrita no `nginx.conf`.

   ⚠️ O `index.html` NÃO carrega esta folha, de propósito: é a página de visão
   geral, tem componentes que a família não tem (`.painel`, `.barra-api`,
   `.veu`/`.modal`, `.nav-env`), e mexer-lhe no CSS enquanto três agentes
   trabalham em paralelo era arriscar a página mais visível do documento por
   uma arrumação. A cópia que sobra — a dele — é comparada com esta pelo
   `scripts/verificar-percursos.js`, que lê os três blocos de tokens e exige
   que sejam iguais aos daqui. Uma cópia guarda-se; oito extraem-se.

   O que ficou DE FORA: `.painel`, `.barra-api`, `.fluxo`, `.passo`, `.rots`,
   `.rot`, `.chaves`, `.ch`, `.veu`, `.modal*`, `.fechar` e `.aviso` estavam
   copiados no `percurso.html` e **nenhum deles era usado por uma única linha
   do corpo dessa página** (medido, classe a classe). Copiar CSS morto para
   oito páginas é multiplicar por oito uma coisa que não desenha nada.
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────
   Tokens — os MESMOS da plataforma ODX (web/public/index.html).
   Copiados de propósito e não reinventados: quem vier deste documento
   para o produto tem de reconhecer o sítio onde chega.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --font-display:"Avenir Next","Segoe UI Variable Display","Helvetica Neue",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","DejaVu Sans Mono",Menlo,monospace;

  --bg-0:#F5F6F8; --bg-1:#FAFBFC; --bg-2:#FFFFFF; --clinical-surface:#F0F1F3;
  --text-1:#171B26; --text-2:#4A5468; --text-3:#6E7890;
  --line:rgba(23,27,38,0.08); --line-2:rgba(23,27,38,0.16);

  --brand:#0E8A7B; --brand-ink:#0A6B60; --brand-dim:rgba(14,138,123,0.10);
  --actor-human:#B8860B; --actor-agent:#0E7C9C; --actor-system:#566078;
  /* ★ `--actor-human-ink` FALTAVA, e a falta tinha consequência medida.
     A plataforma define os dois (`web/public/index.html:118` e `:145`) e usa
     o `-ink` para TEXTO — `.chip.s-gold`, `.prov.human`, `.banner .bl`. Esta
     página copiou só o `--actor-human` e usou-o como cor de texto sobre
     `--gold-dim`: **2,76:1**, menos de metade do mínimo. Não é uma cor nova
     — é o token da plataforma que ficou por copiar. */
  --actor-human-ink:#7A5B00;
  --gold-dim:rgba(184,134,11,0.09);

  --ok:#1B7F4D; --warn:#9A6B00; --danger:#B3382E; --info:#245BA8;
  --ok-dim:rgba(27,127,77,.10); --warn-dim:rgba(154,107,0,.12);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --radius-panel:14px; --radius-control:10px; --radius-chip:999px;
  --shadow-1:0 1px 2px rgba(23,27,38,.06);
  --shadow-2:0 4px 12px rgba(23,27,38,.08);
  --shadow-3:0 12px 32px rgba(23,27,38,.14);
  --touch-min:44px;
}
:root[data-theme="dark"]{
  --bg-0:#0D1017; --bg-1:#12161F; --bg-2:#1A1F2B; --clinical-surface:#14171D;
  --text-1:#EEF1F6; --text-2:#A9B2C3; --text-3:#6F7890;
  --line:rgba(238,241,246,0.10); --line-2:rgba(238,241,246,0.20);
  --brand:#2FB8A6; --brand-ink:#7ADCCB; --brand-dim:rgba(47,184,166,0.14);
  --actor-human:#E8C46A; --actor-human-ink:#F1D89B; --actor-agent:#5CD6F2; --actor-system:#8A94A8;
  --gold-dim:rgba(232,196,106,0.12);
  --ok:#3DBF7E; --warn:#E0A93E; --danger:#E55A4C; --info:#6AA6F5;
  --ok-dim:rgba(61,191,126,.14); --warn-dim:rgba(224,169,62,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 12px rgba(0,0,0,.5);
  --shadow-3:0 12px 32px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-0:#0D1017; --bg-1:#12161F; --bg-2:#1A1F2B; --clinical-surface:#14171D;
    --text-1:#EEF1F6; --text-2:#A9B2C3; --text-3:#6F7890;
    --line:rgba(238,241,246,0.10); --line-2:rgba(238,241,246,0.20);
    --brand:#2FB8A6; --brand-ink:#7ADCCB; --brand-dim:rgba(47,184,166,0.14);
    --actor-human:#E8C46A; --actor-human-ink:#F1D89B; --actor-agent:#5CD6F2; --actor-system:#8A94A8;
    --gold-dim:rgba(232,196,106,0.12);
    --ok:#3DBF7E; --warn:#E0A93E; --danger:#E55A4C; --info:#6AA6F5;
    --ok-dim:rgba(61,191,126,.14); --warn-dim:rgba(224,169,62,.14);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 12px rgba(0,0,0,.5);
    --shadow-3:0 12px 32px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-body);
  line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}

/* ★ O ANEL DE FOCO É REGRA DA CASA E FALTAVA NESTA FAMÍLIA.
   O `index.html` tem esta linha; o `percurso.html` não a tinha, e por cima
   ainda apagava o foco do `.cartao` com `outline:none`. Quem navega a teclado
   percorria a página inteira sem saber onde estava. */
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}

/* ── barra ── */
.barra{position:sticky;top:0;z-index:60;
  /* ★ VALOR DE RECURSO ANTES DO `color-mix`, E O PREFIXO `-webkit-`.
     Uma declaração que o navegador não entende é DEITADA FORA, e a seguir
     não fica fundo nenhum: no iOS 17 e anterior (sem `color-mix()`) a barra
     ficava **transparente**, com a navegação a flutuar por cima do conteúdo
     a deslizar, e sem uma linha na consola. O `backdrop-filter` sem prefixo
     é a mesma história — o Safari só o serve como `-webkit-`. Esta é a
     família dos três defeitos que já custaram tempo nesta página: nenhum
     deles deu erro. */
  background:var(--bg-1);
  background:color-mix(in srgb,var(--bg-1) 88%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.barra-in{max-width:76rem;margin:0 auto;padding:0 var(--sp-4);height:60px;
  display:flex;align-items:center;gap:var(--sp-5)}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--text-1);text-decoration:none;display:flex;align-items:center;gap:var(--sp-2);flex:none}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;
  box-shadow:0 0 0 3px var(--brand-dim)}
/* TRÊS ligações, nunca oito. O `nav` do `index.html` mede 669 px para 8
   ligações num ecrã que mostra 211 — e a que ficava de fora era a única porta
   para a segunda página. A barra de um percurso leva «Visão geral», «Todos os
   percursos» e a actual, e cabe. */
nav{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;flex:1}
nav::-webkit-scrollbar{display:none}
/* `min-height` e não `padding`: medido no telemóvel, estes alvos davam 38 px
   de altura contra os 44 que a própria plataforma impõe em `.btn` e `.input`.
   O token `--touch-min` já estava declarado aqui em cima — só não era usado. */
nav a{font-size:.85rem;color:var(--text-2);text-decoration:none;padding:0 var(--sp-3);
  min-height:var(--touch-min);display:inline-flex;align-items:center;
  border-radius:var(--radius-chip);white-space:nowrap;transition:background .15s,color .15s}
nav a:hover,nav a:focus-visible{background:var(--brand-dim);color:var(--brand-ink)}
nav a[aria-current="true"],nav a[aria-current="page"]{background:var(--brand-dim);
  color:var(--brand-ink);font-weight:600}
.tema{flex:none;background:none;border:1px solid var(--line-2);color:var(--text-2);
  width:var(--touch-min);height:var(--touch-min);border-radius:var(--radius-control);cursor:pointer;
  font-size:.95rem;display:grid;place-items:center}
.tema:hover{border-color:var(--brand);color:var(--brand)}

.env{max-width:76rem;margin:0 auto;padding:0 var(--sp-4)}
section{padding:var(--sp-7) 0;scroll-margin-top:72px}

/* ── revelação ──────────────────────────────────────────────────────────
   ★ O CONTEÚDO É VISÍVEL POR OMISSÃO, E A ANIMAÇÃO É UM EXTRA.
   A primeira versão fazia o contrário — `.rev{opacity:0}` no CSS, e o
   JavaScript acrescentava `.on` quando a secção entrava no ecrã. Publicada,
   a página apareceu **inteiramente invisível**: nove secções, zero com
   `.on`. Sem um único erro na consola.
   A causa exacta do observador não disparar interessa menos do que a lição:
   uma página cujo conteúdo só existe se o JavaScript correr como esperado
   está a apostar o argumento todo num script. Agora o `.rev` só fica
   escondido se a classe `js` estiver na raiz — e essa classe é posta pelo
   próprio renderer DEPOIS de o observador estar montado e a funcionar. Se
   alguma coisa falhar antes disso, o pior que acontece é não haver
   animação. */
.rev{opacity:1;transform:none}
.js .rev{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js .rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none}}

/* ── o que se vê quando o script não corre ──────────────────────────────
   ★ O `percurso.html` NÃO TINHA ESTA REDE, e o `index.html` tinha.
   Sem os dois scripts, a página do percurso desenha o herói e a seguir dois
   títulos com vazio por baixo — o trilho e os achados são desenhados por
   JavaScript. A um parceiro isso lê-se como «o produto não está feito», que é
   o oposto exacto do que a página existe para dizer. Este aviso nasce VISÍVEL
   no HTML e é o renderer que o remove, no fim, depois de tudo estar
   desenhado. Cobre os três casos com um só mecanismo — JavaScript desligado,
   ficheiro que não chegou pela rede, e script que rebentou a meio. */
.sem-js{border-left:3px solid var(--warn);background:var(--warn-dim);padding:var(--sp-5);
  border-radius:0 var(--radius-panel) var(--radius-panel) 0;margin-top:var(--sp-6);
  font-size:.92rem;color:var(--text-1)}
.sem-js b{display:block;margin-bottom:var(--sp-2)}
.sem-js p{color:var(--text-2)}

/* ── herói ── */
.heroi{padding:var(--sp-7) 0 var(--sp-6);position:relative}
/* ★ `inset:… 0 …` E NÃO `-20%`, E O `overflow-x:hidden` DO CORPO SAIU COM ELE.
   Medido: com este pseudo-elemento escondido, `scrollWidth` do documento dá
   exactamente `clientWidth` a 320, 360 e 390 px — ou seja **nenhum elemento
   real desta página transborda**, e o único que transbordava era este brilho
   decorativo, a sangrar 65,6 px para cada lado (410 contra 360 medidos).
   O `overflow-x:hidden` no corpo estava a mascarar um sintoma que tinha uma
   só causa, e enquanto lá esteve nenhum transbordo futuro daria sinal. Agora
   que a causa está tratada, a página fica com um DETECTOR: se alguém
   acrescentar uma tabela ou uma palavra comprida que não caiba, ela passa a
   deslizar para o lado e vê-se — em vez de ser cortada em silêncio. */
.heroi::before{content:"";position:absolute;inset:-40% 0 auto;height:70vh;z-index:-1;
  background:radial-gradient(60% 50% at 20% 0%,var(--brand-dim),transparent 70%);pointer-events:none}
/* ⚠️ NOTA PARA QUEM EDITAR: `.olho` declara `color:var(--brand)` e
   `font-size:.72rem`, e NENHUM DOS DOIS chega ao ecrã quando o elemento é um
   `<p>` dentro do herói — a regra `.heroi p` logo abaixo tem especificidade
   (0,1,1) contra (0,1,0) e ganha as duas. A tarja sai portanto a `--text-2` e
   a 16 px, não a verde e a 11,5 px. Medido, não deduzido. Fica como está de
   propósito: assim lê-se com 7,04:1, e a intenção original mediria 3,93:1. */
.olho{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--brand);
  font-weight:700;margin-bottom:var(--sp-4)}
h1{font-family:var(--font-display);font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.08;
  letter-spacing:-.03em;font-weight:700;max-width:19ch;text-wrap:balance}
.heroi p{color:var(--text-2);font-size:clamp(1rem,2.2vw,1.2rem);max-width:56ch;margin-top:var(--sp-5)}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-panel);
  overflow:hidden;margin-top:var(--sp-6);box-shadow:var(--shadow-1)}
.num{background:var(--bg-2);padding:var(--sp-4)}
/* ★ `--text-2` e não `--text-3` NESTES RÓTULOS PEQUENOS, e o motivo é medido:
   `--text-3` sobre `--bg-2` dá 4,42 em claro e 3,74 em escuro, e o mínimo
   para texto abaixo de 18,66 px é 4,5. `--text-2` dá 7,61/7,72. */
.num dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);
  font-weight:600;margin-bottom:var(--sp-1)}
.num dd{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.02em;
  line-height:1.15;font-weight:700;text-wrap:balance}
.sub{color:var(--text-2);max-width:62ch;margin-top:var(--sp-3);margin-bottom:var(--sp-5)}
/* `--brand-ink` e não `--brand`: em modo CLARO `--brand` (#0E8A7B) sobre
   `--bg-0` dá 3,93 a 11,52 px — abaixo de 4,5. `--brand-ink` (#0A6B60) dá
   6,05. Em escuro `--brand-ink` é o tom claro (#7ADCCB) e dá 7,73. */
h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--brand-ink);margin:var(--sp-6) 0 var(--sp-4)}

/* ── cartões ── */
.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--sp-4)}
.cartao{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-panel);
  padding:var(--sp-5);text-align:left;font:inherit;color:inherit;
  box-shadow:var(--shadow-1);transition:transform .2s,box-shadow .2s,border-color .2s;
  display:flex;flex-direction:column;gap:var(--sp-2);min-height:var(--touch-min)}
/* ★ `outline:none` SEM NADA NO LUGAR era apagar o foco do teclado: sobrava um
   salto de 3 px, que num ecrã pequeno não se vê. O `index.html` corrigiu-o e
   o `percurso.html` ficou com a versão antiga — a deriva que esta folha
   existe para fechar. */
.cartao:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--brand)}
.cartao:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-3);
  border-color:var(--brand);outline:2px solid var(--brand-ink);outline-offset:2px}
.cartao .ico{width:34px;height:34px;border-radius:var(--radius-control);background:var(--brand-dim);
  color:var(--brand-ink);display:grid;place-items:center;font-size:1.05rem;margin-bottom:var(--sp-2)}
.cartao b{font-size:1.02rem;font-weight:650;letter-spacing:-.01em}
.cartao p{color:var(--text-2);font-size:.9rem}
.cartao .pe{margin-top:auto;padding-top:var(--sp-3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.cartao .cnt{font-family:var(--font-mono);font-size:.74rem;color:var(--text-2)}
.cartao .mais{font-size:.78rem;color:var(--brand-ink);font-weight:600}

/* ── o cartão de um percurso, no átrio ──────────────────────────────────
   ★ UM PERCURSO POR PERCORRER NÃO É UM CARTÃO APAGADO — É UM CARTÃO SEM
   LIGAÇÃO, COM A PALAVRA ESCRITA.
   A tentação é desenhá-lo a cinzento e deixar a cor dizer o resto. A cor
   sozinha não é sinal (a mesma lição do selo dos achados: quem não distingue
   dois tons vê dois cartões iguais), e um cartão apagado lê-se como «em
   breve», que é promessa. O que se quer que se leia é «isto ainda não foi
   caminhado, e por isso não há página» — e isso escreve-se. */
a.cartao{text-decoration:none;cursor:pointer}
.cartao.porpercorrer{background:var(--bg-1);border-style:dashed;box-shadow:none}
.cartao.porpercorrer:hover{transform:none;box-shadow:none;border-color:var(--line)}
.cartao .estado{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  padding:3px 10px;border-radius:var(--radius-chip);white-space:nowrap;
  background:var(--ok-dim);color:var(--text-1);border:1px solid var(--ok)}
.cartao .estado.aberto{background:transparent;color:var(--text-2);
  border:1px dashed var(--line-2)}

.marcas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
/* ★ `overflow-wrap:anywhere` — E ISTO ERA UM TRANSBORDO A SÉRIO, MEDIDO.
   A 320 px o `index.html` dava `scrollWidth` 320 contra `clientWidth` 305: a
   página inteira a deslizar 15 px para o lado, no ecrã mais pequeno que ainda
   se usa. A causa não estava no herói nem em nenhuma tabela — estavam quatro
   `.linha` da secção do dinheiro com marcas de rota compridas
   (`/v1/billing/documents/:id/certify` e vizinhas). Uma marca não quebra, logo
   a largura mínima do conteúdo passa a do contentor, e um item de grelha com
   `min-width:auto` transborda a caixa em vez de encolher.
   O padrão já existia nesta casa para o mesmo problema — `.rota` e `.dado dd`
   levam `word-break:break-all` desde o primeiro dia. À marca faltava, e
   ninguém tinha dado por isso porque o detector de transbordo é para se
   MEDIR, não para se olhar.
   `overflow-wrap:anywhere` e não `word-break:break-all` porque estas marcas
   também trazem nomes de ecrã em prosa («Facturação»), e o `break-all` parte
   palavras normais a meio. O `anywhere` só parte quando não cabe — e, ao
   contrário do `break-word`, conta para a largura mínima, que é o que aqui
   decide. Num browser que não o entenda fica o que já havia. */
.mc{font-family:var(--font-mono);font-size:.7rem;padding:3px 8px;border-radius:var(--radius-chip);
  background:var(--brand-dim);color:var(--brand-ink);overflow-wrap:anywhere}
.mc.ecra{background:transparent;border:1px solid var(--line-2);color:var(--text-2)}

/* ── estados (a lista de achados) ── */
.itens{display:grid;gap:var(--sp-3)}
.linha{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-panel);
  padding:var(--sp-4) var(--sp-5);display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);
  align-items:start;box-shadow:var(--shadow-1)}
.pt{width:20px;height:20px;border-radius:50%;margin-top:4px;flex:none;display:grid;place-items:center}
.pt::after{content:"";width:6px;height:6px;border-radius:50%}
.pt.pronto{border:2px solid var(--ok);background:var(--ok)}
.pt.pronto::after{background:var(--bg-2)}
.pt.curso{border:2px solid var(--warn);background:var(--warn-dim)}
.pt.curso::after{background:var(--warn)}
.pt.falta{border:2px dashed var(--text-3)}
.linha b{font-size:1rem;font-weight:650}
.linha p{color:var(--text-2);font-size:.92rem;margin-top:var(--sp-1)}

/* ── o trilho ── */
.trilho{position:relative;padding-left:0}
@media(min-width:44rem){.trilho{padding-left:3.2rem}
  .trilho::before{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:2rem;width:2px;
    background:linear-gradient(var(--brand),var(--brand) 70%,transparent)}}
.etapa{position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-panel);padding:var(--sp-5);margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-1)}
.etapa:hover{box-shadow:var(--shadow-2)}
@media(min-width:44rem){.etapa::before{content:attr(data-n);position:absolute;left:-3.2rem;top:1.15rem;
  width:2.15rem;height:2.15rem;border-radius:50%;background:var(--bg-0);
  border:2px solid var(--brand);color:var(--brand);font-family:var(--font-mono);
  font-size:.76rem;font-weight:700;display:grid;place-items:center}}
.etapa.decide::before{border-color:var(--actor-human);color:var(--actor-human-ink)}
.cab{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.cab .nm{font-family:var(--font-mono);font-size:.74rem;color:var(--brand-ink);font-weight:700}
@media(min-width:44rem){.cab .nm{display:none}}
.cab b{font-size:1.05rem;font-weight:650;letter-spacing:-.01em}

/* ── quem age em cada etapa ─────────────────────────────────────────────
   ★ O ACTOR DEIXOU DE SER BINÁRIO, E A REGRA É A DO `estadoDe()`.
   O renderer antigo decidia a classe com `p.ator === "laboratório"` — dois
   valores, e tudo o resto caía no estilo da clínica em silêncio. Um percurso
   de psicologia não tem laboratório; um de menores precisa de um terceiro
   actor (o responsável legal) com o dourado que a plataforma reserva às
   decisões humanas. Agora o percurso declara os que traz de novo em
   `PERCURSO.atores`, e um actor desconhecido e não declarado sai NEUTRO — não
   sai como clínica, que seria uma afirmação errada com a cara de uma certa. */
.quem{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  padding:2px 8px;border-radius:var(--radius-chip);background:var(--brand-dim);color:var(--brand-ink)}
.quem.a-lab,.quem.a-human{background:var(--gold-dim);color:var(--actor-human-ink)}
.quem.a-neutro{background:transparent;border:1px solid var(--line-2);color:var(--text-2)}

.etapa>p{color:var(--text-2);font-size:.93rem;max-width:64ch}
.rota{font-family:var(--font-mono);font-size:.74rem;color:var(--text-2);margin-top:var(--sp-3);
  word-break:break-all}
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-control);
  overflow:hidden;margin-top:var(--sp-4)}
.dado{background:var(--bg-1);padding:var(--sp-3) var(--sp-4)}
.dado dt{font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);
  font-weight:600;margin-bottom:2px}
.dado dd{font-family:var(--font-mono);font-size:.84rem;font-weight:600;word-break:break-all}
.caixa{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--radius-control);
  font-size:.88rem;line-height:1.55}
.caixa b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:var(--sp-2)}
/* ★ O RÓTULO DESTAS CAIXAS NÃO LEVA A COR DO ESTADO, e a razão é medida:
   `--ok` sobre `--ok-dim` dá **4,39:1** e `--warn` sobre `--warn-dim` dá
   **4,03:1** a 10,88 px — os dois abaixo de 4,5. E a saída não é inventar um
   `--ok-ink`, que a plataforma não tem: é fazer o que ela já faz em
   `.alert.ok` e `.alert.warn` (`web/public/index.html:486,489`), que é pôr o
   texto a `--text-1` e deixar a COR viver na barra lateral e no fundo. O
   estado continua a ler-se, e o rótulo passa a 15,9:1. */
.recusa{background:var(--ok-dim);border-left:3px solid var(--ok);color:var(--text-2)}
.recusa b{color:var(--text-1)}
.avisoc{background:var(--warn-dim);border-left:3px solid var(--warn);color:var(--text-2)}
.avisoc b{color:var(--text-1)}
.achadoc{background:var(--bg-1);border-left:3px solid var(--text-3);color:var(--text-2)}
.achadoc b{color:var(--text-2)}
/* ★ A CAIXA DA AUTORIZAÇÃO USA O DOURADO, e não uma cor nova.
   Quem autoriza em nome de outro é uma DECISÃO HUMANA, e o dourado
   (`--actor-human`) é o que a plataforma reserva para isso desde sempre. Um
   `--info-dim` novo teria de ser medido do zero e não existe em lado nenhum;
   este par já está medido. O rótulo vai a `--text-1` pela mesma razão dos
   outros três. */
.autorizacaoc{background:var(--gold-dim);border-left:3px solid var(--actor-human);color:var(--text-2)}
.autorizacaoc b{color:var(--text-1)}
.notac{color:var(--text-2);font-size:.86rem;margin-top:var(--sp-3);font-style:italic}
/* alvo de 44 px: é a ligação de volta, e num telemóvel é a que mais se usa */
.volta{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.85rem;
  min-height:var(--touch-min);color:var(--brand-ink);text-decoration:none}
.volta:hover{text-decoration:underline}

/* ── o selo de estado de um achado ──────────────────────────────────────
   ★ UM DOCUMENTO QUE ACUSA UM DEFEITO JÁ CORRIGIDO MENTE A QUEM O LÊ.
   A lista de achados desenhava o ponto com a classe FIXA `pt curso`; não
   havia forma de dizer «este fechou». Os achados vão sendo fechados, e sem
   isto a página passaria a apontar problemas resolvidos a um parceiro — o
   mesmo defeito de fundo que este repositório já apanhou em `m6-orgs.js`:
   prosa sobre um estado tem prazo de validade e não avisa quando expira.
   A cor sozinha não serve de sinal: quem não distingue verde de amarelo vê
   dois pontos iguais. Por isso o estado «corrigido» traz TEXTO — o selo
   abaixo — e não só um ponto de outra cor.
   O texto vai a `--text-1` pela mesma razão das caixas acima: `--ok` como cor
   de texto media 4,39:1 em claro. */
.selo{display:inline-block;font-family:var(--font-body);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;padding:2px 8px;border-radius:var(--radius-chip);
  background:var(--ok-dim);color:var(--text-1);margin-left:var(--sp-2);white-space:nowrap;
  vertical-align:middle;border:1px solid var(--ok)}

footer{border-top:1px solid var(--line);margin-top:var(--sp-7);padding:var(--sp-6) 0 var(--sp-7);
  color:var(--text-2);font-size:.85rem}
footer p+p{margin-top:var(--sp-2)}