/* ==========================================================================
   uc-prova — a abertura da tela de prova (Fase 2b, tarefa J, 06/09/2026)
   ==========================================================================

   ==========================================================================
   1. A ARVORE, MEDIDA — e `uc-prova` nao e' o que o nome sugere
   ==========================================================================
   Medido em 06/09/2026, anonimo, no HTML renderizado de
   `/provas/prova-dpe-sc-...-fundatec/`, por token de `class`:

     uc-prova 1 · __in 1 · __grid 1 · __col 1 · __acao 1 · __nota 1
     __pdfs 1 · __ad 1 · __lado 1 · __box 2 · __ficha 1        = 12 elementos

   O briefing dizia "uc-prova 12 (so' na tela de prova)". Os 12 batem — mas
   sao 11 NOMES em 12 elementos, e o `article.uc-prova` e' a RAIZ DA TELA
   INTEIRA: ele envolve tambem o cabecalho de pagina e as duas secoes de
   vitrine no fim. Cabecalho de pagina e' `uc-bq__capa`, que a tarefa H ja
   mediu como peca de outro dono (aparece em prova, simulado, taxonomia, 404
   e /questoes/ — ele VIAJA, e por isso nao e' desta peca); as duas secoes do
   fim sao `uc-secao` (F) com `uc-cartoes` (E).

   O que sobra — e o que esta peca e' — e' A ABERTURA: o numero, a acao, e a
   identidade da prova.

   ==========================================================================
   2. ⛔ `uc-prova` E `uc-sim2` SAO O MESMO ESQUELETO, LETRA POR LETRA
   ==========================================================================
   E' o achado que mais muda esta tarefa. `bancada.css`, lado a lado:

     .uc-prova__in  {max-width:var(--uc-maxw);margin:0 auto;padding:0 var(--uc-gutter) var(--sp-7)}
     .uc-sim2__in   {max-width:var(--uc-maxw);margin:0 auto;padding:0 var(--uc-gutter) var(--sp-7)}
     .uc-prova__grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr) 320px;align-items:start}
     .uc-sim2__grid {display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr) 320px;align-items:start}
     .uc-prova__col {min-width:0;display:flex;flex-direction:column}
     .uc-sim2__col  {min-width:0;display:flex;flex-direction:column}
     .uc-prova .uc-bq__n{margin:0;font-size:var(--uc-s-3);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
     .uc-sim2  .uc-bq__n{margin:0;font-size:var(--uc-s-3);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

   Quatro declaracoes IDENTICAS. E as duas que divergem divergem por um
   degrau que ninguem escolheu:

     .uc-prova__nota{... font-size:.82rem ...}   .uc-sim2__nota{... .80rem ...}
     .uc-prova__ad  {margin-top:var(--sp-5)}     .uc-sim2__ad  {margin-top:var(--sp-4)}

   E' a assinatura EXATA do par `uc-lbl`/`uc-eyebrow` que a tarefa D desfez e
   do par `uc-sec`/`uc-sec2` que a F desfez: mesma formula, um numero de
   diferenca. Aqui, porem, a consolidacao nao e' juntar os dois num prefixo —
   e' NAO ESCREVER O ESQUELETO. Tres das quatro declaracoes identicas somem
   sozinhas:

     __in   ->  a medida horizontal da pagina ja tem UM dono: `uc-secao__in`
                (`max-width:var(--uc-maxw)` + `padding-inline:var(--uc-gutter)`).
                Prova e simulado escrevendo a sua propria copia eram a 3a e a
                4a do mesmo numero.
     __col  ->  a coluna e' a propria `__decisao`.
     __ad   ->  uma unica declaracao de margem. Com a coluna sendo grade com
                `gap`, o anuncio e' filho direto e nao precisa de involucro.
     __box  ->  secao 3.

   O que fica de esqueleto e' UMA declaracao de grade por peca, e ela repete
   a decisao que o `uc-montador` e o `uc-resolvedor` ja tomaram (proporcao
   2:1, nunca pixel). ⚠️ Isso e' a QUARTA escrita da mesma grade neste tema —
   esta nomeada como divida no relatorio desta tarefa, com a proposta.

   ==========================================================================
   3. ⛔ DUAS CAIXAS COM CABECALHO EMPRESTADO VIRAM UMA LISTA
   ==========================================================================
   O tema antigo poe DOIS `div.uc-prova__box`, cada um com um
   `header.uc-bq__fh` — e `uc-bq__fh` e' cabecalho do MONTADOR, usado aqui
   como cabecalho generico de caixa, sem nenhum montador na tela. A tarefa H
   mediu isso e escreveu a regra: "um cabecalho de caixa e' assunto de quem
   tem a caixa".

   Aqui as duas caixas viram UMA lista de definicao, e o "o que cai" vira
   MAIS LINHAS DA MESMA LISTA. Some uma moldura, some um nivel de titulo,
   somem dois cabecalhos emprestados, e a barra lateral passa a ser uma
   tabela que se le de cima a baixo.

   ⛔ E CONSERTA UM HTML INVALIDO. Medido no DOM, nao lido no PHP:

     document.querySelector('.uc-prova__ficha').tagName        -> "DIV"
     document.querySelector('.uc-prova__ficha dt').closest('dl') -> null

   Os `<dt>`/`<dd>` de hoje nao tem `<dl>` nenhum acima. Fora de um `<dl>`
   eles nao sao lista de definicao para tecnologia assistiva nenhuma — sao
   dois elementos desconhecidos com estilo. Aqui a raiz e' `<dl>` e cada par
   vive num `<div>`, que e' a forma valida desde o HTML 5.2 e a unica que
   permite dar grade ao par.

   ⛔ E A LINHA "BANCAS" NAO VEM PARA A PROVA. Medido em quatro provas:

     DPE/SC FUNDATEC     ficha Banca=Fundatec           comp Bancas=[FUNDATEC 113]
     Sta Casa Quadrix    ficha Banca=Instituto Quadrix  comp Bancas=[Instituto Quadrix 100]
     TJ-PR FGV           ficha Banca=FGV                comp Bancas=[FGV 99]
     ENEM 2021 INEP      ficha Banca=INEP               comp Bancas=[INEP 1]

   4 de 4 com UM chip, e em 4 de 4 esse chip repete a linha "Banca" da ficha
   200px acima. Uma prova e' UM caderno de UMA banca — o grupo "Bancas" nunca
   pode ter dois. No simulado ele pode, e la ele fica.

   ==========================================================================
   4. OS ESTADOS, E OS NUMEROS QUE OS TORNAM REAIS
   ==========================================================================
   Medido no banco em 06/09/2026 (`wp eval`, 666 provas publicadas):

     com ZERO questao publicada .... 36        <- o estado VAZIO e' real
     com UMA questao ............... 1         <- e o de BORDA tambem
     maior acervo .................. 113
     titulo mais longo ............. 168 caracteres

   O briefing pedia o caso hostil "titulo de prova de 200 caracteres". O
   maior REAL e' de 168 ("Prova IRMANDADE DA SANTA CASA DE MISERICORDIA DE
   SAO PAULO – ISCMSP — Programas com Pre-Requisito em Cirurgia Geral
   (Especialidades Cirurgicas) 2022 (Instituto Quadrix)"), e os dez maiores
   ficam entre 152 e 168 — nao e' um fora-da-curva. So' que o TITULO nao e'
   desta peca (secao 1): ele mora no cabecalho de pagina. Onde uma cadeia
   dessas de fato cai aqui e' no `<dd>` de "Cargo" e no rotulo de um chip —
   e e' la que o exemplar de borda a poe.

   ⛔ "CARREGANDO" NAO EXISTE NESTA PECA, e a ausencia e' medida, nao
   esquecimento: a pagina inteira e' servida pronta pelo servidor e a acao
   primaria e' um `<a>` (`a.uc-btn--forte`, medido no DOM), ou seja,
   NAVEGACAO. Nao ha momento em que esta superficie esteja esperando
   resposta. A tela de simulado tem esse momento, porque la a acao e'
   `<button type="submit">` — e por isso ela tem o estado e esta nao tem.
   Desenhar um esqueleto aqui seria inventar forma para um estado que nao
   acontece, que e' o oposto do que esta fase faz.

   ==========================================================================
   5. ⛔ ESTE ARQUIVO NAO TEM UMA REGRA DE ESTADO, E ISSO E' A DECISAO
   ==========================================================================
   `data-uc-estado` fica na raiz `.uc-prova` porque e' o contrato do tema e
   porque o `aviso.css` LE dali (`[data-uc-estado="erro"] .uc-aviso__icone`).
   Mas nao ha uma unica regra `.uc-prova[data-uc-estado=...]` aqui: o que
   muda entre preenchido, vazio e erro e' QUAIS ELEMENTOS O TEMPLATE
   DESENHA — sem contagem nao ha contador, sem questao nao ha botao de
   resolver, e o painel de vazio/erro e' `uc-aviso`, que se pinta sozinho.
   Estado que nao muda a forma da peca nao vira regra de CSS; escrever uma
   so' para "ter os cinco" seria decoracao com nome de estado.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A SUPERFICIE
   --------------------------------------------------------------------------
   Duas colunas em proporcao (2:1) e nao os `320px` do tema antigo — a mesma
   decisao, e o mesmo numero, do `uc-montador` e do `uc-resolvedor`.
   `align-items:start` porque a coluna da decisao e a da identidade NUNCA tem
   a mesma altura, e igualar altura de blocos com conteudo desigual e' o
   tell que o craft nomeia.
   Nao ha `max-width` nem `padding` horizontal aqui: quem tem a medida da
   pagina e' o `uc-secao__in` (secao 2). */
.uc-prova{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--sp-6);
  align-items:start;
  min-width:0;
}


/* --------------------------------------------------------------------------
   A DECISAO — coluna 1
   --------------------------------------------------------------------------
   Sem moldura. A tarefa H tirou quatro do montador e a I cinco do
   resolvedor, com o mesmo argumento: nem tudo e' cartao, e quem gasta borda
   + preenchimento + raio para dizer "sou objeto separado" neste sistema e' o
   `uc-cartao`. Aqui o que separa e' espaco medido e UM fio.
   16px entre as partes da decisao (o numero, o botao, a nota sao o mesmo
   grupo: sao a mesma frase dita em tres formas). */
.uc-prova__decisao{
  display:grid;
  gap:var(--sp-4);
  min-width:0;
}

/* A linha que diz o que acontece DEPOIS do clique. `--uc-ink-3` sobre
   `--uc-paper` da 5,02:1 (calculado), acima do piso de 4,5 para texto de
   corpo. `--uc-medida` porque isto e' prosa e nao rotulo. */
.uc-prova__nota{
  max-width:var(--uc-medida);
  margin:0;
  min-width:0;
  color:var(--uc-ink-3);
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
}

/* OS DOCUMENTOS. O fio aqui e' a QUARTA escala do vocabulario que a tarefa F
   fixou — atravessando UM objeto —, e ele existe porque a fronteira e' real:
   acima, resolver online; abaixo, levar o papel embora. Uma escala, cinco
   larguras, e a largura diz o tamanho do que ela divide. Nao ha sexta.
   24px de respiro + o fio = a faixa "entre grupos" do craft.
   `flex-wrap` e nao `flex:1 1 auto` como no tema antigo: dois botoes
   esticados ate a mesma largura sao dois blocos de conteudo desigual com a
   mesma medida — o tell de simetria vazia. Aqui cada um tem a largura do
   proprio rotulo e quebram a linha quando nao couberem. */
.uc-prova__documentos{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
  margin:0;
  padding-block-start:var(--sp-5);
  min-width:0;
  border-block-start:var(--uc-borda) solid var(--uc-rule);
}


/* --------------------------------------------------------------------------
   A IDENTIDADE — coluna 2
   --------------------------------------------------------------------------
   24px entre o rotulo e a ficha, e entre a ficha e cada grupo de chips: sao
   grupos diferentes, e 24px e' o piso da faixa "entre grupos". */
.uc-prova__identidade{
  display:grid;
  gap:var(--sp-5);
  min-width:0;
}

/* A FICHA. `<dl>` de verdade (secao 3), com 8px entre linhas — elas sao a
   MESMA lista, e entre dois itens de uma lista nao ha fronteira: nao ha fio.
   O tema antigo desenha `border-top` em cada linha, o que da CINCO fios numa
   caixa de cinco linhas; e' gastar o recurso ate ele parar de significar,
   que e' a licao que a tarefa E aprendeu ao tirar o segundo fio do cartao. */
.uc-prova__ficha{
  display:grid;
  gap:var(--sp-2);
  margin:0;
  min-width:0;
}

/* O par. Coluna 1 se dimensiona pelo maior `<dt>` (`auto`) em vez do
   `flex:0 0 5.5rem` escrito a mao no tema antigo — um numero a menos, e a
   coluna acompanha a traducao se o rotulo mudar.
   `align-items:baseline` alinha a linha de base do rotulo com a do valor,
   que e' o que faz a tabela ler como tabela e nao como duas colunas soltas. */
.uc-prova__ficha > div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-3);
  align-items:baseline;
  min-width:0;
}

/* A LINHA QUE CARREGA CHIPS EMPILHA, e o motivo e' de largura medida: na
   coluna de identidade (361px no desktop, ~350px no celular) a trilha do
   `<dt>` come ~70px, e um chip como "Conhecimentos Especificos" mede 160px —
   sobrariam 280px, um chip por linha. Empilhada, a linha inteira e' dos
   chips e eles se organizam sozinhos. O efeito colateral e' bom: a
   composicao passa a ter a MESMA forma que na tela de simulado (rotulo em
   cima, chips embaixo), sem que nenhum dos dois arquivos copie o outro.
   O conteudo de `:has()` sai antes de a Regra 16 procurar o compound da
   direita, que aqui e' `div` — alvo sem prefixo, nao julgado. */
.uc-prova__ficha > div:has(.uc-chips){
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-2);
}

/* O `<dt>` NAO ganha estilo aqui: ele carrega `class="uc-rotulo"`, que ja e'
   exatamente isto — mono, caixa alta, `--uc-ink-3`, entreletra de caixa alta
   (tarefa D). O tema antigo escrevia as cinco declaracoes a mao em
   `bancada.css:1324`. So' o `min-width:0` fica, porque item de grade herda
   `min-width:auto` e um valor longo empurraria a coluna. */
.uc-prova__ficha dt{
  min-width:0;
}

/* `overflow-wrap:anywhere`: o valor de "Cargo" e' texto de banca e chega a
   168 caracteres com hifen e barra. Mesmo conserto do chip, do botao e do
   montador. */
.uc-prova__ficha dd{
  margin:0;
  min-width:0;
  color:var(--uc-ink);
  font-size:var(--uc-s--1);
  line-height:var(--uc-lh-normal);
  overflow-wrap:anywhere;
}


/* --------------------------------------------------------------------------
   CELULAR
   --------------------------------------------------------------------------
   Uma coluna, e a decisao vem primeiro — que ja e' a ordem do DOM. Nenhuma
   linha de `order` nesta peca. */
@media (max-width:900px){
  .uc-prova{
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-5);
  }
}