/* Magistra — a superfície de estudo. DESIGN.md é lei aqui mais que em qualquer
   outro lugar: é para esta tela que a direção SINETE foi desenhada.

   Lei 1  cerimônia nas pontas (--e7/--e8 SÓ na abertura e no fechamento),
          velocidade no miolo (--e3/--e4, nunca mais que isso)
   Lei 2  toda a ousadia no sinete, e em mais lugar nenhum
   Lei 3  o rigor mora nos dados; a voz pode ser gentil */

body{background:var(--folha);color:var(--tinta);font:var(--t-corpo);
  min-height:100dvh;overflow-x:hidden}
/* R.20 (R18-FOCO-SOB-BARRA): o foco por Tab ignorava a barra fixa (2.4.11). A reserva do `#conteudo` (R.8a) vale para o foco; em cima E embaixo, porque o `scrollIntoView` "center" da Trilha centra nessa área (só embaixo, o 40º nó subia 38 px). */
html{scroll-padding-block:calc(76px + env(safe-area-inset-bottom))}
.tela{max-width:480px;margin:0 auto;padding:var(--e4)}
[hidden]{display:none !important}

/* ──────────────────────────────────────────── faixa de sandbox (C1) */
/* Cores: --tinta-2 sobre --folha-2, os dois do §12 (R.15: o texto era --ouro-velho, 4,43:1; agora 5,94:1, >= 4,5 de texto de 12 px).
   Com isso a faixa deixou de falar na voz do ouro da etiqueta "não revisada" (as duas diziam coisas diferentes, o conjunto e a questão,
   na mesma voz): intenção de desenho da C1 perdida pelo contraste, a confirmar pelo Rodrigo.

   NÃO é sticky, e isso é escolha declarada: `#topo` já gruda em top:0, e dois
   grudados no mesmo zero se cobrem. Empilhá-los exigiria a altura da faixa
   virar número, e número que depende de quebra de linha mente em tela
   estreita. Ela é a primeira coisa da página e não pode ser fechada; rolar
   não a apaga do produto.

   Custo declarado: com a faixa em pé, `#tela-login` passa dos 100dvh pela
   altura dela e a tela de login ganha um dedo de rolagem. Vale, e some
   sozinho no dia em que o modo desligar.
   (2.5: na ENTRADA a faixa não ocupa espaço; o custo acima vale só fora dela.) */
/* Utilitário: existe para leitor de tela, invisível pra todo o resto — o
   padrão do W3C (nunca `display:none`/`visibility:hidden`, que também some
   do leitor de tela). Story 5.3, achado da review (item 5): a região
   `aria-live` que anuncia a carta nova precisa disto. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* R.22 (R9-FAIXA-SOB-BARRA): no app nativo (`viewport-fit=cover`) a faixa, a primeira coisa do body, ficava sob a barra de status. Com a faixa à vista (e fora da entrada) o `body` reserva a área segura de cima (ver `body:has(#faixa…)` adiante) e a CAIXA da faixa
   nasce abaixo da barra (o `R15-FAIXA` amostra a caixa inteira). A altura visível não muda. Redação antiga (dev da R.22): `margin-top:env(safe-area-inset-top)` na `#faixa`; a margem colapsava através do `body` e as páginas curtas ganhavam 51 px de rolagem vazia
   (review, R1, 2026-10-09). Redação de HEAD: nenhum inset. O `#topo` perde o dele enquanto a faixa está à vista: o dono do inset é UM em cada estado. */
/* R.15 (R9-FAIXA-CONTRASTE): o texto era --ouro-velho, 4,43:1 sobre --folha-2 (o DESIGN §2.3.1 só licencia 4,4:1 a gráfico e texto grande, e a faixa é texto de 12 px); passa a --tinta-2, 6,0:1. Só a cor do texto. */
#faixa{
  font:var(--t-rotulo);letter-spacing:.04em;text-align:center;
  padding:var(--e2) var(--e4);
  color:var(--tinta-2);background:var(--folha-2);
  border-bottom:1px solid var(--filete);
}

/* Elo de texto. SEM USO desde a 2.5 (o "Criar com convite" saiu), mas a regra
   fica: a lista de exceções de `testes_erro_carta.mjs` (COR①b) ainda a cita, e
   essa suíte não é desta story. Sai junto com a 2.8, que já mexe nas suítes. */
.elo{background:none;border:0;padding:0;font:inherit;
  color:var(--toga);text-decoration:underline;cursor:pointer}

/* ─────────────────────────────────────────────────────────── entrada (2.5)
   O mock `entrada.html` (#d1, #d4, #desktop) é o contrato. Dois tempos: a marca
   no alto, a porta na zona do polegar, e VAZIO entre elas. Sem faixa de teste e
   sem convite: a entrada não oferece o que o produto não abre. A rolagem que a
   faixa causava (o "dedo" declarado na C1) deixa de existir, porque a faixa não
   ocupa espaço aqui (ver o fim deste bloco). */
#tela-login{display:flex;flex-direction:column;min-height:100dvh;padding:0;
  max-width:420px}
#tela-login .ponta{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--e3);padding:var(--e6) var(--e5) 0;text-align:center}
#tela-login .sinete.grande{width:84px;height:84px}
#tela-login h1{color:var(--toga)}
#tela-login .ponta .apoio{letter-spacing:.01em}
#tela-login .respiro{flex:1.1}
/* 2.15 (mock privacidade.html#p3, P6): o fundo da porta cai de --e7 para --e5, e o link da política (44px + 4px)
   ocupa o resto: o botão fica ~72px do fundo, contra os ~54px de antes (+18px, aceito: P6). O `gap:0` do mock vale
   só para a prancha SEM erro: aqui o `gap` fica em --e4 (o vão entre a linha de erro, ou o aviso de sem rede, e o
   botão NÃO muda), e é o link quem se aproxima do botão com a margem de cima (-12px = --e1 - --e4: 4px do botão). */
#tela-login .porta{padding:0 var(--e5) var(--e5);display:flex;flex-direction:column;gap:var(--e4)}
#tela-login .link-politica{align-self:center;min-height:44px;display:flex;align-items:center;
  padding:0 var(--e3);margin-top:calc(var(--e1) - var(--e4));
  font:var(--t-apoio);color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px}
/* O slot reserva 52px (a altura do botão do mock), mas o botão do GIS tem 40 e fica no meio: 6px mortos em cada lado.
   Com o slot na tela, o link sobe esses 6px (--e3 / 2) para ficar a 4px do BOTÃO VISÍVEL, e não do slot. O botão do
   mock (`#google-botao`, o do Android e o do sem rede) tem os 52px inteiros e não precisa. */
#tela-login #google-slot:not([hidden]) ~ .link-politica{margin-top:calc(var(--e1) - var(--e4) - var(--e3) / 2)}
/* O slot do botão do GIS. Só posição e margem (AD-17): o Google pinta o botão
   dentro dele, e nada nosso o toca. A altura reservada é a do mock, para o botão
   não empurrar o layout quando o script chegar. */
#google-slot{min-height:52px;display:flex;align-items:center;justify-content:center}
/* A linha da volta do Google (o slot .erro do mock) e o aviso de sem rede. */
#tela-login .erro{font:var(--t-apoio);color:var(--borgonha);text-align:center}
/* 2.16 (#x3, P6): a linha "Conta apagada." (e a neutra do R6) NÃO é erro: `tinta`, com o começo
   em 600. Só ela leva `<b>` no slot; as linhas de erro (`mostrarVolta`) são texto puro, e o
   `textContent` delas apaga o `<b>`, então o vinho volta sozinho. */
#tela-login .erro:has(> b){color:var(--tinta)}
#tela-login .erro b{font-weight:600}
#tela-login .aviso-rede{font:var(--t-apoio);color:var(--borgonha);text-align:center;
  border-top:1px solid var(--filete);padding-top:var(--e4);margin-bottom:var(--e1)}
#tela-login .aviso-rede b{color:var(--tinta);font-weight:600}
/* O botão do mock: é o que o Android mostra e o que a web mostra sem rede.
   `#131314` e `#E3E3E3` são do asset do Google (tema Dark) e `#fff` é o disco do
   "G": não são nossos, não são tokens, e não se recolorem nem se redimensionam. */
.g-btn{display:flex;align-items:center;justify-content:center;gap:var(--e3);
  width:100%;min-height:52px;border:none;border-radius:999px;cursor:pointer;
  background:#131314;color:#E3E3E3;font:500 16px/1 "Roboto",var(--f-corpo);
  padding:0 var(--e5)}
.g-btn[disabled]{opacity:.45;cursor:default}
.g-disco{width:24px;height:24px;border-radius:var(--r-selo);background:#fff;
  display:grid;place-items:center;flex:0 0 auto}
.g-disco svg{width:17px;height:17px;display:block}
/* #d5 (2.7): a conta Google do Perfil. O disco de 20px é o MESMO `.g-disco` da
   entrada (o `#fff` é o do asset do Google, não é nosso), só menor, com o filete
   do mock; o "G" fica em 17px. O e-mail ocupa UMA linha e corta com reticências
   (o texto inteiro está em `title`/`aria-label`). O `overflow:hidden` já zera o
   mínimo do item flex, então não há `min-width:0`. */
.quem{display:flex;align-items:center;gap:var(--e3);background:var(--folha-2);
  border-radius:var(--r-superficie);padding:var(--e3) var(--e4);margin:0 0 var(--e4)}
.quem .g-disco{width:20px;height:20px;box-shadow:0 0 0 1px var(--filete)}
.quem>span:not(.g-disco){font:var(--t-apoio);color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quem b{font-weight:700}
/* 10.2 (#l10-2): o `<b>` do bloco sem disco é `--tinta` (o mock); o do #d5 (e-mail) segue `--tinta-2`, como na 2.7. */
.quem.sem-disco b{color:var(--tinta)}
/* 10.2 (#l10-2): sem o disco, a frase pode quebrar (o usuário legado é livre e
   pode ser longo); a elipse é só do e-mail. `overflow-wrap` segura o que não tem espaço. */
.quem.sem-disco>span{white-space:normal;overflow-wrap:anywhere}
/* #d4: a casa diz que está fechada, sem inventar ícone: o selo perde a cor. */
#tela-login.sem-rede .sinete{background:var(--filete)}
#tela-login.sem-rede .sinete>svg{opacity:0}
#tela-login.sem-rede h1{color:var(--tinta-2)}
/* A faixa de pré-lançamento não aparece na entrada (o Rodrigo, 2026-09-30: "pode
   tirar isso"), nem quando o `meta.json` falha: é uma regra de CSS, e não o JS,
   que não pode depender de ter rodado antes da primeira pintura. Fora da entrada
   a faixa continua como a C1 a desenhou. */
body:has(#tela-login:not([hidden])) #faixa{display:none}
/* #desktop: a MESMA coluna, centrada por margem (nunca `transform`: AD-17), com
   um fio de cada lado. O fundo de fios diagonais é decoração do mock. */
@media (min-width:480px){
  #tela-login{border-left:1px solid var(--filete);border-right:1px solid var(--filete)}
  body:has(#tela-login:not([hidden])){background:repeating-linear-gradient(135deg,
    transparent 0 22px,rgba(122,92,40,.045) 22px 23px),var(--folha)}
}
/* O `#form-login` (a reserva da senha, até a 2.8) saiu com a senha; as regras dele, junto. */
/* SEGUNDA VEZ que esta regra teve de crescer: nasceu presa a `#tela-login`,
   virou `#form-login, #form-cadastro` no C4 (o cadastro saiu na 2.5), e a troca de senha do C5 apareceu
   crua de novo -- campo branco de 143x20 num app cujo campo tem 448x49.
   Prender a aparencia a IDS de tela e prometer refaze-la em toda tela nova.
   Agora a regra e do que a coisa E, nao de onde ela mora: `.campo` e `.acao`.
   O que continua por id e o que de fato so vale ali (o botao colado no rodape
   das telas de tela cheia). */
.campo{
  width:100%;background:var(--folha-2);border:none;border-radius:var(--r-controle);
  padding:var(--e3);min-height:48px;font:var(--t-corpo);color:var(--tinta);
  margin-bottom:var(--e4);
}
.acao{
  width:100%;min-height:48px;background:var(--toga);color:var(--folha);
  border:none;border-radius:var(--r-controle);font:var(--t-corpo-f);cursor:pointer;
}
.acao[disabled]{background:var(--folha-2);color:var(--tinta-2)}
/* So nas telas de tela cheia: cola no rodape. Numa secao do Perfil isso
   empurraria o botao para fora da secao. */
#entrar, #criar{margin-top:auto}
.erros{list-style:none;margin-bottom:var(--e3)}
.erros li{font:var(--t-apoio);color:var(--tinta);
  border-left:3px solid var(--toga);padding:var(--e1) 0 var(--e1) var(--e3)}

.nota{margin-top:var(--e3);text-align:center;color:var(--tinta-2)}

/* ─────────────────────────────────────────────────── chrome do app */
#topo{
  position:sticky;top:0;z-index:5;background:var(--folha);
  padding:calc(var(--e3) + env(safe-area-inset-top)) var(--e4) var(--e3);
  display:flex;align-items:center;gap:var(--e3);
  border-bottom:1px solid var(--filete);max-width:480px;margin:0 auto;
}
/* R.22: com a faixa à vista o `body` carrega o inset (não o `#topo`: seriam ~50 px de buraco; e não fora da entrada, onde a faixa é `display:none` e a porta ganharia rolagem). Rolado, o `#topo` gruda em `top:inset` e a faixa de cor sob a barra (`::before`, na cor da faixa) fecha o vão; sem faixa nada disto vale. */
body:has(#faixa:not([hidden])):not(:has(#tela-login:not([hidden]))){padding-top:env(safe-area-inset-top)}
body:has(#faixa:not([hidden])) #topo{padding-top:var(--e3);top:env(safe-area-inset-top)}
body:has(#faixa:not([hidden])) #topo::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--folha-2)}
#topo-streak{margin-left:auto;font:var(--t-apoio);color:var(--tinta-2);
  display:flex;align-items:center;gap:var(--e1)}
/* R.8a (a barra passa de 57 a 60 px): a reserva do conteúdo acompanha (barra + 16 px de folga). A redação antiga: `padding:var(--e4) var(--e4) calc(72px + env(safe-area-inset-bottom))`
   (57 de barra + 15 de folga). */
#conteudo{max-width:480px;margin:0 auto;
  padding:var(--e4) var(--e4) calc(76px + env(safe-area-inset-bottom))}

/* §9 — bottom bar de 4. Glifos autorais: nenhuma biblioteca de ícones. */
/* R.8a (P11, mocks/revamp-3d.html `.barra`): ~60 px (6 de cima + o botão de 52 + 2 de baixo; o mock é 8 + 52 sem a área segura), o lugar ativo é uma PEÇA levantada (a luz clara, o flanco de 4 px,
   sobe 2 px) e afunda sob o dedo. O filete de cima virou a sombra do mock (a barra não tem mais `border-top`). A redação antiga, preservada (regra 1.7):
     #barra{...border-top:1px solid var(--filete);display:flex;max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
     #barra button{flex:1;min-height:56px;...}   #barra button[aria-current="page"]{color:var(--toga)}
   O padding lateral de 6 px garante o botão de ≥ 76 px a 320 (o `min-width` do mock). */
#barra{
  position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--folha);
  box-shadow:0 -1px 0 var(--filete),0 -10px 24px -14px rgba(var(--sombra),.3);
  display:flex;max-width:480px;margin:0 auto;
  padding:6px 6px calc(2px + env(safe-area-inset-bottom));
}
#barra button{
  flex:1;min-height:52px;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--tinta-2);font:var(--t-rotulo);
  text-transform:uppercase;letter-spacing:.06em;
  border-radius:var(--r-peca);transition:transform var(--t-solta),box-shadow var(--t-solta);
}
#barra button[aria-current="page"]{color:var(--toga);background:var(--luz-clara);box-shadow:var(--peca-clara-1);transform:translateY(-2px)}
#barra button[aria-current="page"]:active{transform:translateY(2px);box-shadow:var(--peca-clara-1-afunda)}
/* R.8a (review R2): os três lugares planos também afundam ao toque (o mock, `.barra a:active`, vale para todos). */
#barra button:active{transform:translateY(2px);box-shadow:var(--peca-clara-1-afunda)}
#barra svg{stroke:currentColor;fill:none;stroke-width:1.5}

/* ───────────────────────────────────────────────────────── sinete */
/* §6.2 — os quatro estados. Único círculo do sistema (§5.1).
   O relevo mora no ::after porque `--relevo` é sombra INSET e inset pintada
   atrás do <svg> filho não aparece. Por cima, ela é o que o disco tem de
   prensado — e é o que assenta no segundo estágio do fechamento. */
.sinete{position:relative;display:inline-block;line-height:0;
  border-radius:var(--r-selo);width:22px;height:22px}
.sinete>svg{display:block;width:100%;height:100%}
.sinete::after{content:"";position:absolute;inset:0;border-radius:var(--r-selo);
  box-shadow:var(--relevo);pointer-events:none}
.selos{display:flex;gap:var(--e2);align-items:center;margin:var(--e3) 0}
.selo{width:22px;height:22px;border-radius:50%;flex:none}
.selo.prensado{background:var(--toga);box-shadow:var(--relevo)}
.selo.aberto{border:1.5px solid var(--filete)}
.selo.perdido{border:1px dashed var(--filete)}   /* buraco VISÍVEL: não se esconde */

/* ────────────────────────────────────────── cartões e vazio (§8.2) */
.cartao{background:var(--folha-2);border-radius:var(--r-superficie);
  padding:var(--e4);margin-bottom:var(--e3)}
.cartao.tap{width:100%;text-align:left;border:none;cursor:pointer;
  color:inherit;font:inherit;transition:background var(--t-toque)}
.cartao.tap:hover{background:#DBCFCD}
.cartao .codigo{font:var(--t-rotulo);color:var(--ouro-velho);display:block;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--e1)}
.cartao b{font:var(--t-corpo-f);display:block}
.cartao .apoio{margin-top:var(--e1)}
.vazio{text-align:center;padding:var(--e6) var(--e4)}
.vazio .sinete{margin-bottom:var(--e4)}
.vazio p{margin-bottom:var(--e3)}
.vazio .forte{font:var(--t-corpo-f)}
/* #l10-6: o que já existe, depois do vazio */
.rotulo.secao-vazio{color:var(--tinta-2);display:block;margin-top:var(--e2)}
.secao-vazio + .cartao{margin:var(--e2) 0 0;display:block}
.secao-vazio + .cartao .apoio{display:block}
.linha-honesta{font:var(--t-apoio);color:var(--tinta-2);
  border-top:1px solid var(--filete);padding-top:var(--e3);margin-top:var(--e4)}

/* ── TRILHA como caminho (story 5.6, mock #r5) ───────────────────────────
   O mock recorta o quadro (`.caminho{overflow:hidden}`) porque desenha 5 nós
   num viewport; aqui são 63, e recortar esconderia quase todos — o caminho
   cresce e a página rola. As posições vêm por índice a partir do CENTRO
   nunca de coordenadas de um quadro de 360px. A geometria mora TODA aqui
   (o app.js não escreve estilo inline): `--zig` é a amplitude do zigue-zague
   (P6: o Massimo "quer menos zigue-zague" e não deu número; o mock oscila ±65,
   aqui ±40) e `--passo` a altura de cada passo. Os demais são DERIVADOS e
   escritos em px de propósito (hypot()/atan2() do CSS faltam em WebView
   velha): fio = hypot(2·zig, passo), fio2 = hypot(zig, passo/2), e o ângulo
   é o mesmo nos dois, atan(passo / 2·zig). `testes_trilha_caminho.mjs`
   confere a conta, para a derivação não envelhecer em silêncio. Cor só por
   token. */
.cab{margin-bottom:var(--e4)}
.cab .rotulo{color:var(--ouro-velho);margin-top:var(--e1)}
.caminho{position:relative;--zig:40px;--passo:64px;
  --fio:102.5px;--fio2:51.22px;--ang:38.66deg;--ang2:38.66deg}
.passo{position:relative;height:var(--passo)}
/* R.6: o alvo cresce com o losango (a diagonal de 46 px mede 65 px): era `height:44px;margin-top:-22px` (o losango de 26 px, 10.8). O centro fica no mesmo lugar. */
.passo .no{position:absolute;top:calc(100% / 2);height:65px;margin-top:-32.5px;z-index:1;
  display:flex;align-items:center;gap:var(--e3);
  /* 10.8 (#l10-4): o losango É botão. O reset deixa a trilha parada igual à de antes (o botão do navegador
     traria fundo, borda, fonte e cor próprios); o raio é só da forma do foco. */
  border:none;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;
  border-radius:var(--r-controle)}
.passo.e .no{left:calc(100% / 2 - var(--zig) - 22px)}
.passo.d .no{right:calc(100% / 2 - var(--zig) - 22px);flex-direction:row-reverse}
.losango{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center}
/* R.6 (mock #p-trilha): o losango é de 46 px, 11 px de raio, com ESPESSURA (flanco diagonal) por token. Era 26 px, `--r-marca`, contorno `filete` sobre `folha`.
   A caixa de 44 px do `.losango` fica (a geometria do 5.6): o `i` de 46 px a ultrapassa 1 px de cada lado, centrado (o flex centra o que estoura). */
.losango i{position:relative;flex:none;width:46px;height:46px;transform:rotate(45deg);border-radius:11px;
  box-shadow:var(--losango-livre);background:var(--luz-losango-claro);transition:transform var(--t-solta)}
#conteudo .losango.selado i{background:var(--luz-losango);box-shadow:var(--losango-selado)}
/* a marca em ouro do selado (o visto): um pseudo-elemento do `i`, desfeito o giro, na regra do sinete de 22 px da R.4 (o traço é `--ouro`, nunca `ouro-velho`) */
#conteudo .losango.selado i::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border:solid var(--ouro);border-width:0 2.4px 2.4px 0;
  transform:rotate(-45deg) translateY(-2.2px) scaleY(.7) rotate(45deg)}
/* R.6 (D4): o losango SE TOCA e afunda sob o dedo (o `translate(3px,3px)` do mock, na moldura girada: 3·√2 = 4,24 px para baixo na tela). Era o hover e o ativo da
   10.8: o selado a `borgonha` e o a selar a `#DBCFCD`. O rótulo vai a `toga` SÓ no pressionado (10.8). */
#conteudo .no:active .losango i{transform:rotate(45deg) translate(3px,3px)}
#conteudo .no:active small{color:var(--toga)}
.no small{font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-2);white-space:nowrap}
/* o fio até o próximo nó: 1.5px --filete, sólido até o cartão atual */
.passo::after{content:"";position:absolute;top:calc(100% / 2);height:1.5px;width:var(--fio);
  background:var(--filete);transform-origin:0 0}
.passo.e::after{left:calc(100% / 2 - var(--zig));transform:rotate(var(--ang))}
.passo.d::after{left:calc(100% / 2 + var(--zig));transform:rotate(calc(180deg - var(--ang)))}
.passo.antes::after{width:var(--fio2)}
.passo.antes.e::after{transform:rotate(var(--ang2))}
.passo.antes.d::after{transform:rotate(calc(180deg - var(--ang2)))}
.passo.ultimo::after{display:none}
/* depois do atual o fio é tracejado (3px de traço, 5px de vão) */
.passo.futuro::after{background:repeating-linear-gradient(90deg,var(--filete) 0 3px,transparent 3px 8px)}
/* o nó atual NÃO é `.losango`: é um cartão, com o único botão da trilha (R.6: o losango dele é um pseudo-elemento decorativo, ver o bloco da R.6). R.6 (mock
   #p-trilha): o cartão é marfim, com a sombra AMBIENTE e SEM flanco ("não se toca"), raio de 22 px. Era `--folha-2` e `--r-carta`. */
.atual{position:relative;background:var(--marfim);border-radius:var(--r-carta-relevo);padding:calc(var(--e4) + 2px) calc(var(--e4) + 2px) calc(var(--e4) + 4px);box-shadow:var(--cartao)}   /* o enchimento do mock: 18 18 20 (sem o literal de 18 px, que a V6 da 2.16 proíbe) */
.atual .rotulo{color:var(--ouro-velho)}
.atual .d3{margin:var(--e1) 0 var(--e1)}
.atual .apoio{margin-top:var(--e1)}
.atual .acao{margin-top:var(--e3)}
.atual.prox-e::after,.atual.prox-d::after{content:"";position:absolute;left:calc(100% / 2);top:100%;
  height:1.5px;width:var(--fio2);transform-origin:0 0;
  background:repeating-linear-gradient(90deg,var(--filete) 0 3px,transparent 3px 8px)}
.atual.prox-d::after{transform:rotate(var(--ang2))}
.atual.prox-e::after{transform:rotate(calc(180deg - var(--ang2)))}
.atual.volta::after{background:var(--filete)}   /* #l10-5: depois do cartão vêm selados, o fio é sólido */
/* a vaga do mascote (mock #r5, DESIGN §5.1): só o contorno. O raio é 14px
   LITERAL, não token, até o mascote existir. Sem posição ainda (H1). */
.vaga{width:84px;height:96px;border:1.5px dashed var(--ouro-velho);border-radius:14px}

/* ─────────────────────────────────────────────────── lição (miolo) */
#licao{position:fixed;inset:0;background:var(--folha);z-index:20;
  display:flex;flex-direction:column;animation:sobe var(--t-tela)}
@keyframes sobe{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* topo de 52px (mock #r1) — a altura do CONTEÚDO fica fixa em 52px mesmo com
   a ilha de segurança: o padding-top do safe-area soma por FORA (achado da
   review, Opus 2026-09-29), então `height` cresce pelo mesmo tanto do
   safe-area, e o miolo (ícone/barra/contagem) nunca fica espremido. */
#licao-topo{
  display:flex;align-items:center;gap:var(--e3);
  height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--e4) 0;
  max-width:480px;width:100%;margin:0 auto;
}
/* 10.4 (FR-59, Q24, mock #l10-3): chegou ao fechamento, o topo da lição não existe mais (sem ✕, sem barra, sem
   contagem). `display:none`: sai do fluxo e do alcance do Tab/TalkBack, e o grupo do .chao centra na tela inteira. */
#licao.chegada #licao-topo{display:none}
#licao.chegada{padding-top:env(safe-area-inset-top)}   /* o topo levava a ilha de segurança: sem ele, o conteúdo segue fora da barra do sistema */
#licao-sair{background:none;border:none;color:var(--tinta-2);font-size:20px;
  min-width:44px;min-height:44px;cursor:pointer}
/* progresso segmentado (AC-4, DESIGN §2.3.1) — um <i> por questão da fila,
   construído em JS (abrirLicao), no lugar da barra contínua de largura %. */
#licao-barra{flex:1;display:flex;gap:4px}
#licao-barra i{flex:1;height:4px;border-radius:2px;background:var(--filete)}
#licao-barra i.feito{background:var(--toga)}
/* "contagem em rótulo" (mock #r1, achado da review) — t-rotulo, não t-apoio */
#licao-conta{font:var(--t-rotulo);letter-spacing:.06em;color:var(--tinta-2)}
/* R.26: UMA rolagem, a do miolo; a pilha saiu. `overscroll-behavior:contain` FICA: sem ele o arrasto no topo do miolo vira o
   "puxe para atualizar" do navegador e a lição recarrega. */
#licao-corpo{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#licao-corpo::-webkit-scrollbar{display:none}
#licao-acao{
  position:sticky;bottom:0;background:var(--folha);
  border-top:1px solid var(--filete);
  padding:var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  max-width:480px;width:100%;margin:0 auto;
}
#licao-primaria{
  width:100%;min-height:48px;background:var(--toga);color:var(--folha);
  border:none;border-radius:var(--r-controle);font:var(--t-corpo-f);cursor:pointer;
}
#licao-primaria[disabled]{background:var(--folha-2);color:var(--tinta-2);cursor:default}

/* abertura e fechamento: as PONTAS (--e8). O miolo nunca usa isto.
   Achado da review (Opus, 2026-09-29, ALTO): `.ponta-licao` é filho DIRETO
   de `#licao-corpo`, que perdeu `padding`/`max-width` quando a 5.2 moveu
   isso pra `.carta` (AC-2) — o que NÃO é carta regrediu (x=32→16 em 360px,
   sem teto de 480px). Restaurado AQUI, isolado — `#licao-corpo`/`.carta`
   continuam sem padding (é o que o scroll-snap da pilha exige). */
.ponta-licao{text-align:center;
  max-width:480px;width:100%;margin:0 auto;
  padding:var(--e8) calc(var(--e4) * 2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh}
.ponta-licao .codigo{font:var(--t-rotulo);color:var(--ouro-velho);
  text-transform:uppercase;letter-spacing:.08em}
.ponta-licao h2{font:var(--t-d2);font-variation-settings:var(--fv-display);
  letter-spacing:-.015em;margin:var(--e3) 0}
.ponta-licao .ja{margin-top:var(--e1)}   /* 10.8 (QL-4): a linha do nó já selado, logo abaixo do "5 questões" */
.ponta-licao .numero{font:var(--t-d1);font-variation-settings:var(--fv-display);
  letter-spacing:-.02em;margin-top:var(--e4)}
/* AC-3/AC-6 (story 5.2) — só a instância de fechamento() ganha esta classe
   extra (abertura() não muda: continua só `.ponta-licao`, sem `.chao`).
   min-height:100% faz a carta de fechamento ocupar a tela cheia dentro da
   pilha — sem isto, ela fica mais baixa que a carta anterior e a última
   pergunta "vaza" por baixo dela (achado medido no navegador). O conteúdo
   de dentro (§.ponta-licao acima) não muda uma linha. */
/* Achado da re-review (2026-09-29): antes da marca de 50% (o threshold do
   cartaObservador que tira a toga), a carta de fechamento mostrava
   `tinta-2` sobre o vinho — o MESMO contraste que a review original da 5.2
   já tinha reprovado (~1,9:1/~2,5:1), só que desta vez na transição, não
   num vazamento de sessão. `background:var(--folha)` PRÓPRIO da carta:
   como ela é filha direta de `#licao-corpo` (que não pinta fundo), o texto
   sempre senta sobre folha — a toga atrás deixa de importar, em QUALQUER
   instante da rolagem, não só depois da chegada. Medido: contraste
   calculado sobre folha (não sobre a toga) nos três breakpoints. */
.ponta-licao.chao{min-height:100%;background:var(--folha);color:var(--tinta)}

/* miolo: --e3/--e4 e mais nada. Se aparecer --e7 aqui, a Lei 1 caiu.
   17px explícito (mock #r1 `.papel .enunciado`) — não é --t-corpo (16px):
   achado da review, o mock vence a prosa. */
#enunciado-q{font:400 17px/1.5 var(--f-corpo);white-space:pre-wrap;max-width:68ch;
  margin:var(--e4) 0}
.alts{margin-top:auto;display:flex;flex-direction:column;gap:var(--e2)}
/* Achado da review (Opus, 2026-09-29): `.alt` não seguia o `<style>` de
   #r1 — mock vence a prosa (regra 6.1 da casa). Fundo folha-2, raio
   --r-controle, fonte --t-apoio (14px), altura mínima 48px — não mais a
   lista com separador `border-top` que existia antes da 5.2. */
.alt{
  display:flex;align-items:center;gap:var(--e3);width:100%;text-align:left;
  background:var(--folha-2);border:none;border-radius:var(--r-controle);
  padding:var(--e2) var(--e3);min-height:48px;
  cursor:pointer;font:var(--t-apoio);color:var(--tinta);
}
/* DESIGN §5.1 (emenda 2026-09-28) — a letra é um QUADRADO de 22px com
   --r-marca, contorno filete de 1.5px em repouso. Nunca círculo (o sinete),
   nunca losango (o nó da trilha). */
.alt b{width:22px;height:22px;flex:none;display:flex;align-items:center;
  justify-content:center;border-radius:var(--r-marca);
  box-shadow:inset 0 0 0 1.5px var(--filete);
  font:600 13px/1 var(--f-corpo);color:var(--tinta-2)}
.alt[aria-pressed="true"]{background:var(--toga);color:var(--folha)}
/* Achado da review (ALTO): `.alt b` tem `color:tinta-2` fixo — sobre o
   fundo `toga` de `[aria-pressed="true"]`, a letra escolhida ANTES de
   verificar quase sumia (tinta-2 sobre toga é ~2,7:1). A cor direta no
   filho sempre vence a herdada do pai — por isso a exceção aqui. */
.alt[aria-pressed="true"] b{color:var(--folha);box-shadow:inset 0 0 0 1.5px var(--folha)}
/* A alternativa certa/escolhida, redesenhada por cima do `<style>` de #r1
   (achado da review): fundo folha, contorno `inset` — toga na certa, tinta
   na escolhida errada. `:not(.certa)` em `.dela` é o que impede a MESMA
   ordem de regra de decidir por acidente qual pintura vence quando as duas
   classes coexistem (a aluna acerta = ao mesmo tempo `.certa` E `.dela`). */
.alt.certa{background:var(--folha);box-shadow:inset 0 0 0 1.5px var(--toga);font:var(--t-corpo-f)}
.alt.dela:not(.certa){background:var(--folha);box-shadow:inset 0 0 0 1.5px var(--tinta)}
/* story 5.4/AC-2 — substitui `.dela`/`.contra` para o caso de erro (mock:
   revamp-e-anuncio.html:152). `.dela`/`.contra` ficam acima, mortas: a 5.2
   ainda varre a REGRA de `.dela` por nome (testes_pilha_toga.mjs, AC-4⑦b). */
.alt.marcada-errada{background:var(--folha);box-shadow:inset 0 0 0 1.5px var(--tinta)}
/* story 5.4/AC-6 — nem escolhida, nem certa (mock: revamp-e-anuncio.html:153). */
.alt.apagada{opacity:.55}
/* §6.3 — a prensa. Único lugar com animação de verdade no app. */
@keyframes prensar{
  from{transform:scale(1.15) rotate(4deg);opacity:0}
  to{transform:scale(1) rotate(var(--giro,0deg));opacity:1}
}
.sinete.prensa{animation:prensar var(--t-prensa) both}
.sinete.grande{width:56px;height:56px}
/* FECHAMENTO — dois estágios, e é o que separa a ponta do miolo:
   ① o disco desce (--t-prensa)  ② o relevo assenta (--t-assento), só então
   ③ o número entra. No miolo é um estágio só. */
/* R.5 (2026-10-05, P6 do Relevo: o prêmio é o objeto mais alto do app): a largura e a altura passam de 88px para 96px (a redação antiga dizia 88px nas duas) */
.sinete.fechamento{width:96px;height:96px;animation:prensar var(--t-prensa) both}
@keyframes assentar{from{box-shadow:none}to{box-shadow:var(--relevo)}}
/* O atraso é uma longhand DEPOIS do shorthand (um shorthand posterior o zeraria). Dois tokens de tempo no mesmo
   shorthand (`var(--t-assento) var(--t-prensa)`) davam duas curvas: o navegador descartava a declaração inteira e o
   relevo nunca assentava (FR-61). 180ms = a duração de --t-prensa (o disco termina de descer); `both` segura o `from`. */
.sinete.fechamento::after{animation:assentar var(--t-assento) both;animation-delay:180ms}
/* estágio 3: o número entra DEPOIS, nunca junto */
.numero.depois{animation:entra var(--t-tela) 300ms both}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Story 5.5 (mock #r4) — o fechamento por dentro.
   ① O sinete (88px, a caixa; o disco pintado é ~73px) vem em CIMA. Ele é
   anexado por último pelo `cartaObservador` (reagirSinete → append), e sem
   `order` renderizava ABAIXO do texto (medido: topo do sinete 317px × topo
   do "Dia N." 201px). A ordem é CSS de propósito: reagirSinete segue sendo
   o único ponto que cria o sinete.
   ② "Depois, nunca junto" (§6.3): os blocos `.depois` do .chao só começam a
   entrar quando o sinete EXISTE no .chao, e esperam os 300ms da prensa
   (180) + do assento (120). Antes disso (a aluna ainda lendo o veredito da
   última questão) ficam em opacity:0 e sem animação, senão o relógio corre
   fora da tela e, na chegada, o texto já estaria de pé com a prensa caindo
   por cima. O estado final não depende da animação: sem o gate (sinete
   presente), `entra` termina em opacity:1, e com movimento reduzido a
   animação some e a opacidade natural (1) fica. */
.ponta-licao.chao .sinete.fechamento{order:-1}
.ponta-licao.chao .depois{animation:entra var(--t-tela) 300ms both}
.ponta-licao.chao:not(:has(.sinete.fechamento)) .depois{animation:none;opacity:0}
/* espaçamentos do mock (.fecho): só aqui dentro; .selos global (Perfil) fica */
.ponta-licao.chao .numero{margin-top:var(--e5)}
.ponta-licao.chao .d3{margin-top:var(--e2)}
.ponta-licao.chao .rotulo{color:var(--ouro-velho);margin-top:var(--e3)}
.ponta-licao.chao .restam{margin-top:var(--e2)}
.ponta-licao.chao .selos{margin:0;margin-top:var(--e6)}

/* o contradisco do erro: §6.2. Sem cor nova, e sem háptica (§7.2). */
.contra{width:22px;height:22px;border:1.5px solid var(--tinta);
  border-radius:50%;position:relative;flex:none;align-self:center;margin-left:auto}
.contra::after{content:"";position:absolute;inset:-1px;
  background:linear-gradient(45deg,transparent 46%,var(--tinta) 46%,
    var(--tinta) 54%,transparent 54%)}

/* O caminho para a revisão. Terciário de propósito: quem está estudando não
   pode tropeçar nele, e quem revisa acha sem procurar. */
.handoff{display:inline-block;margin-top:var(--e4);font:var(--t-apoio);
  color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;line-height:44px}

/* story 9.5 (mock seus-erros #e9-9) — a linha "da outra vez" cola no veredito (que já traz o
   --e1 de baixo) e só existe na passada, depois de verificar. */
.outra-vez{margin:0}
/* story 9.5 (#e9-8) — a linha das matérias da abertura da segunda passada. */
.ponta-licao .materias{margin-top:var(--e4);display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--e1) var(--e3);color:var(--tinta-2)}

/* ───────────────────────────────────────── "O que cai" em lâminas (story 5.7, #r6) */
/* O feed é o PRÓPRIO contêiner que rola (AD-22: scroll-snap do CSS), e por isso
   a página, nesta aba, não rola: o corpo vira uma coluna de 100dvh (faixa de
   sandbox, `#topo`, `#conteudo` que sobra) e a barra fica fixa por cima. Só vale
   enquanto existe um `.cai` no DOM (`:has`). Sem isso a faixa visível empurraria
   o feed para baixo da barra. `width:100%` porque `margin:0 auto` numa coluna
   flex encolhe o item. A reserva sob o feed é a altura REAL da barra (R.8a: 6px
   de cima + `min-height:52px` dos botões + 2px de baixo = 60px; a redação antiga:
   1px de borda + `min-height:56px` = 57px), e não os 76px do conteúdo
   comum: 16px a mais eram uma faixa morta entre o feed e a barra. A matéria da
   lâmina é o `.rotulo` do tokens.css (Karla 12px/600, como o mock #r6): a
   `.materia` global antiga (Fraunces 20px, usada só pelo mapa antigo) saiu. */
body:has(.cai){height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body:has(.cai) #app{flex:1;min-height:0;display:flex;flex-direction:column}
body:has(.cai) #topo,body:has(.cai) #conteudo{width:100%}
body:has(.cai) #conteudo{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:0 0 calc(60px + env(safe-area-inset-bottom))}
.cai{flex:1;min-height:0;display:flex;flex-direction:column}
.cai-conta{text-align:right;padding:var(--e2) var(--e5) 0}
.feed{flex:1;min-height:0;position:relative;overflow-y:auto;
  scroll-snap-type:y mandatory;overscroll-behavior:contain}
.lamina{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--e5)}
/* R.8a (D8, o mock `#p-cai`): o código do nó passa de `ouro-velho` a `toga`, com o relevo tipográfico (luz de 1 px embaixo, sombra de 1 px em cima a 18%: só o `--t-d0`, DESIGN §3.5).
   A redação antiga, preservada: `color:var(--ouro-velho)` (sem `text-shadow`). */
.lamina .cod{font:var(--t-d0);font-variation-settings:var(--fv-display);
  color:var(--toga);letter-spacing:-.03em;text-shadow:0 1px 0 var(--brilho),0 -1px 0 rgba(var(--sombra),.18)}
.lamina .d1{margin-top:var(--e3);overflow-wrap:anywhere;hyphens:auto}
/* R.8a (o mock `#p-cai`: `<p class="rotulo" style="color:var(--ouro-velho)">`): a matéria passa de `tinta-2` a `ouro-velho` (5,77:1 sobre o marfim). A redação antiga, preservada:
   `.lamina .materia{margin-top:var(--e3);color:var(--tinta-2)}` */
.lamina .materia{margin-top:var(--e3);color:var(--ouro-velho)}
.ciclos{display:flex;gap:6px;margin-top:var(--e5);align-items:flex-end;height:40px}
/* As barras dizem SÓ "apareceu nesta prova": altura cheia, sem proporção (o
   dado não sabe quantas questões por prova). Ancoradas em `#conteudo`: são da
   aba, e a guarda de cor da carta (testes_erro_carta) só varre o que a alcança. */
#conteudo .ciclos i{width:26px;height:100%;background:var(--toga);
  border-radius:var(--r-marca) var(--r-marca) 0 0}
/* O ciclo ausente tem CHÃO (story 10.9, mock #l10-8, QL-7): um traço de 1.5px na base do
   slot, em --tinta-2, sem raio. Diz "zero questões nesta prova" (dado sabido). A variante A
   (tracejado) está descartada. Ancorado em `#conteudo` pela mesma razão das barras. */
#conteudo .ciclos i.ausente{height:1.5px;background:var(--tinta-2);border-radius:0}
.ciclos-leg{display:flex;gap:6px;margin-top:var(--e1)}
.ciclos-leg span{width:26px;font:600 9px/1 var(--f-corpo);color:var(--tinta-2);text-align:center}
.lamina .frase{margin-top:var(--e5);font:var(--t-corpo)}
.lamina .acao{margin-top:var(--e5);width:auto;align-self:flex-start;padding:0 var(--e5)}
/* A lâmina sem lição termina numa linha de apoio, no lugar do botão (story 10.9, mock #l10-7). */
.lamina .sem-licao{margin-top:var(--e5);font:var(--t-apoio);color:var(--tinta-2)}

/* ───────────────────────────────────────── perfil */
.regra{font:var(--t-apoio);color:var(--tinta-2);margin:var(--e2) 0 var(--e5)}
.numeros{margin:var(--e5) 0}
.numeros div{display:flex;justify-content:space-between;padding:var(--e3) 0;
  border-top:1px solid var(--filete)}
.numeros div:first-child{border-top:none}
.opcao{display:flex;justify-content:space-between;align-items:center;
  padding:var(--e3) 0;border-top:1px solid var(--filete);min-height:44px}
.opcao button{background:none;border:none;color:var(--toga);font:var(--t-corpo-f);
  cursor:pointer;min-height:44px}
/* ── APAGAR A CONTA (story 2.16) — o mock apagar-conta.html (#x1 a #x5), só tokens.
   O link (#x1): a forma do link da política (apoio, tinta-2, sublinhado, alvo de 44px), a
   --e6 do Sair, sem filete, à esquerda. NÃO é borgonha (DESIGN §2.4). `display:flex` com
   `width:fit-content` (e não o `inline-flex` do mock) para a margem de cima ser a medida exata
   entre o fim da linha do Sair e o link, sem a linha de texto da caixa em volta. */
.apagar-link{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:var(--e6);
  background:none;border:none;padding:0;cursor:pointer;text-align:left;
  font:var(--t-apoio);color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px}
/* A FOLHA DE BAIXO (#x2): a do economia.html#e3, sem mudar um valor. Presa embaixo, na largura da
   tela; se não couber (320×568 com a fila e o erro), rola POR DENTRO (`.rolo`), e a alça e os botões
   ficam à vista. Os botões ficam embaixo: o bloco de erro cresce para cima, e eles não saem do lugar.
   Ancorada nos ids estáticos (`#apagar-veu`, `#folha-apagar`): o `toga` daqui não alcança a carta
   (a guarda COR① de `testes_erro_carta.mjs` mede isso pelo id). */
#apagar-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-apagar.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;
  display:flex;flex-direction:column;background:var(--folha);
  border-radius:var(--r-folha-baixo) var(--r-folha-baixo) 0 0;
  padding:var(--e3) var(--e4) calc(var(--e5) + env(safe-area-inset-bottom))}
#folha-apagar.folha-baixo .alca{flex:none;width:36px;height:4px;border-radius:var(--r-marca);background:var(--filete);
  margin:0 auto var(--e4)}
#folha-apagar.folha-baixo .rolo{flex:0 1 auto;min-height:0;overflow-y:auto}
#folha-apagar.folha-baixo .rotulo{color:var(--ouro-velho)}
#folha-apagar.folha-baixo h2{margin-top:var(--e1)}
#folha-apagar.folha-baixo .corpo{margin-top:var(--e3)}
#folha-apagar.folha-baixo ul{margin:var(--e2) 0 0 var(--e5)}
#folha-apagar.folha-baixo li{margin-top:var(--e1)}
#folha-apagar.folha-baixo li::marker{color:var(--tinta-2)}
#folha-apagar.folha-baixo .nova{margin-top:var(--e3);font:var(--t-apoio);color:var(--tinta-2)}
/* M.5 (Q-M5-1): a placa CHAPADA do quadro (`.placa` do hub-relevo: trilho cavado, sem flanco, não se toca), só para quem assina agora. */
#folha-apagar.folha-baixo .placa{margin-top:14px;padding:14px 16px;border-radius:var(--r-peca);background:var(--folha-2);box-shadow:var(--rebaixo);font:var(--t-corpo);color:var(--tinta)}
#folha-apagar.folha-baixo .placa .rotulo{display:block;color:var(--tinta-2);margin-bottom:6px}
/* #x4/#x5: o erro de sistema do §2.4 (o #erro-app), dentro da folha, no lugar da `.nova`. */
#folha-apagar.folha-baixo .erro-app{margin:var(--e4) 0 0;background:var(--folha-2);border-radius:var(--r-superficie);
  border-left:3px solid var(--toga);padding:var(--e4)}
#folha-apagar.folha-baixo .erro-app .detalhe{font:var(--t-apoio);color:var(--tinta-2);display:block;margin-top:var(--e2)}
#folha-apagar.folha-baixo .acoes{flex:none;margin-top:var(--e5);display:flex;flex-direction:column;gap:var(--e2)}
#folha-apagar.folha-baixo .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  border:none;background:none;cursor:pointer;border-radius:var(--r-controle);font:var(--t-corpo-f);text-align:center}
#folha-apagar.folha-baixo .btn.primario{background:var(--toga);color:var(--folha)}
#folha-apagar.folha-baixo .btn.texto{color:var(--toga);min-height:44px}
/* D6: enviando, a opacidade do `.g-btn[disabled]`, com o mesmo nome. */
#folha-apagar.folha-baixo .btn[disabled]{opacity:.45;cursor:default}
#erro-app{margin:var(--e4) 0;background:var(--folha-2);
  border-radius:var(--r-superficie);border-left:3px solid var(--toga);
  padding:var(--e4)}
#erro-app .detalhe{font:var(--t-apoio);color:var(--tinta-2);display:block;
  margin-top:var(--e2)}
#erro-app button{margin-top:var(--e3);width:100%;min-height:44px;
  background:var(--toga);color:var(--folha);border:none;
  border-radius:var(--r-controle);font:var(--t-corpo-f);cursor:pointer}
.offline{background:var(--folha-2);border-bottom:2px solid var(--ouro-velho);
  padding:var(--e2) var(--e4);text-align:center;font:var(--t-apoio);
  color:var(--tinta-2)}

/* ── SEUS ERROS (story 9.4) — copiado do mock `seus-erros.html` (#e9-1…#e9-7, #e9-11,
   #e9-c), só tokens. O que pinta `toga` é ancorado em `#conteudo` (a guarda de cor da
   carta, testes_erro_carta COR①, só deixa passar toga fora da lição).
   O sinete "por prensar" (DESIGN §6.2/§6.4 item 5): o contorno `filete`, sem relevo. */
.sinete.aberto::after{box-shadow:none}
.sinete.aberto>svg{color:var(--filete)}
/* §8.1 — o carregando respira: opacidade .45 → 1 em 900ms (o número é do DESIGN §8.1).
   Com movimento reduzido, o @media do fim corta a animação e ele fica em opacidade 1. */
@keyframes respirar{from{opacity:.45}to{opacity:1}}
.sinete.respira{animation:respirar 900ms ease-in-out infinite alternate}
/* O VAZIO desta aba (#e9-2/3/4/6 e o carregando do #e9-c) é o do mock: CENTRADO na vertical
   entre o topo e a barra. Não é o `.vazio` da trilha (review da 9.4: aquele fica como está).
   O elemento leva as DUAS classes (`vazio erros-vazio`): estas regras vêm depois das do
   `.vazio`, com a mesma especificidade, e redefinem cada propriedade delas. Só enquanto ele está na tela, a página vira uma coluna que ocupa a altura, e o #conteudo
   cresce até a reserva da barra; as outras telas não mudam. */
body:has(#conteudo > .erros-vazio){display:flex;flex-direction:column}
body:has(#conteudo > .erros-vazio) #app{flex:1;display:flex;flex-direction:column}
body:has(#conteudo > .erros-vazio) #topo{width:100%}
#conteudo:has(> .erros-vazio){flex:1;display:flex;flex-direction:column;width:100%}
.erros-vazio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--e6) var(--e5)}
.erros-vazio p{margin:0}
.erros-vazio .sinete{margin-bottom:var(--e5)}
.erros-vazio .sinete:only-child{margin-bottom:0}   /* o carregando (#e9-c): só o sinete, no centro */
/* o prensado do vazio assenta torto, como o carimbo (§6.3), e PARADO: sem prensa */
.erros-vazio .sinete.grande:not(.aberto){transform:rotate(var(--giro,0deg))}
.erros-vazio .forte{font:var(--t-corpo-f)}
.erros-vazio .apoio{margin-top:var(--e2);max-width:300px}
#conteudo .btn{display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;border:none;background:none;border-radius:var(--r-controle);
  font:var(--t-corpo-f);cursor:pointer}
#conteudo .btn.primario{background:var(--toga);color:var(--folha)}
#conteudo .btn.texto{color:var(--toga);min-height:44px}
#conteudo .erros-vazio .btn{display:inline-flex;width:auto;margin-top:var(--e5);padding:0 var(--e5)}
.contagem-h{font:var(--t-d3);font-variation-settings:var(--fv-display);letter-spacing:-.01em}
.regra{margin-top:var(--e2)}
.secao{margin-top:var(--e6);color:var(--ouro-velho);display:flex;
  justify-content:space-between;align-items:baseline}
.secao .num{color:var(--tinta-2)}
/* `ol.erros` vence a `.erros li` do formulário de entrada (filete toga à esquerda): a
   linha da lista não tem filete lateral, e não é tocável (sem cursor, sem foco). */
ol.erros{list-style:none;margin:var(--e2) 0 0}
ol.erros li{display:grid;grid-template-columns:28px 1fr;column-gap:var(--e2);
  padding:var(--e3) 0;border-left:none;border-bottom:1px solid var(--filete);
  font:var(--t-corpo);color:var(--tinta)}
ol.erros li:first-child{border-top:1px solid var(--filete)}
ol.erros .ord{font:var(--t-rotulo);color:var(--tinta-2);padding-top:2px;
  font-variant-numeric:tabular-nums}
ol.erros .no{color:var(--ouro-velho)}
ol.erros .tit{font:var(--t-corpo-f);margin-top:2px;overflow-wrap:anywhere}
ol.erros .meta{font:var(--t-apoio);color:var(--tinta-2);margin-top:2px}
ol.erros .meta b{font-weight:600;color:var(--tinta)}
ol.erros+.linha-honesta{border-top:none;padding-top:0}
/* O botão fixo ACIMA da barra (o desenho de #licao-acao e do `.acao` do mock): ancorado
   no fundo da tela, logo acima dos 56px + 1px de filete do #barra, com a lista curta ou
   longa (#e9-11, #e9-7). O #conteudo reserva embaixo a altura dele (48 + 2×e3 + 1 de
   filete), para a última linha nunca ficar atrás (#e9-7: visível no 120º item). */
/* R.8a: a base acompanha a barra de 60 px (a redação antiga: `bottom:calc(56px + 1px + env(safe-area-inset-bottom))`). */
#conteudo .erros-acao{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));
  z-index:9;max-width:480px;margin:0 auto;padding:var(--e3) var(--e4);
  background:var(--folha);border-top:1px solid var(--filete)}
/* R.8a: a barra (60) + a peça fixa com o degradê (12 + 56 + 16 = 84) + a folga de 16 (a redação antiga: `calc(72px + 48px + 2 * var(--e3) + 1px + env(safe-area-inset-bottom))`). */
#conteudo:has(> .erros-acao){padding-bottom:calc(60px + 84px + var(--e4) + env(safe-area-inset-bottom))}

/* §7.1 — movimento reduzido: o ESTADO FINAL sobrevive. Todo keyframe daqui
   termina no repouso natural do elemento (opacidade 1, sem transform, relevo
   assentado), então cortar a animação entrega a mesma tela — sem a descida. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ═══ A Meri (R.2) · AD-41, DESIGN §2 e §7, FR-75/76 ═══
   Fonte: o mock revamp-3d (bloco "a Meri", `.meri`, `.meri-chao`, `.meri-entra`) e docs/meri/svg-animado/, cujo <style> repetido virou ESTE bloco,
   escopado em `.meri`, keyframes `m-*`. INERTE até a R.3 (nenhum elemento tem `.meri`). Os gestos rodam --meri-vezes (2) e PARAM; só o piscar
   é laço (P4); a brava balança 6 x .18s (a confirmar). Cor da Meri só nos atributos do SVG, nunca aqui. Tamanho e posição por tela: R.3.
   Pelo `testes_trilha.py` ⑭ (conta "50%", teto 4): sem `border-radius:50%` no chão (o radial-gradient já some na borda), `center` e `center
   bottom` no lugar de `50% 50%` e `50% 100%`, e a keyframe de meio como `50.0%`: o mesmo valor computado. ═══ */
.meri{display:block;overflow:visible}
.meri-chao{position:relative}
.meri-chao::before{content:"";position:absolute;left:22%;right:22%;bottom:2%;height:9%;background:radial-gradient(closest-side,rgba(var(--sombra),.28),transparent)}
.meri-entra{animation:meri-entra var(--t-meri) 760ms both}
@keyframes meri-entra{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
.meri .b,.meri .e,.meri .x1,.meri .x2,.meri .x3{transform-box:fill-box;transform-origin:center}
.meri .b{transform-origin:center bottom}
@keyframes m-bob{0%,100%{transform:translateY(0)}50.0%{transform:translateY(-4px)}}
@keyframes m-blink{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes m-jump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.06,.92)}45%{transform:translateY(-16px) scale(.96,1.05)}75%{transform:translateY(0) scale(1.04,.95)}}
@keyframes m-pop{0%,20%{opacity:0;transform:scale(.4)}45%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes m-tilt{0%,100%{transform:rotate(-3deg)}50.0%{transform:rotate(3deg)}}
@keyframes m-dot{0%,15%{opacity:0}35%,90%{opacity:1}100%{opacity:0}}
@keyframes m-breathe{0%,100%{transform:scale(1,1)}50.0%{transform:scale(1.02,1.035)}}
@keyframes m-zz{0%{opacity:0;transform:translate(0,6px)}30%{opacity:1}100%{opacity:0;transform:translate(6px,-12px)}}
@keyframes m-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2.5px)}75%{transform:translateX(2.5px)}}
@keyframes m-puff{0%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px) scale(1.2)}}
@keyframes m-droop{0%,100%{transform:translateY(0) scale(1,1)}50.0%{transform:translateY(0) scale(1,.97)}}
@keyframes m-tear{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
@keyframes m-gasp{0%,45%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-8px) scale(1.07)}28%{transform:translateY(0) scale(1)}}
@keyframes m-spin{0%{transform:rotate(0) scale(1)}50.0%{transform:rotate(180deg) scale(1.25)}100%{transform:rotate(360deg) scale(1)}}
.meri .e{animation:m-blink 3.6s infinite}  /* piscar: a única exceção de laço (P4, DESIGN §7) */
.meri.m-feliz .b{animation:m-bob 1.6s ease-in-out var(--meri-vezes)}
.meri.m-acertou .b{animation:m-jump 1.1s ease-in-out var(--meri-vezes)}
.meri.m-acertou .x1{animation:m-pop 1.1s ease-out var(--meri-vezes) both}
.meri.m-pensando .b{animation:m-tilt 3s ease-in-out var(--meri-vezes)}
.meri.m-pensando .x1{animation:m-dot 2.4s var(--meri-vezes) both}.meri.m-pensando .x2{animation:m-dot 2.4s .3s var(--meri-vezes) both}.meri.m-pensando .x3{animation:m-dot 2.4s .6s var(--meri-vezes) both}
.meri.m-descansando .b{animation:m-breathe 3.6s ease-in-out var(--meri-vezes)}
.meri.m-descansando .x1{animation:m-zz 2.4s ease-out var(--meri-vezes) both}.meri.m-descansando .x2{animation:m-zz 2.4s .8s ease-out var(--meri-vezes) both}
.meri.m-bravo .b{animation:m-shake .18s linear 6}
.meri.m-bravo .x1{animation:m-puff 1.2s ease-out var(--meri-vezes) both}.meri.m-bravo .x2{animation:m-puff 1.2s .6s ease-out var(--meri-vezes) both}
.meri.m-triste .b{animation:m-droop 3s ease-in-out var(--meri-vezes)}
.meri.m-triste .x1{animation:m-tear 2s ease-in var(--meri-vezes) both}
.meri.m-surpreso .b{animation:m-gasp 2.2s ease-out var(--meri-vezes)}
.meri.m-surpreso .x1{animation:m-pop 2.2s ease-out var(--meri-vezes) both}
.meri.m-orgulhoso .b{animation:m-tilt 2.4s ease-in-out var(--meri-vezes)}
.meri.m-orgulhoso .x1{animation:m-spin 2.4s ease-in-out var(--meri-vezes)}
/* movimento reduzido: parada no repouso, com os efeitos (estrela, "z", pontinhos, lágrima) À MOSTRA: sem animação ninguém os acende */
@media (prefers-reduced-motion: reduce){
  .meri .b,.meri .e,.meri .x1,.meri .x2,.meri .x3{animation:none !important}
}
@media (prefers-reduced-motion: reduce){
  .meri.m-acertou .x1,.meri.m-orgulhoso .x1,.meri.m-surpreso .x1,.meri.m-pensando .x1,.meri.m-pensando .x2,.meri.m-pensando .x3,.meri.m-descansando .x1,.meri.m-descansando .x2,.meri.m-triste .x1,.meri.m-bravo .x1,.meri.m-bravo .x2{opacity:1}
}
/* fim: A Meri (R.2) */

/* ═══ A Meri nas telas (R.3) · FR-75, FR-76, AD-21 ═══
   Tamanho, lugar e atraso das pranchas do revamp-3d. Só 6 pontos (app.js `meriLugar`). Sem cor e sem a conta de meio por cento (testes_trilha ⑭).
   O gesto só roda à vista (`.meri-espera`, tirada pelo app.js) e só sob `no-preference`: no reduzido nada segura nada. ═══ */
.meri-lugar{pointer-events:none}
.meri-lugar svg.meri{width:100%;height:100%}
.meri-lugar.mv-acerto{animation-delay:260ms}
.meri-lugar.mv-erro{animation-delay:200ms}
/* o fechamento: âncora com a largura do sinete e altura zero, logo depois dele; a Meri sai pelo canto inferior direito, só encostando */
/* R.5 (o sinete passa de 88 a 96 px): a âncora acompanha (88 -> 96) e a Meri sai a 8 px de dentro da borda direita dele (o mock: right:-8px; left 82 -> 88).
   (a redação antiga dizia 88px na âncora e 82px no `left`) */
.meri-fecha{order:-1;position:relative;width:96px;height:0}
.meri-fecha .meri-lugar{position:absolute;left:88px;bottom:-14px;width:98px;height:98px}
/* a Trilha: sentada no cartão do nó */
.atual .meri-lugar{position:absolute;right:6px;top:-62px;width:96px;height:96px}
/* Seus erros: ao lado da contagem, sem entrada */
.contagem-h:has(.meri-lugar){position:relative;padding-right:92px;min-height:84px}
.contagem-h .meri-lugar{position:absolute;right:0;top:0;bottom:0;margin:auto 0;width:84px;height:84px}
/* O que cai: na linha da frase, à direita */
.lamina .frase:has(.meri-lugar){position:relative;padding-right:84px}
.lamina .frase .meri-lugar{position:absolute;right:-8px;top:0;bottom:0;margin:auto 0;width:80px;height:80px}
@media (prefers-reduced-motion: no-preference){
  .meri-espera .meri .b,.meri-espera .meri .x1,.meri-espera .meri .x2,.meri-espera .meri .x3{animation:none}
  .meri-aguarda{animation-play-state:paused}
}
/* R.4 (AC-7(a), a nota R2 da review da R.3, MEDIDA: com a lição aberta logo depois de a Trilha pintar, o gesto inteiro da Meri da Trilha corria
   debaixo do painel `#licao`, 3,2 s de 3,2 s: o IntersectionObserver não sabe de oclusão). Enquanto o painel está aberto, a Meri da Trilha PARA
   onde está; na volta a Trilha repinta e uma Meri nova roda o gesto inteiro. Só a da Trilha: a da lição vive dentro do painel. */
body:has(#licao:not([hidden])) .mv-trilha,body:has(#licao:not([hidden])) .mv-trilha *{animation-play-state:paused}
/* fim: A Meri nas telas (R.3) */

/* ═══ A lição na pele Relevo (R.4) · AD-41, FR-77 · mocks/revamp-3d.html #p-pergunta, #p-acertou, #p-errou ═══
   O que SOBROU da R.4 depois da R.26 (a tela de questão inteiriça, logo abaixo): o trilho cavado, as alternativas respondidas e o foco fora da lição em curso.
   A carta (o papel), a sala toga do painel, o "Verificar" claro, o veredito dentro da carta, o sinete de 22 px na certa e a dica de deslizar saíram com a pilha.
   Todo seletor é ancorado em `#licao` (1,x,x): vence as regras antigas de `.alt` e as peças da R.1 sem `!important`. Só `var(--…)`; o flanco é do token. ═══ */
/* fora da lição em curso (a abertura, o fechamento) o foco é o da casa: o anel de 2 px */
#licao:not(.toga) :focus-visible{outline:2px solid var(--toga);outline-offset:2px}
/* o trilho cavado: 12 px, uma pílula por questão; a feita é luz de folha */
#licao.toga #licao-barra{height:12px;padding:3px;gap:5px;border-radius:999px;background:var(--toga-flanco);box-shadow:var(--rebaixo)}
#licao.toga #licao-barra i{height:auto;border-radius:999px;background:var(--folha-40)}
#licao.toga #licao-barra i.feito{background:linear-gradient(180deg,var(--brilho),var(--folha))}
/* R.11 (conserto da R.4/R.5): na chegada o painel perde a `.toga` e o "Continuar" voltava ao 48 da regra base (a barra encolhia 8 px e o botão descia). Só a ALTURA (o mock: 56);
   preso ao fechamento (`:has(.chao)`) para a abertura seguir em 48; `:enabled` para o seletor não terminar em `#licao-primaria{` (guarda ㉙ do testes_trilha) */
#licao:not(.toga):has(.chao) #licao-primaria:enabled{min-height:56px}
#licao #enunciado-q{font:400 16px/1.5 var(--f-corpo)}
#licao .alt:disabled{cursor:default}
/* as respondidas não afundam ao toque (D4): cada estado declara transform e box-shadow numa regra #licao (1,2,0), que vence o
   `.relevo .alt:active` da R.1 (0,3,0) sem um :active próprio (medido: o :active FORÇADO não as move; o mutante M5 da story provou o :active morto) */
#licao .alt.certa{background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2);transform:none}
#licao .alt.certa .letra{background:transparent;color:var(--ouro);box-shadow:inset 0 0 0 1.5px var(--ouro)}
#licao .alt.marcada-errada{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda),inset 0 0 0 1.5px var(--tinta);background:var(--folha)}
/* o contradisco da letra: o quadrado de 30 px com a diagonal (D5: o glifo NÃO volta, a 5.4) */
#licao .alt.marcada-errada .letra{position:relative;overflow:hidden;background:transparent;box-shadow:inset 0 0 0 1.5px var(--tinta)}
#licao .alt.marcada-errada .letra::after{content:"";position:absolute;inset:0;margin:auto;width:1.8px;height:45px;background:var(--tinta);transform:rotate(45deg)}
#licao .alt.apagada{opacity:.55;transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda)}
/* fim: A lição na pele Relevo (R.4) */

/* ═══ A tela de questão inteiriça e a faixa do veredito (R.26) · mocks/questao-v2.html, proposta A (Rodrigo, 2026-10-11: "A é melhor. No rodapé subindo fica mais legal.") ═══
   A lição em curso (`#licao.toga`): o topo de toga de lado a lado, o miolo de lado a lado com UMA rolagem, a doca com o ÚNICO botão (56 px) e, depois da resposta, a faixa que
   sobe do rodapé com o veredito (ícone + palavra, nunca só cor) e o botão no MESMO retângulo. A área segura de baixo é reservada UMA vez por peça que encosta na borda (R.19): a
   doca, e a faixa quando ela está de pé (a doca some). Acima de 480 px a coluna é a de sempre (o enchimento lateral cresce). Antes do marcador da R.1; todo seletor ancorado em
   `#licao`; só `var(--…)`. SEM movimento aqui (nenhuma regra de tempo): o véu, as fagulhas e a entrada são da irmã r-27. A meia medida é `100% / 2` (o teto do ⑭ do testes_trilha). ═══ */
#licao.toga #licao-topo{max-width:none;gap:var(--e2);padding:env(safe-area-inset-top) var(--e4) 0 var(--e1);background:var(--luz-sala);color:var(--folha);--foco:var(--ouro)}
/* o aro do ✕ por dentro (R.16) */
#licao.toga #licao-sair{width:48px;height:48px;line-height:1;color:inherit;outline-offset:-4px}
#licao.toga #licao-conta{margin-left:var(--e1);color:inherit;font-variant-numeric:tabular-nums}
/* com a lição em curso a JANELA não rola: a Trilha segue montada atrás do painel fixo, e o dedo no topo ou na faixa a arrastaria */
html:has(#licao.toga){overflow:hidden;overscroll-behavior-y:none}
#licao.toga :focus-visible{outline-width:2px;outline-offset:2px}
#licao .faixa:focus-visible{outline-offset:-4px}
#licao.toga #licao-corpo{padding:20px max(var(--e4),calc(100% / 2 - 224px)) 28px}
#licao.toga .no{display:block;color:var(--ouro-velho)}
#licao.toga #enunciado-q{max-width:none;margin:var(--e3) 0 20px}
#licao .alt>span{min-width:0;overflow-wrap:anywhere}
/* a escolhida do grupo de opções (`aria-checked`): afundada, com anel toga e a letra cheia, a mesma peça que a R.1 dá ao `aria-pressed` */
#licao .alt[aria-checked="true"]{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda),0 0 0 2.5px var(--toga)}
#licao .alt[aria-checked="true"] .letra{background:var(--toga);color:var(--marfim);box-shadow:none}
/* a doca: folha, filete, sombra para cima; o botão de 56 px: mudo sem escolha, toga com ela */
#licao.toga #licao-acao{max-width:none;padding:var(--e3) max(var(--e4),calc(100% / 2 - 224px)) calc(var(--e4) + 2px + env(safe-area-inset-bottom));box-shadow:0 -10px 18px -12px rgba(var(--sombra),.30)}
#licao.toga #licao-primaria:enabled,#licao .faixa .botao{position:relative;flex:none;width:100%;min-height:56px;padding:var(--e2) var(--e4);border:0;border-radius:var(--r-botao);font:var(--t-botao);
  letter-spacing:.005em;cursor:pointer;background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
#licao.toga #licao-primaria:enabled:active,#licao .faixa .botao:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda)}
#licao.toga #licao-primaria[disabled]{min-height:56px;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);color:var(--tinta-2)}
/* a faixa: fora do miolo que rola, presa ao rodapé; no acerto a luz de toga com texto marfim, no erro o marfim com um filete de tinta em cima */
#licao .faixa{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;max-width:480px;max-height:72%;margin:0 auto;
  padding:var(--e4) var(--e4) calc(var(--e4) + 2px + env(safe-area-inset-bottom));border-radius:var(--r-carta-relevo) var(--r-carta-relevo) 0 0;box-shadow:var(--amb-3)}
#licao .faixa.certo{background:var(--luz-toga);color:var(--marfim);--foco:var(--ouro)}
#licao .faixa.errado{background:var(--marfim);color:var(--tinta);box-shadow:var(--amb-3),inset 0 3px 0 var(--tinta)}
#licao .faixa.certo .botao{background:var(--luz-clara);color:var(--toga);box-shadow:var(--peca-luz-2)}
#licao .faixa.certo .botao:active{box-shadow:var(--peca-luz-2-afunda)}
#licao .ver-cab{flex:none;display:flex;align-items:center;gap:var(--e3);min-height:32px}
#licao .faixa h2{font:600 28px/1.05 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em}
#licao .faixa.errado h2{color:var(--toga)}
/* os dois ícones: o disco de toga com aro e marca em ouro; o aro de tinta com a diagonal */
#licao .ico{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-selo)}
#licao .ico.certo{background:var(--toga);box-shadow:inset 0 0 0 2px var(--ouro),0 2px 0 var(--toga-flanco)}
#licao .ico.certo::before{content:"";position:absolute;inset:-8% 0 0;margin:auto;width:30%;height:52%;border:solid var(--ouro);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#licao .ico.erro{box-shadow:inset 0 0 0 2px var(--tinta);overflow:hidden}
#licao .ico.erro::after{content:"";position:absolute;inset:0;margin:auto;width:2px;height:100%;background:var(--tinta);transform:rotate(45deg)}
/* a Meri no repouso: o palco sai pela borda de cima da faixa, à direita; a chapa de marfim (ela nunca pisa direto na toga), aro em ouro no acerto e em tinta no erro */
#licao .palco{position:absolute;right:var(--e4);top:-52px;width:96px;height:96px;pointer-events:none}
#licao .palco.triste{top:-60px;width:108px;height:108px}
#licao .palco .chapa{width:100%;height:100%;padding:9px 9px 7px;border-radius:var(--r-selo);background:var(--marfim);box-shadow:0 0 0 2px var(--ouro),0 6px 14px -4px rgba(var(--sombra),.5)}
#licao .palco.triste .chapa{box-shadow:0 0 0 2px var(--tinta),0 6px 14px -4px rgba(var(--sombra),.3)}
/* a linha da certa: a letra no lacre, "A certa era a X." e o começo do texto dela (3 linhas; 2 em tela estreita) */
#licao .certa-linha{display:flex;align-items:flex-start;gap:var(--e3);min-height:0}
#licao .certa-linha strong{display:block;font:700 16px/1.3 var(--f-corpo)}
#licao .lacre{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-letra);font:700 14px/1 var(--f-corpo);background:var(--toga);color:var(--ouro);box-shadow:inset 0 0 0 1.5px var(--ouro)}
#licao .clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--linhas,3);overflow:hidden;margin-top:2px;font:500 15px/1.35 var(--f-corpo);color:var(--tinta-2)}
#licao .fund{font:600 13px/1.4 var(--f-corpo);color:var(--tinta-2)}
#licao .faixa .rot{display:block;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
#licao .fund .rot{margin-bottom:2px}
#licao .fund.um{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#licao .faixa.certo .fund{color:var(--marfim)}
#licao .faixa.certo .fund .rot{color:var(--folha-70)}
/* "Comparar com a sua" / "Recolher": alvo de 48; aberta, a faixa vai a 86% e rola por dentro (a dela e a certa por inteiro) */
#licao .dobra{flex:none;display:flex;align-items:center;gap:var(--e2);min-height:48px;margin:-6px 0;padding:0;border:0;background:none;cursor:pointer;font:700 15px/1.2 var(--f-corpo);color:var(--toga);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#licao .chev{flex:none;width:9px;height:9px;margin:-4px var(--e1) 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
#licao .chev.cima{margin-top:var(--e1);transform:rotate(-135deg)}
#licao .rolo{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;flex-direction:column;gap:10px;margin:0 -2px;padding:2px 2px var(--e2);scrollbar-width:none}
#licao .rolo::-webkit-scrollbar,#licao .meio::-webkit-scrollbar{display:none}
#licao .rolo .alt{flex:none;cursor:default}
#licao .rolo .rot{margin-top:var(--e1)}
#licao .faixa.aberta{max-height:86%}
#licao .faixa.aberta .rolo{display:flex}
#licao .faixa.aberta .meio{display:none}
/* P1 (mocks/questao-v2-p1.html; Rodrigo, 2026-10-11: "A 1 eu quero essa"): o veredito, a linha do "Comparar" e o botão não cedem; o que entra ("Da outra vez", "Não revisada" com a frase inteira) mora no meio, que encolhe e rola por dentro */
#licao .meio{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
#licao .meio>*{flex:none}
#licao .faixa .outra-vez{margin-top:-2px}
#licao .outra-vez span{display:inline-block}
#licao .etq .rot{margin-bottom:2px;color:var(--ouro-velho)}
#licao .etq p{font:400 14px/1.45 var(--f-corpo);color:var(--tinta-2)}
#licao .faixa.certo .etq .rot{color:var(--ouro)}
#licao .faixa.certo .outra-vez,#licao .faixa.certo .etq p{color:var(--folha-70)}
@media (max-width:340px){
  #licao .faixa{--linhas:2}
  #licao .palco,#licao .palco.triste{top:-62px;width:72px;height:72px}
}
/* fim: R.26 */

/* ═══ A celebração do veredito (R.27) · mocks/questao-v2.html, proposta A, "A animação do veredito" (Rodrigo, 2026-10-11: "toda vez que a pessoa acerta ou erra, tem uma animação…") ═══
   O MOVIMENTO sobre a tela da R.26: no acerto o véu toga, três fogos de fagulhas em ouro, a prensa do ícone e a Meri que entra; no erro o risco do contradisco e a Meri triste que entra, sem véu e sem fagulha.
   UMA vez, sem laço (o piscar da Meri é a única exceção da casa), na curva da casa. Fora de todo keyframe: o texto do veredito e o botão. O véu e as fagulhas ficam ABAIXO da faixa e não recebem toque.
   Os nós do véu e das fagulhas nascem por JS (`celebrarVeredito`), só no acerto e só sem `reduce`, e SAEM ao fim; o resto é CSS. Preenche só ANTES do início (`backwards`): o estado final de cada
   keyframe é o repouso da R.26, e no fim a animação sai da lista. Sob `reduce` nada se move. Antes do marcador da R.1; todo seletor ancorado em `#licao`; só `var(--…)`. ═══ */
#licao .cel-veu{position:absolute;left:0;right:0;bottom:0;z-index:1;opacity:0;pointer-events:none}
#licao .cel-veu::before{content:"";position:absolute;inset:0;background:var(--toga);opacity:.62}
#licao .cel-fag{position:absolute;left:calc(100% / 2);top:calc(100% / 2);width:0;height:0;pointer-events:none}
#licao .cel-veu .f1{left:27%;top:30%}
#licao .cel-veu .f2{left:70%;top:16%}
#licao .cel-fag i{--a:0deg;--d:0px;position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:var(--r-selo);background:var(--ouro);opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1))}
#licao .cel-fag i.t{left:-1.5px;top:-7px;width:3px;height:14px;border-radius:var(--r-marca)}
#licao .cel-fag i.e{border-radius:1px;background:var(--folha)}
/* o repouso da Meri em HEAD acabava com o `transform` PREENCHIDO pela entrada da R.3 (computado: a matriz identidade, que também a põe no contexto de empilhamento, acima das fagulhas que nascem antes dela no palco); o fim aqui é `backwards`, e o repouso declara o mesmo valor */
#licao .palco .chapa{transform:translate(0)}
/* o gesto de duas voltas da R.3 não roda na faixa: a entrada é UMA, a de baixo (o piscar, no `.e`, fica) */
#licao .palco .meri .b,#licao .palco .meri .x1{animation:none}
@media (prefers-reduced-motion: no-preference){
  #licao .cel-veu{animation:cel-veu 900ms var(--curva-casa) backwards}
  #licao .cel-fag i{animation:cel-fag 720ms var(--curva-casa) 150ms backwards}
  #licao .cel-veu .f2 i{animation-delay:330ms}
  #licao .palco .meri-lugar{animation:cel-meri var(--t-meri) 100ms backwards}
  #licao .faixa .ico{animation:cel-prensa 180ms var(--curva-casa) backwards}
  #licao .faixa .ico.erro::after{animation:cel-risco 180ms var(--curva-casa) 120ms backwards}
  @keyframes cel-veu{0%{opacity:0}14%{opacity:1}62%{opacity:1}100%{opacity:0}}
  @keyframes cel-fag{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}18%{opacity:1}60%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--d) * -1))}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1.14)) scale(.5)}}
  @keyframes cel-meri{0%{opacity:0;transform:translateY(12px) scale(.6)}60%{opacity:1;transform:translateY(-5px) scale(1.08)}100%{opacity:1;transform:none}}
  @keyframes cel-prensa{0%{transform:scale(1.3)}100%{transform:scale(1)}}
  @keyframes cel-risco{0%{height:0}100%{height:100%}}
}
/* fim: R.27 */

/* ═══ O fechamento na pele Relevo (R.5) · AD-41, FR-78 · mocks/revamp-3d.html #p-fecha-certo, #p-fecha-zero ═══
   Só a carta de fechamento (`.ponta-licao.chao`): todo seletor daqui é ancorado nela. Antes do marcador da R.1 (a convenção das R.2 a R.4); só `var(--…)`.
   O SINETE (D1, D2): 96 px, 8 px de espessura (`--prof-3`, no `--relevo-sinete`), aro e marca em OURO sobre o disco de toga, e um reflexo. A marca é só do
   `.sinete.fechamento` (o `#tpl-sinete` é de todos os prensados: a R.8): o SVG some e o CSS desenha disco, aro (fundo), marca (::before) e reflexo (::after).
   A prensa e o assentar são os da 5.5b, literais: o `--relevo` redefinido aqui é o que o `to` do `assentar` lê, e o flanco de 8 px assenta junto.
   Sem o escalonamento t1..t4 do mock (D3) e sem a marca de metade em porcento (o meio é `center`/`50.0%`: o `testes_trilha` ⑭ está no teto). */
.ponta-licao.chao{background-image:radial-gradient(ellipse 90% 50.0% at center 26%,var(--marfim) 0%,var(--folha) 70%)}
.ponta-licao.chao .sinete.fechamento{background:radial-gradient(circle at center,transparent 36.5px,var(--ouro) 37px,var(--ouro) 39px,transparent 39.5px),var(--luz-sinete);
  --relevo:var(--relevo-sinete)}
.ponta-licao.chao .sinete.fechamento>svg{visibility:hidden}
.ponta-licao.chao .sinete.fechamento::before{content:"";position:absolute;inset:0;margin:auto;width:28px;height:28px;border:solid var(--ouro);border-width:0 6px 6px 0;
  transform:translateY(-6px) scaleY(.7) rotate(45deg)}
.ponta-licao.chao .sinete.fechamento::after{background:var(--reflexo-sinete) no-repeat 17px 7px/44px 21px}
/* O "Dia N.": display 64 px em toga (D7); "Dia 365." cabe a 320, o piso de 48 px não foi preciso */
.ponta-licao.chao .numero{font:var(--t-d0);font-variation-settings:var(--fv-display);letter-spacing:-.03em;color:var(--toga)}
/* A SEMANA em moedas (D8), SÓ aqui: 28 px; a prensada com luz de toga, 3 px de flanco e marca em ouro; o perdido tracejado (o buraco não se esconde); o de hoje com anel */
.ponta-licao.chao .selos{gap:10px;justify-content:center}
.ponta-licao.chao .selos:has(.dia){padding-bottom:20px}
.ponta-licao.chao .selo,.posse-cartao .selo,#tela-manha .selo{position:relative;width:28px;height:28px}
.ponta-licao.chao .selo.prensado,.posse-cartao .selo.prensado,#tela-manha .selo.prensado{background:var(--luz-toga);box-shadow:0 3px 0 var(--toga-flanco)}
.ponta-licao.chao .selo.prensado::after,.posse-cartao .selo.prensado::after,#tela-manha .selo.prensado::after{content:"";position:absolute;inset:0;margin:auto;width:8.5px;height:8.5px;border:solid var(--ouro);border-width:0 2px 2px 0;
  transform:translateY(-2px) scaleY(.7) rotate(45deg)}
.ponta-licao.chao .selo.perdido,.posse-cartao .selo.perdido,#tela-manha .selo.perdido{border:1.5px dashed var(--tinta-2);background:transparent}
.ponta-licao.chao .selo.aberto,.posse-cartao .selo.aberto,#tela-manha .selo.aberto{border:1.5px solid var(--filete)}
.ponta-licao.chao .selo.hoje,.posse-cartao .selo.hoje,#tela-manha .selo.hoje{outline:2px solid var(--toga);outline-offset:3px}
.ponta-licao.chao .selo .dia,.posse-cartao .selo .dia,#tela-manha .selo .dia{position:absolute;left:-6px;right:-6px;top:calc(100% + 9px);font:600 11px/1 var(--f-corpo);color:var(--tinta-2);letter-spacing:.04em;text-align:center}
/* reduzido (AC-2(f)): sem a prensa, o sinete já fica com o giro */
@media (prefers-reduced-motion: reduce){
  .ponta-licao.chao .sinete.fechamento{transform:rotate(var(--giro,0deg))}
}
/* fim: O fechamento na pele Relevo (R.5) */

/* ═══ A Trilha na pele Relevo (R.6) · AD-41, FR-79 · mocks/revamp-3d.html #p-trilha ═══
   Só a Trilha: todo seletor daqui é ancorado em `.caminho` (os nós e o cartão do nó) ou em `.cab .posse` (a moeda da posse, só na aba Trilha). Antes do
   marcador da R.1 (a convenção das R.2 a R.5); só `var(--…)`. O losango (46 px, 6 px de espessura) e o alvo dele estão nas regras do 5.6/10.8 acima (editadas
   no lugar, com a redação antiga em comentário); aqui moram o recuo do botão, o losango ATUAL, o cartão, o "Começar" e a posse.
   O ALVO (AC-2(a)): a diagonal do losango (65 px) passa do botão de 44 px; o botão cresce (65 px, acima) e a margem negativa + o enchimento de 10,5 px o põem
   a cobrir a diagonal sem mexer no `left`/`right` do 5.6 (o centro do losango não anda). O rótulo vai a 24 px do losango (a ponta de 32,5 px de diagonal passaria
   a 1,5 px do texto). O ATUAL (D1): um pseudo-elemento do cartão, decorativo (nenhum `.losango` novo: a contagem por DOM do 5.6 fica); o vértice de cima fica no
   fundo do passo de antes, onde o fio de chegada termina, e o cartão desce o diâmetro (82 px) mais o respiro: `--atual-recuo`. O miolo de `toga` é uma camada do fundo
   (quadrado: o `::after` do cartão é do fio que sai dele). */
.caminho{--atual-recuo:104px}
.caminho .no{gap:var(--e5)}
.caminho .passo.e .no{margin-left:-10.5px;padding-left:10.5px}
.caminho .passo.d .no{margin-right:-10.5px;padding-right:10.5px}
.caminho .atual{margin-top:var(--atual-recuo)}
.caminho .atual::before{content:"";position:absolute;left:calc(100% / 2 - 29px);top:calc(12px - var(--atual-recuo));width:58px;height:58px;border-radius:13px;transform:rotate(45deg);pointer-events:none;
  background:linear-gradient(var(--toga),var(--toga)) center / 30px 30px no-repeat,var(--luz-losango-claro);box-shadow:var(--losango-atual)}
/* o código do nó não passa por baixo da Meri (R.3: `right:6px; 96 px`, a caixa desce 34 px no cartão): o texto para na borda esquerda dela (cartão - 36 de enchimento - 84 = a Meri a
   (cartão - 102) menos os 18 de enchimento). A 360 px o código cabe em uma linha e isto não age; a 320 ele quebra em duas (medido: a linha de 205 px passaria 19 px por baixo da Meri). */
.caminho .atual .rotulo{max-width:calc(100% - 84px)}
.caminho .atual .d3{margin:var(--e2) 0 var(--e1);font:600 24px/1.15 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em;color:var(--tinta)}
/* o "Começar": a peça primária da R.1 (6 px), SEM `.btn` (o `.acao` do 5.6 fica o único botão do cartão, com o mesmo `aria-label`). `#conteudo .btn.primario` (a armadilha do
   DESIGN §16.6(a)) não casa aqui, porque o botão não tem `.btn`; o `.caminho .atual .acao` (0,3,0) vence o `.acao` global (0,1,0) sem `!important`. */
.caminho .atual .acao{position:relative;min-height:56px;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;background:var(--luz-toga);color:var(--marfim);
  box-shadow:var(--peca-toga-2);transition:transform var(--t-solta),box-shadow var(--t-solta)}
.caminho .atual .acao:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
/* a posse (B1 da review, D6, D7): a pílula `marfim` de 36 px com a moeda de 24 px NO CORPO, na linha de "N de 134 nós selados", à direita dele, como a prancha #p-trilha (o `#topo` fica só com o
   título, e a 10.10, o título em UMA linha, segue cumprida a 320 px com 1 a 365 dias). SÓ na aba Trilha, com `sequencia >= 1` (o nó `span.posse` só nasce ali: `verTrilha`). A moeda é a luz de toga
   com 3 px de flanco e a marca em ouro, a mesma peça da semana do fechamento (R.5): a R.8 (o Perfil) amplia este escopo, não duplica. O texto repetido do `#topo-streak` (o `render()` o escreve
   sempre) some enquanto a pílula existe: o leitor de tela ouve a posse uma vez. A moeda aparece em TODA largura.
   R.8a (AC-3): o mesmo desenho vale no topo de Seus erros (`#topo-streak > .posse-topo`, a classe que `pintarErros` põe no filho do topo com `sequencia >= 1`): o seletor das três regras abaixo foi
   AMPLIADO, e a moeda continua declarada UMA vez. */
.cab:has(> .posse){display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--e3)}
.cab:has(> .posse) > .d2{grid-column:1 / -1}
.cab .posse,#topo-streak > .posse-topo{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 12px 0 37px;border-radius:999px;background:var(--marfim);
  box-shadow:var(--amb-1),inset 0 1px 0 var(--brilho);font:700 14px/1 var(--f-corpo);color:var(--toga)}
.cab .posse::before,#topo-streak > .posse-topo::before{content:"";position:absolute;left:6px;top:calc(100% / 2 - 12px);width:24px;height:24px;border-radius:999px;background:var(--luz-toga);box-shadow:0 3px 0 var(--toga-flanco)}
.cab .posse::after,#topo-streak > .posse-topo::after{content:"";position:absolute;left:15px;top:calc(100% / 2 - 4.5px);width:7px;height:7px;border:solid var(--ouro);border-width:0 2px 2px 0;
  transform:translateY(-1px) scaleY(.7) rotate(45deg)}
#app:has(#conteudo .cab .posse) #topo-streak > span{display:none}
/* fim: A Trilha na pele Relevo (R.6) */

/* ═══════════════════════════════════════════════════════════════════════════
   Seus erros, O que cai e a barra na pele Relevo (R.8a)  ·  AD-41, AD-17, FR-80 · mocks/revamp-3d.html #p-erros, #p-erros-vazio, #p-cai
   Só a pele: nenhuma estrutura mudou. Todo seletor daqui é ancorado numa das telas (`#conteudo`, `.erros-vazio`, `ol.erros`, `.contagem-h`, `.cai`, `.lamina`, `.ciclos`): nada vaza para o Perfil, a
   entrada, a Trilha ou a lição. Antes do marcador da R.1 (a convenção das R.2 a R.6); só `var(--…)`. A lei: só tem espessura o que se toca. A lista de erros é PAPEL (marfim, `--cartao`, sem flanco), o
   cartão da lâmina também, as colunas são CHAPADAS; só afundam o "Começar a segunda passada" e o "Estudar este nó" (a peça primária de 6 px da R.1). A armadilha do DESIGN §16.6(a): `#conteudo
   .btn.primario` (1,2,0) vence `.relevo .btn.primario`; a peça entra por ESPECIFICIDADE ancorada no `.erros-acao` (1,3,0), sem `!important`, e não alcança o `#erro-app` nem o `.erros-vazio .btn`.
   Sem a porcentagem redonda que o ⑭ de `testes_trilha.py` conta, sem `infinite`, sem cor literal (o chão de luz da Meri é o `.meri-chao::before` da R.2).
   ═══════════════════════════════════════════════════════════════════════════ */
/* a contagem é o herói: o número em display 40 px sobre a frase, a Meri `pensando` (R.3) ao lado */
.contagem-h{font:500 17px/1.35 var(--f-corpo);font-variation-settings:normal;letter-spacing:normal}
.contagem-h .num{display:block;font:600 40px/1 var(--f-display);font-variation-settings:var(--fv-display);color:var(--toga);margin-bottom:var(--e1)}
/* a lista é papel: o contêiner marfim com a sombra ambiente, as linhas separadas por filete, sem flanco e sem sombra por linha; as linhas não se tocam (decisão do E9: abrir seria reler) */
ol.erros{background:var(--marfim);box-shadow:var(--cartao);border-radius:var(--r-carta-relevo);padding:6px var(--e4)}
ol.erros li{border-bottom:none;border-top:1px solid var(--folha-2);padding:11px 0}
ol.erros li:first-child{border-top:none}
ol.erros .ord{font:600 13px/1.6 var(--f-display);font-variation-settings:var(--fv-display);color:var(--ouro-velho);padding-top:0}
ol.erros .no{font:600 10.5px/1.2 var(--f-corpo);letter-spacing:.07em;color:var(--tinta-2)}
ol.erros .tit{font:600 15px/1.3 var(--f-corpo);color:var(--tinta);margin:2px 0}
ol.erros .meta{font:400 12.5px/1.4 var(--f-corpo);color:var(--tinta-2)}
/* a peça presa acima da barra: o degradê de `folha` por trás (o mock `.ficar-acima`) e a peça primária de 6 px */
#conteudo .erros-acao{padding:var(--e3) var(--e4) var(--e4);background:linear-gradient(180deg,transparent,var(--folha) 26%);border-top:none}
#conteudo .erros-acao .btn.primario{position:relative;min-height:56px;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;background:var(--luz-toga);color:var(--marfim);
  box-shadow:var(--peca-toga-2);transition:transform var(--t-solta),box-shadow var(--t-solta)}
#conteudo .erros-acao .btn.primario:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
/* os vazios com a Meri (conquista e começo): a Meri de 168 px com a sombra de contato, o texto em display 22 px `toga` e o apoio de 15 px. SÓ onde há Meri: o `desconhecido` (sem Meri) fica como hoje */
.erros-vazio .meri-lugar.mv-vazio{position:relative;width:168px;height:168px;flex:0 0 auto}
/* a sombra de contato do chão: o MESMO desenho do `.meri-chao::before` da R.2 (o gradiente, as margens e a altura), declarado para o vazio porque a guarda da R.3 (`testes_meri_componente` AC-6①) deixa o app.js
   nomear a classe `meri-chao` só dentro do `meriLugar` e do `meriNasTelas`: o `meriLugar` não muda (a R.5 o trava) e o nó dele ganharia a classe de fora */
.erros-vazio:has(.meri-lugar) .forte{font:500 22px/1.25 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em;color:var(--toga);margin-top:var(--e4)}
.erros-vazio:has(.meri-lugar) .apoio{font-size:15px}
/* O que cai: o cartão marfim DENTRO da lâmina. A lâmina segue o contêiner do feed (`min-height:100%`, `scroll-snap`, padding `0 var(--e5)`: a geometria não muda) e vira uma GRADE de uma
   coluna de conteúdo entre dois recuos de 22 px; o cartão é o pseudo-elemento absoluto que ocupa as linhas ocupadas (as de sobra têm altura zero), e `align-content:center` o centra como o `justify-content`
   de antes. O padding do cartão é a margem do primeiro e do último filho. Sem flanco: só tem espessura o que se toca. */
.lamina{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;grid-template-rows:repeat(7,auto);align-content:center;justify-content:normal;position:relative;isolation:isolate}
/* R.25: o cartão fica ATRÁS do conteúdo (z -1 no plano da lâmina) */
.lamina::before{content:"";position:absolute;inset:0;z-index:-1;grid-column:1 / -1;grid-row:1 / -1;background:var(--marfim);box-shadow:var(--cartao);border-radius:var(--r-carta-relevo);pointer-events:none}
.lamina > *{grid-column:2}
.lamina > :first-child{margin-top:26px}
.lamina > :last-child{margin-bottom:var(--e5)}
/* as colunas: dado, de altura igual, chapadas (só a luz de 1 px no topo); a ausência segue o traço da 10.9 (`#conteudo .ciclos i.ausente`, intocado) */
.ciclos{gap:var(--e4);height:76px;margin-top:26px;padding:0 var(--e3)}
#conteudo .ciclos i{flex:1;width:auto;border-radius:6px 6px 2px 2px;background:var(--luz-toga);
  box-shadow:inset 0 1px 0 var(--folha-40);box-shadow:inset 0 1px 0 var(--brilho)}
.ciclos-leg{gap:var(--e4);padding:var(--e3) var(--e3) 0;margin-top:0}
.ciclos-leg span{flex:1;width:auto;font:600 11px/1 var(--f-corpo)}
/* review R1: a luz de 1 px das colunas NÃO vale para o chão da ausência (a 10.9: 1,5 px em `tinta-2`, 7,72:1 sobre o marfim; com a luz caía a 4,52:1) */
#conteudo .cai .ciclos i.ausente{box-shadow:none}
/* "Estudar este nó": a peça primária da R.1, por ancoragem no `.cai` (o `.lamina .acao` global fica byte a byte) */
.cai .lamina .acao{position:relative;min-height:56px;padding:0 22px;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;background:var(--luz-toga);color:var(--marfim);
  box-shadow:var(--peca-toga-2);transition:transform var(--t-solta),box-shadow var(--t-solta)}
.cai .lamina .acao:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
/* fim: Seus erros, O que cai e a barra na pele Relevo (R.8a) */

/* ═══════════════════════════════════════════════════════════════════════════
   Perfil, a folha Apagar e a entrada na pele Relevo (R.8b)  ·  AD-41, AD-17, FR-80 · mocks/revamp-3d.html #p-perfil, #p-apagar, #p-entrada
   Só a pele (o DOM do Perfil ganha o cartão da posse SÓ com `prog`; a folha e a entrada não mudam de estrutura). Todo seletor é ancorado: o Perfil pelo cartão (`.posse-cartao ~ …`, o irmão: o
   Perfil sem `prog` fica o de HEAD e a `.opcao` segue de `className` exato), a folha pelo id e a entrada por `#tela-login:not(.sem-rede)` (sem rede é a de HEAD). Antes do marcador da R.1; só `var(--…)`.
   A lei: só tem espessura o que se toca. O cartão da posse e os blocos são LEITURA (sem flanco); o "Sair" é a peça secundária (4 px), "Apagar minha conta" a primária (6 px). A armadilha do DESIGN
   §16.6(a): `#conteudo .btn` (1,1,0) vence `.relevo .btn.secundario`, então o "Sair" leva o `#conteudo` à frente. O botão do Google (AD-17) não é nomeado aqui.
   ═══════════════════════════════════════════════════════════════════════════ */
.posse-cartao{margin-bottom:var(--e3);padding:var(--e4);background:var(--marfim);box-shadow:var(--cartao);border-radius:var(--r-carta-relevo)}
.posse-heroi{display:flex;align-items:center;gap:var(--e2)}
.posse-heroi > div{flex:1;min-width:0}
.posse-n{margin:0;font:600 48px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.03em;color:var(--toga)}
.posse-cartao .regra{margin:6px 0 0}
.posse-heroi .meri-lugar.mv-perfil{flex:none;width:92px;height:92px}
/* a semana: a moeda da R.5 (28 px, luz de toga, flanco de 3 px, marca em ouro, perdida tracejada, anel de hoje, rótulo do dia) é AMPLIADA ao cartão pelos seletores da própria R.5 (`…,.posse-cartao .selo…`): uma regra só; o `.selos` global fica */
.posse-cartao .selos{justify-content:space-between;gap:0;margin:14px 0 0;padding-bottom:20px}
/* os três números: blocos de leitura lado a lado; as duas frases de HEAD ficam, e a ordem visual (o número em cima) é só CSS (D4) */
.posse-cartao ~ .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:var(--e3) 0}
.posse-cartao ~ .numeros div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;padding:var(--e3);border:0;border-radius:16px;background:var(--marfim);box-shadow:var(--cartao)}
.posse-cartao ~ .numeros .num{font:600 26px/1 var(--f-display);font-variation-settings:var(--fv-display);color:var(--toga)}
.posse-cartao ~ .numeros span:not(.num){margin-top:6px;font:600 11.5px/1.25 var(--f-corpo);color:var(--tinta-2)}
/* as linhas de opção (60 px) e o interruptor: 56 px de largura num alvo de 44 de altura (o trilho de 34 é o `padding-box`, a borda transparente é só alvo), o trilho cavado em `toga`, o botão de luz clara
   que corre (`::after`) e o visto SÓ ligado (`::before`): ligado se lê sem cor. O texto "ligada"/"desligada" sai da vista (`font-size:0`); o nome e o estado são do `role=switch` */
.posse-cartao ~ .opcao{min-height:60px;padding:0}
.posse-cartao ~ .opcao [role="switch"]{position:relative;flex:none;width:56px;height:44px;min-height:0;border:solid transparent;border-width:5px 0;border-radius:17px/22px;background:var(--toga) padding-box;box-shadow:inset 0 2px 3px rgba(var(--sombra),.5);font-size:0}
.posse-cartao ~ .opcao [role="switch"]::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:999px;background:var(--luz-clara);box-shadow:0 2px 0 var(--toga-flanco),inset 0 1px 0 var(--brilho)}
.posse-cartao ~ .opcao [role="switch"][aria-checked="true"]::after{left:auto;right:3px}
.posse-cartao ~ .opcao [role="switch"]:active::after{transform:translateY(1px);box-shadow:0 1px 0 var(--toga-flanco)}
.posse-cartao ~ .opcao [role="switch"][aria-checked="true"]::before{content:"";position:absolute;left:9px;top:11px;width:10px;height:6px;border:solid var(--marfim);border-width:0 0 2px 2px;transform:rotate(-45deg)}
#conteudo .posse-cartao ~ .opcao .btn.secundario{width:auto;min-height:48px;padding:0 var(--e5);border-radius:var(--r-peca);background:var(--luz-clara);color:var(--toga);box-shadow:var(--peca-clara-1);font:700 15px/1 var(--f-corpo);
  transition:transform var(--t-solta),box-shadow var(--t-solta)}
#conteudo .posse-cartao ~ .opcao .btn.secundario:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.posse-cartao ~ .apagar-link{margin:var(--e2) auto 0}
/* a folha: marfim com os 28 px do mock (por token; a regra de HEAD e o véu seguem acima), a alça de 40 × 5, o título em 24 px, a peça primária de 6 px (a travada fica SEM flanco) e o "Manter" em texto */
#folha-apagar.folha-baixo{background:var(--marfim);border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho)}
#folha-apagar.folha-baixo .alca{width:40px;height:5px;border-radius:3px}
#folha-apagar.folha-baixo h2{font-size:24px;color:var(--toga)}
#folha-apagar.folha-baixo .btn.primario{min-height:56px;border-radius:var(--r-botao);font:var(--t-botao);background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2);
  transition:transform var(--t-solta),box-shadow var(--t-solta)}
#folha-apagar.folha-baixo .btn.primario:active:not([disabled]){transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#folha-apagar.folha-baixo .btn.primario[disabled]{box-shadow:none}
#folha-apagar.folha-baixo .btn.texto{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* a entrada ONLINE: a Meri `feliz` de 196 px com o chão de luz (o mesmo desenho do `.meri-chao::before` da R.2), o nome em 48 px com o relevo tipográfico e o fundo radial; o sinete sai. SEM rede é a de HEAD
   (o sinete cinza, o nome em `tinta-2`): a Meri some por `display:none`, sem recriar nada. Nenhuma regra toca a porta, o espaço do botão nem o botão (AD-17) */
#tela-login:not(.sem-rede){background:radial-gradient(90% 55% at center 22%,var(--marfim) 0%,var(--folha) 70%)}
#tela-login:not(.sem-rede) .sinete{display:none}
#tela-login:not(.sem-rede) h1{font:600 48px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.025em;text-shadow:0 1px 0 var(--brilho)}
#tela-login:not(.sem-rede) .ponta .apoio{font-size:16px}
#tela-login .meri-lugar.mv-entrada{position:relative;order:-1;flex:none;width:196px;height:196px}
.erros-vazio .meri-lugar.mv-vazio::before,#tela-login .meri-lugar.mv-entrada::before{content:"";position:absolute;left:22%;right:22%;bottom:2%;height:9%;background:radial-gradient(closest-side,rgba(var(--sombra),.28),transparent)}   /* o chão de luz dos vazios e da entrada: o MESMO corpo do `.meri-chao::before` da R.2, uma regra só */
#tela-login.sem-rede .meri-lugar{display:none}
/* fim: Perfil, a folha Apagar e a entrada na pele Relevo (R.8b) */

/* R.14 (R9-PERFIL-SAIR-30): o botão de uma linha `.opcao` sem classe (o "Sair" do Perfil sem `prog`) só tinha `min-height:44px`: a largura era a do texto (30,5 px).
   `min-width` cresce o alvo para 44 e `text-align:right` mantém a letra rente ao filete direito, onde a linha (`space-between`) a põe. Só o alvo; o `:not(.btn):not([role])` deixa de fora o interruptor (`role=switch`, 47 px) e o "Sair" `.btn.secundario` (com `prog`): nada neles muda; não depende de o "Sair" não ter classe. */
.opcao button:not(.btn):not([role]){min-width:44px;text-align:right}

/* R.16 (R9-FOCO-CORTADO-WEB): o anel de foco é EXTERNO (offset positivo) e três controles estão colados à borda da tela sem folga (os 4 botões da barra, o ✕ da lição, o feed de O que cai):
   o anel passava da viewport e era cortado. Aqui o anel desses três é desenhado por DENTRO (offset negativo), sem mudar tamanho nem posição de nada. Só o offset; a cor e a espessura são as de cada sala.
   O foco global do Relevo (`.relevo :focus-visible`) não muda. Seletores por id/escopo. */
#barra button:focus-visible{outline-offset:-4px}
#licao-sair:focus-visible{outline-offset:-4px}
#conteudo .feed:focus-visible{outline-offset:-4px}

/* ═══ A escolha e a troca de trilha (R.7) · AD-41, FR-79/81/97 · hub-relevo.html #h-escolha, #h-trocar · tudo ancorado em `.hub`, `.trilha-chip`, `.opcao-t`, `#folha-trocar`, `#trocar-veu`, `#tela-escolha`, `.linha-trilha`; só `var(--…)`.
   Espessura só em quem se toca (chip 4 px, peça viva 6 px); a CHAPADA ("em breve") não tem flanco, foco nem afunda. Regras da folha PRÓPRIAS (D10). `20px` e `46px`: do mock, sem token. ═══ */
.hub{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);max-width:480px;margin:0 auto calc(var(--e2) * -1);padding:var(--e4) var(--e4) 0}
.hub .marca{font:600 15px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.005em;color:var(--toga)}
.trilha-chip{display:inline-flex;align-items:center;gap:var(--e2);min-height:44px;padding:0 12px 0 14px;border:0;border-radius:999px;background:var(--luz-clara);box-shadow:var(--peca-clara-1);cursor:pointer;
  font:700 14px/1 var(--f-corpo);color:var(--toga);transition:transform var(--t-solta),box-shadow var(--t-solta)}
.trilha-chip:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.trilha-chip:focus-visible{outline:3px solid var(--toga);outline-offset:3px}
.trilha-chip svg{width:14px;height:14px;flex:none;transform:rotate(180deg)}
.opcao-t{position:relative;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;width:100%;min-height:96px;padding:16px;border:0;text-align:left;cursor:pointer;
  border-radius:20px;background:var(--luz-clara);box-shadow:var(--peca-clara-2);color:var(--tinta);transition:transform var(--t-solta),box-shadow var(--t-solta)}
.opcao-t:active{transform:translateY(5px);box-shadow:var(--peca-clara-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.opcao-t[aria-checked="true"]{box-shadow:var(--peca-clara-2),0 0 0 2.5px var(--toga)}
.opcao-t .ins{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-botao);font:700 13px/1 var(--f-corpo);letter-spacing:.04em;color:var(--marfim);background:var(--luz-toga);box-shadow:inset 0 1px 0 var(--brilho)}
.opcao-t .t{display:block;font:600 20px/1.15 var(--f-display);font-variation-settings:var(--fv-display);color:var(--tinta)}
.opcao-t .s{display:block;font:var(--t-apoio);color:var(--tinta-2);margin-top:3px}
.opcao-t .s2{display:block;font:600 12.5px/1.35 var(--f-corpo);color:var(--toga);margin-top:6px}
.opcao-t .marcador{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--filete)}
.opcao-t[aria-checked="true"] .marcador{background:var(--toga);box-shadow:none}
.opcao-t[aria-checked="true"] .marcador::after{content:"";width:10px;height:6px;border:2px solid var(--marfim);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.opcao-t.breve,.opcao-t.breve:active{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);cursor:default;transform:none}
.opcao-t.breve .ins{background:var(--folha-2);color:var(--tinta-2);box-shadow:var(--rebaixo)}
.opcao-t.breve .t{color:var(--tinta-2)}
.opcao-t .tag{display:inline-block;margin-left:6px;padding:5px 7px;border-radius:6px;font:700 10px/1 var(--f-corpo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho);box-shadow:inset 0 0 0 1px var(--ouro-velho);vertical-align:2px}
.escolha{display:flex;flex-direction:column;gap:14px}
#folha-trocar,#tela-escolha{--g:calc(var(--e4) + 2px)}   /* os 18 do mock, por conta (a V6 da 2.16 proíbe o literal) */
#trocar-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-trocar.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;display:flex;flex-direction:column;background:var(--marfim);
  border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);
  padding:10px var(--g) calc(34px + env(safe-area-inset-bottom))}
#folha-trocar.folha-baixo > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
#folha-trocar.folha-baixo .alca{flex:none;width:40px;height:5px;border-radius:3px;background:var(--filete);margin:0 auto var(--g)}
#folha-trocar.folha-baixo .rolo{flex:0 1 auto;min-height:0;overflow-y:auto;padding:4px 4px var(--e2)}
#folha-trocar.folha-baixo .rotulo{color:var(--ouro-velho)}
#folha-trocar.folha-baixo h2{margin:8px 0 var(--g);font-size:24px;color:var(--toga)}
#folha-trocar.folha-baixo .apoio{margin:var(--g) 2px 0}
#tela-escolha{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--folha)}
#tela-escolha .miolo{flex:1 1 auto;min-height:0;overflow-y:auto;width:100%;max-width:480px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) var(--g) var(--e4)}
#tela-escolha .cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e2);padding:0 4px}
#tela-escolha .rotulo{color:var(--ouro-velho)}
#tela-escolha h2{margin-top:10px;font-size:36px;color:var(--toga)}
#tela-escolha .vaga-escolha{flex:0 0 92px;width:92px;height:92px;margin-bottom:-6px}
#tela-escolha .meri-lugar.mv-escolha{position:relative;width:100%;height:100%}
#tela-escolha .miolo > .apoio{padding:12px 4px 22px;font-size:15px}
#tela-escolha .rodape{flex:none;width:100%;max-width:480px;margin:0 auto;padding:var(--e3) var(--g) calc(40px + env(safe-area-inset-bottom))}
/* R.30 parte C (Rodrigo, 2026-10-12: "A" e "Vamos de A"): a linha "Trilha" do Perfil, do `css-mock` da mini-prancha perfil-trilha-botao.html, alternativa A. O botão diz só "Trocar" e nunca muda de forma; o nome da trilha é texto de apoio embaixo do rótulo e pode quebrar. Só tokens. */
.linha-trilha.opcao{gap:var(--e3);padding:var(--e2) 0}
.linha-trilha .lt-texto{display:flex;flex-direction:column;min-width:0}
.linha-trilha .lt-nome{font:var(--t-apoio);color:var(--tinta-2)}
.linha-trilha button{flex:none}
/* fim: A escolha e a troca de trilha (R.7) */

/* ═══ A folha da trava no nó (M.2) · Parte A · FR-101/102 · hub-relevo.html #h-trava e #h-trava-pwa · a MESMA física da troca e do apagar (véu da toga, r 28); só `var(--…)`, nenhuma cor nova ═══
   "Ver a assinatura" é a única peça toga (6 px); "Agora não" é texto de 44 px; no PWA a placa é CHAPADA (trilho cavado, sem flanco, não se toca). */
#folha-trava{--g:calc(var(--e4) + 2px)}
#trava-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-trava.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;display:flex;flex-direction:column;background:var(--marfim);border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px var(--g) calc(34px + env(safe-area-inset-bottom))}
#folha-trava.folha-baixo > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
#folha-trava.folha-baixo .alca{flex:none;width:40px;height:5px;border-radius:3px;background:var(--filete);margin:0 auto var(--g)}
#folha-trava.folha-baixo .rolo{flex:0 1 auto;min-height:0;overflow-y:auto;padding:4px 4px var(--e2)}
#folha-trava.folha-baixo .rotulo{color:var(--ouro-velho)}
#folha-trava.folha-baixo h2{margin:8px 0 10px;font-size:24px;color:var(--toga)}
#folha-trava.folha-baixo .apoio{margin:0;font-size:15px}
#folha-trava .trava-acoes{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
#folha-trava .placa{width:100%;margin:0;padding:14px 16px;border-radius:var(--r-peca);background:var(--folha-2);box-shadow:var(--rebaixo);font:var(--t-corpo);color:var(--tinta)}
#folha-trava .btn.primario{width:100%;min-height:56px;border-radius:var(--r-botao);font:var(--t-botao);background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2);transition:transform var(--t-solta),box-shadow var(--t-solta)}
#folha-trava .btn.primario:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#folha-trava .btn.texto{min-height:44px;width:auto;padding:0 12px;color:var(--toga);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* fim: M.2 */

/* ═══ A posse no Perfil: os dias, a ficha e o recesso (6.5) · AD-41, FR-39/42 · economia-relevo.html #e1-a · tudo ancorado em `.posse-cartao` e `.recessos-cartao`; só `var(--…)`; antes do marcador da R.1 ═══
   A lei: só tem espessura o que se toca. O recesso NÃO é conquista (chapado, sem flanco), a ficha não se toca (sem flanco), a porta é peça clara de 4 px (nunca toga). */
.posse-cartao .rotulo{margin:0 0 6px;color:var(--ouro-velho)}
.posse-cartao .posse-n{white-space:nowrap}
.posse-cartao > .letras,.recessos-cartao .letras{margin:var(--e3) 0 0;font:var(--t-apoio);color:var(--tinta-2)}
.posse-cartao .selo.recesso,#tela-manha .selo.recesso{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ouro-velho)}
.posse-cartao .selo.recesso::before,.posse-cartao .selo.recesso::after,#tela-manha .selo.recesso::before,#tela-manha .selo.recesso::after,#tela-manha .recesso-g::before,#tela-manha .recesso-g::after{content:"";position:absolute;top:28%;bottom:28%;width:max(1.5px,3%);background:var(--ouro-velho)}
.posse-cartao .selo.recesso::before,#tela-manha .selo.recesso::before,#tela-manha .recesso-g::before{left:37%}
.posse-cartao .selo.recesso::after,#tela-manha .selo.recesso::after,#tela-manha .recesso-g::after{right:37%}
.recessos-cartao{margin-bottom:var(--e3);padding:var(--e4);background:var(--marfim);box-shadow:var(--cartao);border-radius:var(--r-carta-relevo)}
.recessos-cartao .linha-r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3)}
.recessos-cartao .rotulo{margin:0;color:var(--ouro-velho)}
.recessos-cartao .rotulo.sub{margin:18px 0 10px;color:var(--tinta-2)}
.recessos-cartao .fichas{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e3)}
.recessos-cartao .ficha,#folha-recesso .ficha{position:relative;flex:none;width:40px;height:40px;border-radius:var(--r-controle);background:var(--luz-clara);box-shadow:inset 0 0 0 1.5px var(--ouro-velho)}
.recessos-cartao .ficha::before,.recessos-cartao .ficha::after,#folha-recesso .ficha::before,#folha-recesso .ficha::after{content:"";position:absolute;top:12px;bottom:12px;width:1.5px;background:var(--ouro-velho)}
.recessos-cartao .ficha::before,#folha-recesso .ficha::before{left:15px}
.recessos-cartao .ficha::after,#folha-recesso .ficha::after{right:15px}
.recessos-cartao .ficha.vaga,#folha-recesso .ficha.vaga{border:0;background:var(--folha-2);box-shadow:var(--rebaixo)}   /* `border:0`: a `.vaga` global da Trilha (borda tracejada 1,5 px) vazaria para a ficha; o mock não tem borda (6.5, review R1) */
.recessos-cartao .ficha.vaga::before,.recessos-cartao .ficha.vaga::after,#folha-recesso .ficha.vaga::before,#folha-recesso .ficha.vaga::after{background:var(--filete)}
.recessos-cartao .porta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e3);width:100%;min-height:60px;padding:10px 14px;border:0;border-radius:var(--r-peca);background:var(--luz-clara);box-shadow:var(--peca-clara-1);color:var(--tinta);font:inherit;text-align:left;cursor:pointer;
  transition:transform var(--t-solta),box-shadow var(--t-solta)}
.recessos-cartao .porta:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.recessos-cartao .porta b{display:block;font:var(--t-corpo-f);font-size:15px;line-height:1.3;color:var(--toga)}
.recessos-cartao .porta .apoio{display:block;font-size:13px;line-height:1.35}
.recessos-cartao .porta .mais{font:700 16px/1 var(--f-corpo);color:var(--ouro-velho);white-space:nowrap}
/* fim: A posse no Perfil (6.5) */

/* ═══ A manhã depois de um recesso (6.6) · economia-relevo.html #e2 ═══ */
body.com-manha #app{visibility:hidden}
#app[hidden] + #tela-manha{display:none}
#tela-manha{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:radial-gradient(90% 50% at 50% 26%,var(--marfim) 0%,var(--folha) 70%)}
#tela-manha .manha-miolo{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(74px + env(safe-area-inset-top)) 24px var(--e4)}
#tela-manha .manha-par{position:relative;display:flex;align-items:flex-end;justify-content:center}
#tela-manha .recesso-g{position:relative;flex:none;width:88px;height:88px;border-radius:var(--r-selo);box-shadow:inset 0 0 0 2px var(--ouro-velho)}
#tela-manha .meri-lugar.mv-manha{position:absolute;left:calc(50% + 34px);bottom:-10px;width:86px;height:86px}
#tela-manha .d1{margin:24px 0 0;color:var(--toga)}
#tela-manha .d1:focus{outline:none}
#tela-manha .d3,#tela-manha .apoio{margin:10px 0 0}
#tela-manha .selos{justify-content:center;gap:14px;margin:28px 0 0;padding-bottom:20px}
#tela-manha .selo .dia{top:calc(100% + 6px)}
#tela-manha .selo.aberto .dia,#tela-manha .selo.perdido .dia{top:calc(100% + 7.5px)}
#tela-manha .manha-pe{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px calc(20px + env(safe-area-inset-bottom))}
/* fim: A manhã depois de um recesso (6.6) */

/* ═══ A seção "Notícias" e a linha do Perfil (NT.5a) · noticias-chamariz.html #s-f2, #s-aberta, #s-hoje-vazio, #s-vazio, #s-sem-rede, #s-erro, #e-perfil; hub-relevo.html #h-n2, #h-n5 · tudo ancorado em `#noticias`,
   `#folha-filtro`, `#filtro-veu` e `body.com-noticias`; só `var(--…)` (as medidas em px são as do mock, sem token). Tela cheia FORA do `#app` (que sai da vista: nunca só coberto). Espessura só em quem se toca: o chip, o
   dia recolhido, a notícia, "Ler no site" e o erro (4 px), "Estudar" (6 px); a tarja, o "Hoje · nenhuma", o vazio e o fim são chapados. A linha do Perfil é a `.opcao` da R.8b, sem regra nova. ═══ */
body.com-noticias #app{visibility:hidden}
#app[hidden] ~ #noticias,#app[hidden] ~ #filtro-veu,#app[hidden] ~ #folha-filtro{display:none}   /* a sessão caiu com a seção de pé: a entrada não fica coberta (o precedente da manhã, 6.6/R5) */
#noticias{position:fixed;inset:0;z-index:20;overflow-y:auto;overscroll-behavior:contain;background:var(--folha);color:var(--tinta);
  padding:env(safe-area-inset-top) max(0px,calc((100% - 480px) / 2)) env(safe-area-inset-bottom)}
#noticias .n-tarja{padding:8px 16px;background:var(--folha-2);border-bottom:2px solid var(--ouro-velho);text-align:center;font:var(--t-apoio);color:var(--tinta-2)}
#noticias .n-tarja b{color:var(--tinta)}
#noticias .n-volta{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:2px 0 0 4px;padding:0 12px 0 6px;border:0;border-radius:12px;background:none;cursor:pointer;font:var(--t-apoio);color:var(--tinta-2)}
#noticias .n-volta svg{width:22px;height:22px;color:var(--toga)}
#noticias .n-cab{padding:2px 16px 10px}
#noticias .n-cab .d2{color:var(--toga)}
#noticias .n-cab .d2:focus,#noticias .detalhe h1:focus{outline:none}
#noticias .n-cab .rotulo{display:block;margin-top:6px;color:var(--tinta-2)}
#noticias .n-filtro{padding:0 16px 6px}
#noticias .pilula{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px/1 var(--f-corpo);color:var(--toga);
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);transition:transform var(--t-solta),box-shadow var(--t-solta)}
#noticias .pilula:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#noticias .pilula[aria-pressed="true"]{background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
#noticias .pilula svg{width:15px;height:15px}
#noticias .n-dia{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 16px 8px;font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--ouro-velho)}
#noticias .n-dia b{color:var(--toga);font-weight:700}
#noticias .n-dia .qtd{color:var(--tinta-2)}
#noticias .n-lista{padding:4px 16px 14px}
#noticias .item{display:block;width:100%;text-align:left;padding:14px 16px 15px;border-radius:var(--r-peca);background:var(--luz-clara);box-shadow:var(--peca-clara-1);cursor:pointer;
  transition:transform var(--t-solta),box-shadow var(--t-solta)}
#noticias .item + .item{margin-top:10px}
#noticias .item:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#noticias .item .fonte{display:flex;justify-content:space-between;align-items:center;gap:8px;font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
#noticias .item .fonte b{min-width:0;color:var(--toga);font-weight:700;overflow-wrap:anywhere}
#noticias .item .fonte .num{flex:none}
#noticias .item h4{margin-top:6px;font:var(--t-corpo-f);line-height:1.35;color:var(--tinta);overflow-wrap:anywhere}
#noticias .item h4 button{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
#noticias .item h4 button:focus-visible{outline:none}
#noticias .item:has(:focus-visible){outline:3px solid var(--toga);outline-offset:3px}
#noticias .item .rs{display:block;margin-top:8px;font:600 10.5px/1 var(--f-corpo);letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-2)}
#noticias .item p{margin-top:3px;font:var(--t-apoio);color:var(--tinta-2);overflow-wrap:anywhere}
#noticias .item .no-n{display:block;margin-top:8px;font:600 10.5px/1.3 var(--f-corpo);letter-spacing:.07em;text-transform:uppercase;color:var(--ouro-velho);overflow-wrap:anywhere}
#noticias .cod{font-style:normal;padding:3px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--ouro-velho)}
#noticias .cod.quente{background:var(--ouro-velho);color:var(--marfim);box-shadow:none}
#noticias .item .cod{font:var(--t-rotulo);letter-spacing:.06em;color:var(--ouro-velho)}
#noticias .item .cod.quente{color:var(--marfim)}
#noticias details.n-rec{margin:0 16px 14px}
#noticias details.n-rec > summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:var(--r-peca);background:var(--luz-clara);
  box-shadow:var(--peca-clara-1);cursor:pointer;transition:transform var(--t-solta),box-shadow var(--t-solta)}
#noticias details.n-rec > summary::-webkit-details-marker{display:none}
#noticias details.n-rec > summary:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#noticias details.n-rec > summary b{display:block;font:var(--t-corpo-f);font-size:15px;line-height:1.3;color:var(--toga)}
#noticias details.n-rec > summary .qtd{font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);white-space:nowrap}
#noticias details.n-rec > summary svg{width:18px;height:18px;color:var(--toga);transition:transform var(--t-solta)}
#noticias details.n-rec[open] > summary svg{transform:rotate(180deg)}
#noticias details.n-rec > .n-lista{padding:14px 0 0}
#noticias .n-nota{margin:0 16px 14px;padding:12px 14px;border-radius:var(--r-peca);box-shadow:inset 0 0 0 1.5px var(--filete);font:var(--t-apoio);color:var(--tinta-2)}
#noticias .n-nota b{display:block;font:var(--t-corpo-f);font-size:15px;line-height:1.35;color:var(--tinta)}
#noticias .n-fora{margin:0 16px 14px;overflow-wrap:anywhere}
#noticias .n-fim{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin:10px 16px 0;padding:18px 0 22px;border-top:1px solid var(--filete)}
#noticias .n-fim .d3{color:var(--toga);font-size:19px}
#noticias .n-fim .meri-lugar.mv-noticias{position:relative;width:72px;height:72px;margin-bottom:2px}
#noticias .n-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:56px 28px 64px}
#noticias .n-vazio .d3{color:var(--toga);font-size:22px}
#noticias .n-vazio-filtro{padding:0 16px 22px}
#noticias .n-vazio-filtro .d3{margin-top:8px}
#noticias .n-vazio-filtro .btn.texto{padding-left:0}
#noticias .n-carrega{display:flex;justify-content:center;padding:56px 0 64px}
#noticias .n-erro{padding:4px 16px 22px}
#noticias .sistema{display:block;width:100%;text-align:left;padding:14px 16px;border:0;border-radius:var(--r-peca);background:var(--luz-clara);box-shadow:var(--peca-clara-1),inset 3px 0 0 var(--toga);cursor:pointer;
  font:var(--t-apoio);color:var(--tinta);transition:transform var(--t-solta),box-shadow var(--t-solta)}
#noticias .sistema:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda),inset 3px 0 0 var(--toga);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
/* a notícia aberta (#s-aberta) */
#noticias .detalhe{padding:6px 16px 0;overflow-wrap:anywhere}
#noticias .detalhe > .rotulo{color:var(--tinta-2)}
#noticias .detalhe h1{margin-top:10px;font:600 22px/1.2 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em;color:var(--tinta);overflow-wrap:anywhere}
#noticias .resumo{margin-top:16px;padding:16px;border-radius:18px;background:var(--marfim);box-shadow:var(--cartao);overflow-wrap:anywhere}
#noticias .resumo .rotulo{display:block;color:var(--tinta-2);margin-bottom:8px}
#noticias .no-l{display:flex;align-items:center;gap:8px;margin-top:16px;font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--ouro-velho)}
#noticias .no-l .cod{flex:none}
#noticias .no-l span{min-width:0}
#noticias .liga{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;margin-top:16px;padding:10px 16px;text-align:left;border-radius:var(--r-peca);background:var(--luz-clara);
  box-shadow:var(--peca-clara-1);color:var(--tinta);text-decoration:none;transition:transform var(--t-solta),box-shadow var(--t-solta)}
#noticias .liga:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#noticias .liga > span{min-width:0}
#noticias .liga b{display:block;font:var(--t-corpo-f);color:var(--toga)}
#noticias .liga .apoio{overflow-wrap:anywhere}
#noticias .liga svg{flex:none;width:18px;height:18px;color:var(--toga)}
#noticias .aviso-n{margin-top:14px;font:var(--t-apoio);color:var(--tinta-2)}
#noticias .pe-acao,#noticias .sem-licao{margin:20px 16px}
/* a folha do filtro (#h-n2): regras PRÓPRIAS, presas ao id (o precedente da folha de trilha, D10) */
#filtro-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-filtro.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;display:flex;flex-direction:column;background:var(--marfim);
  border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px 18px calc(22px + env(safe-area-inset-bottom))}
#folha-filtro.folha-baixo > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
#folha-filtro.folha-baixo .alca{flex:none;width:40px;height:5px;border-radius:3px;background:var(--filete);margin:0 auto 14px}   /* 18 do mock: 14 + os 4 do respiro do `.rolo` (o flanco e o anel não são cortados) */
#folha-filtro.folha-baixo .rolo{flex:0 1 auto;min-height:0;overflow-y:auto;padding:4px 4px 10px}
#folha-filtro.folha-baixo h2{font-size:22px;color:var(--toga)}
#folha-filtro.folha-baixo .rolo > .apoio{margin-top:4px}
#folha-filtro.folha-baixo .escolha{display:flex;flex-direction:column;gap:20px;margin-top:16px}   /* #h-n2: os 10 do `gap` mais os 10 de `.item + .item` */
#folha-filtro .opcao-n{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;align-items:center;gap:10px;width:100%;min-height:60px;padding:14px 16px 15px;border:0;border-radius:var(--r-peca);text-align:left;cursor:pointer;
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);color:var(--tinta);font:inherit;transition:transform var(--t-solta),box-shadow var(--t-solta)}
#folha-filtro .opcao-n:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#folha-filtro .opcao-n[aria-checked="true"]{box-shadow:var(--peca-clara-1),0 0 0 2.5px var(--toga)}
#folha-filtro .opcao-n > span:first-child{min-width:0;overflow-wrap:anywhere}
#folha-filtro .opcao-n .fonte{display:block;font:var(--t-rotulo);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
#folha-filtro .opcao-n .fonte b{color:var(--toga);font-weight:700}
#folha-filtro .opcao-n .rot{display:block;margin-top:3px;font:var(--t-corpo-f);overflow-wrap:anywhere}
#folha-filtro .opcao-n .marcador{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--filete)}
#folha-filtro .opcao-n[aria-checked="true"] .marcador{background:var(--toga);box-shadow:none}
#folha-filtro .opcao-n[aria-checked="true"] .marcador::after{content:"";width:10px;height:6px;border:2px solid var(--marfim);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
#folha-filtro.folha-baixo .acoes{flex:none;margin-top:8px}   /* 18 do mock: 8 + os 10 do respiro de baixo do `.rolo` */
/* fim: A seção "Notícias" e a linha do Perfil (NT.5a) */

/* NT.5b · #d2-nova, #b-vista · peça CLARA, nunca toga; o fio sai dela: 40 de lado, 40 de descida (4+12+32) = 56,57 px a 45º */
.caminho .ch-vao{position:relative;margin:16px 0 12px}
.chamariz{display:grid;grid-template-columns:20px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 12px;text-align:left;font:inherit;border:0;border-radius:var(--r-peca);
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);color:var(--tinta);cursor:pointer;transition:transform var(--t-solta),box-shadow var(--t-solta)}
.chamariz:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.chamariz:focus-visible{outline:3px solid var(--toga);outline-offset:3px}
.ch-g{position:relative;display:block;width:20px;height:20px;color:var(--toga)}
.ch-g svg{display:block;width:20px;height:20px}
.ch-g::after{content:"";position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--ouro-velho);box-shadow:0 0 0 2px var(--marfim)}
.ch-t{font:700 14px/1.3 var(--f-corpo);color:var(--tinta);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ch-t i{font-style:normal;color:var(--ouro-velho)}
.ch-s{width:16px;height:16px;color:var(--toga);transform:rotate(90deg)}
.vista .ch-g{color:var(--tinta-2)}
.vista .ch-g::after{display:none}
.vista .ch-t,.vista .ch-t i{font-weight:500;color:var(--tinta-2)}
.caminho .atual:has(+ .ch-vao)::after{display:none}
.ch-vao.prox-d::after,.ch-vao.prox-e::after{content:"";position:absolute;left:calc(100% / 2);top:calc(100% + 4px);height:1.5px;width:56.57px;transform:rotate(var(--giro,45deg));transform-origin:0 0;
  background:repeating-linear-gradient(90deg,var(--filete) 0 3px,transparent 3px 8px)}
.ch-vao.prox-e{--giro:135deg}
.ch-vao.volta::after{background:var(--filete)}
.ch-vao.chega .chamariz{animation:sobe var(--t-tela) 120ms backwards}
.ch-vao.chega .ch-g::after{animation:ch-ponto var(--t-assento) 360ms backwards}
@keyframes ch-ponto{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
/* fim: NT.5b */

/* ═══ A oferta de guardar um recesso (6.7) · economia-relevo.html #e3-b, #an-* · ancorada nos ids `#recesso-veu` e `#folha-recesso` (fora do `#conteudo`); as peças são as da R.1 (`.relevo`); só `var(--…)` ═══ */
#app[hidden] ~ #recesso-veu,#app[hidden] ~ #folha-recesso{display:none}
#recesso-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-recesso.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;overflow-y:auto;background:var(--marfim);
  border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px 18px calc(22px + env(safe-area-inset-bottom));animation:sobe var(--t-tela)}
#folha-recesso > *{max-width:480px;margin-left:auto;margin-right:auto}
#folha-recesso .alca{width:40px;height:5px;border-radius:3px;background:var(--filete);margin-bottom:18px}
#folha-recesso .rotulo{color:var(--ouro-velho)}
#folha-recesso h2{margin-top:6px;font:600 24px/1.15 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em;color:var(--toga)}
#folha-recesso h2:focus{outline:none}
#folha-recesso .troca{display:flex;flex-direction:column;gap:10px;margin-top:16px;margin-bottom:16px;padding:14px 12px;border-radius:var(--r-peca);background:var(--folha)}
#folha-recesso .l1{display:flex;align-items:center;gap:12px}
#folha-recesso .l1 b{font:var(--t-corpo-f);line-height:1.5;color:var(--toga)}
#folha-recesso .vai{font:500 20px/1 var(--f-display);color:var(--ouro-velho)}
#folha-recesso .l2{font:var(--t-apoio);color:var(--tinta)}
#folha-recesso .btn.texto{margin-top:6px}
#folha-recesso .diz{margin-top:8px;color:var(--tinta)}
#folha-recesso .fichas{display:flex;align-items:center;gap:8px;margin-top:12px}
#folha-recesso .fichas + .diz{margin-top:12px}
#folha-recesso .diz + .btn,#folha-recesso .fichas + .btn{margin-top:18px}
#folha-recesso .btn.espera{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);color:var(--tinta-2);cursor:default}
/* a porta do Perfil em curso (#an-perfil-*): chapada, sem flanco, não afunda; a linha de falha é a `.letras` do cartão */
.recessos-cartao .porta.chapada,.recessos-cartao .porta.chapada:active{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);cursor:default;transform:none}
.recessos-cartao .porta.chapada b,.recessos-cartao .porta.chapada .mais{color:var(--tinta-2)}
/* fim: 6.7 */
/* ═══ A folha "Mais" (R.31) · navegacao-relevo.html #d-mais, #d-mais-320, #m1 e o bloco `css-mock` · a casca é a folha de baixo da 6.7 (`#folha-recesso`, valor por valor) e as linhas são as do mock
   (`.m-grupo`, `.m-lista`, `.m-linha`, `.m-pe`); tudo ancorado em `#mais-veu` e `#folha-mais` (fora do `#conteudo`); só `var(--…)`. A folha rola por dentro quando a lista não cabe. ═══ */
#app[hidden] ~ #mais-veu,#app[hidden] ~ #folha-mais{display:none}
#mais-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-mais.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;overflow-y:auto;background:var(--marfim);
  border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px 18px calc(22px + env(safe-area-inset-bottom));animation:sobe var(--t-tela)}
#folha-mais > *{max-width:480px;margin-left:auto;margin-right:auto}
#folha-mais .alca{width:40px;height:5px;border-radius:3px;background:var(--filete);margin-bottom:18px}
#folha-mais .m-grupo{margin-top:14px;margin-bottom:8px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
#folha-mais .alca + .m-grupo{margin-top:0}
#folha-mais .m-lista{display:flex;flex-direction:column;gap:9px}
#folha-mais .m-linha{display:grid;grid-template-columns:24px minmax(0,1fr) 12px;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;text-align:left;border:0;border-radius:var(--r-peca);
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);font:inherit;color:var(--tinta);cursor:pointer}
#folha-mais .m-linha:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#folha-mais .m-linha svg{width:24px;height:24px;color:var(--toga);stroke:currentColor;fill:none;stroke-width:1.5}
#folha-mais .m-linha b{display:block;font:700 16px/1.25 var(--f-corpo);color:var(--tinta)}
#folha-mais .m-linha small{display:block;margin-top:1px;font:500 13.5px/1.3 var(--f-corpo);color:var(--tinta-2)}
#folha-mais .m-linha .v{width:9px;height:9px;border:solid var(--toga);border-width:0 2px 2px 0;transform:rotate(-45deg)}
#folha-mais .m-pe{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin-top:6px}
/* a pílula da posse (R.6, R.8a) é um <button> que abre o Perfil (AC-11, #d360). A caixa NÃO muda (as regras da R.6 valem para a classe, não para a tag): aqui só sai o que o botão traz de fábrica,
   entra o anel de foco da casa, e o ALVO de toque de 44 px é um filho invisível centrado na pílula de 36 (os dois pseudo-elementos já são a moeda e o gesto). O título recebe o foco ao chegar no Perfil, sem anel. */
.cab > button.posse,#topo-streak > button{border:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.cab > button.posse > .alvo,#topo-streak > button > .alvo{position:absolute;left:0;right:0;top:calc(100% / 2 - 22px);height:44px}
.cab > button.posse:focus-visible,#topo-streak > button:focus-visible{outline:3px solid var(--toga);outline-offset:3px}
#titulo:focus{outline:none}
#folha-mais .m-pe .s-texto{display:flex;align-items:center;justify-content:center;width:auto;min-height:44px;margin-top:6px;color:var(--toga);font:600 14px/1.2 var(--f-corpo);text-decoration:underline;text-underline-offset:3px;text-align:center}
/* fim: R.31 */
/* ═══ Os ajustes da entrada, do "Mais" e das instruções do simulado (CONT.2) · pedido do Rodrigo de 2026-10-15 (as palavras estão na story `cont-2-…`). Nenhum componente novo, nenhuma cor nova: só `var(--…)` da casa,
   com as larguras e entrelinhas das peças que já existem (o link da entrada, o pé da folha "Mais", as regras do simulado). ═══ */
/* CONT.2 (Rodrigo, 2026-10-15): o aceite e a afiliação, sob o botão, quando o portão da política v2 abre. O aceite tem a letra e a cor dos links de hoje (`--t-apoio`, `--tinta-2`), centralizado em
   uma ou duas linhas, os dois trechos sublinhados são os links. O alvo de toque dos links é o `padding` vertical do `<a>` em linha (8px: ~33px de caixa; não muda a linha): link em frase é inline (WCAG 2.5.8), e 44px em duas linhas de 21px se atropelariam; `nowrap` no `<a>` a partir de 340px (review L2: o link não quebra no meio; a 320px o nowrap faria TRÊS linhas): o toque nunca depende de acertar 14 px de altura.
   A afiliação é menor (12px) e na mesma cor secundária, sem link. A margem de cima é a conta do link de antes (4px do botão visível). */
#tela-login .entrada-aceite{align-self:center;max-width:340px;margin:0;font:var(--t-apoio);color:var(--tinta-2);text-align:center;text-wrap:balance}
#tela-login .entrada-aceite a{padding:8px 4px;margin:0 -4px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (min-width:340px){#tela-login .entrada-aceite a{white-space:nowrap}}
#tela-login .entrada-afiliacao{align-self:center;margin:calc(var(--e3) - var(--e4)) 0 0;font:400 12px/1.4 var(--f-corpo);color:var(--tinta-2);text-align:center}
/* CONT.2: o "Sobre" é o miolo da MESMA folha (alça, `.d3`, `.apoio`, o pé `.m-pe .s-texto` da casa); aqui só as margens e o e-mail. O "Voltar" é um botão com a cara do link do pé. */
#folha-mais .m-sobre-titulo{margin:0}
#folha-mais .m-sobre-app{margin-top:6px;font:600 15px/1.3 var(--f-corpo);color:var(--tinta)}
#folha-mais .m-sobre-texto{margin-top:14px}
#folha-mais .m-sobre-contato{display:flex;flex-wrap:wrap;align-items:center;column-gap:.3em;min-height:44px;margin-top:6px}
#folha-mais .m-sobre-mail{display:inline-flex;align-items:center;min-height:44px;color:var(--toga);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#folha-mais .m-pe button.s-texto{border:0;background:none;cursor:pointer}
#folha-mais .m-sobre-voltar{margin-top:8px}
/* CONT.2 (Rodrigo, 2026-10-15): a linha discreta das instruções, menor que as regras e na cor secundária. */
.sim-linha-propria{margin:8px 0 0;font:400 13px/1.4 var(--f-corpo);color:var(--tinta-2)}
/* fim: CONT.2 */

/* ═══ O lugar do banner (6.13) · banner-relevo.html #b2, #b4, #b6a e o bloco `css-mock` (posição B). A doca é DOM nosso, entre o `#topo` e o `#hub`: a tira do rótulo e o vão que a página abre para a
   view nativa da Google. Gruda logo abaixo do cabeçalho (o `top` é a base MEDIDA do `#topo`, posta pelo app) e a tela rola por baixo dos dois. A altura do vão é `--bh`: a que o SDK informa, e 50 px até ele informar.
   Lugar vazio não leva rótulo (`.no-ar` só com o anúncio carregado e à vista). O `scroll-margin-top` do vão é só a SONDA da área segura de cima (a conta da margem da view): não muda o layout. */
.doca{--bh:50px;position:sticky;z-index:4;max-width:480px;margin:0 auto;padding-bottom:var(--e2);background:var(--folha);box-shadow:0 1px 0 var(--filete)}
.doca-tira{display:flex;align-items:center;min-height:20px;padding:3px var(--e4)}
.doca-tira .rotulo{color:var(--tinta-2);visibility:hidden}
.doca.no-ar .rotulo{visibility:visible}
.doca-vao{height:var(--bh);transform:translateY(var(--bd,0px));scroll-margin-top:env(safe-area-inset-top)}
/* sonda das áreas seguras (piso do banner, M2 de 13/10) */
.sonda-area{position:fixed;visibility:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
/* fim: 6.13 */

/* ═══ A porta do simulado (S.6) · simulado-enam.html #t1a, #t1a2, #t1a3, #t2a, #t13 · o bloco `css-mock` da prancha, SÓ com tokens. A classe do cartão NÃO é `.cartao` (a do app, acima): a prancha também a renomeou (96b0802). ═══ */
.caminho .sim-vao{position:relative;margin:0 0 14px}
.sim-porta{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px;text-align:left;border:0;border-radius:var(--r-peca);
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);font:inherit;color:var(--tinta);cursor:pointer;transition:transform var(--t-solta),box-shadow var(--t-solta)}
.sim-porta:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.sim-porta:focus-visible{outline:3px solid var(--toga);outline-offset:3px}
.sim-porta .g{width:24px;height:24px;color:var(--toga);stroke:currentColor;fill:none;stroke-width:1.5}
.sim-porta b{display:block;font:700 16px/1.25 var(--f-corpo);color:var(--tinta)}
.sim-porta small{display:block;margin-top:2px;font:500 14px/1.3 var(--f-corpo);color:var(--tinta-2)}
.sim-porta .v{width:9px;height:9px;border:solid var(--toga);border-width:0 2px 2px 0;transform:rotate(-45deg)}
.sim-porta.andando{box-shadow:var(--peca-clara-1),0 0 0 2.5px var(--toga)}
.sim-porta.andando small{color:var(--toga);font-weight:700}
/* T2 · as instruções: a página clara, sem a toga, no `#licao` de sempre (licao = null) */
#licao[data-sim] #licao-topo{display:flex}   /* o `chegada` de uma lição anterior pode ter ficado no painel escondido: aqui o ✕ aparece de qualquer jeito */
#licao[data-sim].chegada{padding-top:0}
#licao[data-sim] #licao-barra,#licao[data-sim] #licao-conta{display:none}
#licao[data-sim] #licao-corpo{padding:4px 24px 24px;max-width:480px;width:100%;margin:0 auto}
#licao[data-sim] #licao-acao{border-top:0;box-shadow:0 -10px 18px -12px rgba(var(--sombra),.30);padding:var(--e3) var(--e4) calc(var(--e4) + 2px + env(safe-area-inset-bottom))}
#licao[data-sim] #licao-primaria:enabled{position:relative;flex:none;width:100%;min-height:56px;padding:var(--e2) var(--e4);border:0;border-radius:var(--r-botao);font:var(--t-botao);
  letter-spacing:.005em;cursor:pointer;background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
#licao[data-sim] #licao-primaria:enabled:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda)}
.sim-ouro{color:var(--ouro-velho)}
#licao[data-sim] #licao-corpo h2{margin-top:6px}   /* o `style="margin-top:6px"` do h2 do quadro */
.sim-regras{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sim-regras li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;align-items:start}
.sim-regras li>i{grid-row:1 / 3;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-letra);background:var(--folha-2);box-shadow:var(--rebaixo);font:700 14px/1 var(--f-corpo);font-style:normal;color:var(--toga)}
.sim-regras b{font:700 16px/1.3 var(--f-corpo);color:var(--tinta)}
.sim-regras span{font:400 14.5px/1.4 var(--f-corpo);color:var(--tinta-2)}
.sim-placa{margin-top:14px;padding:10px 14px;border-radius:var(--r-peca);background:var(--folha-2);box-shadow:var(--rebaixo);font:500 14.5px/1.4 var(--f-corpo);color:var(--tinta)}
.sim-placa b{font-weight:700}
.sim-sob{margin-top:14px;text-align:center;font:500 14px/1.4 var(--f-corpo);color:var(--tinta-2)}
/* fim: S.6 */

/* ═══ A prova do simulado (S.7) · simulado-enam.html #t3a…#t3d, #t4a…#t4d, #t6a, #t6b, #t7, T14 · o bloco `css-mock` da prancha (`.s-*` vira `.sim-*`), SÓ com tokens. O painel é vestido pelo ATRIBUTO `data-sim`:
   "prova" é o `#licao.toga.prova` do quadro, "cartao" é o `#licao.toga.s-ct` (a toga da lição em curso, R.26, repetida aqui porque o painel não ganha classe nova). A folha da entrega vai por CLASSE. ═══ */
html:has(#licao[data-sim="prova"]:not([hidden])),html:has(#licao[data-sim="cartao"]:not([hidden])){overflow:hidden;overscroll-behavior-y:none}
#licao[data-sim="prova"] #licao-topo,#licao[data-sim="cartao"] #licao-topo{max-width:none;height:calc(60px + env(safe-area-inset-top));gap:var(--e1);padding:env(safe-area-inset-top) var(--e1) 0;background:var(--luz-sala);color:var(--folha);--foco:var(--ouro)}
#licao[data-sim="cartao"] #licao-topo{padding-right:var(--e3)}
#licao[data-sim="prova"] #licao-sair,#licao[data-sim="cartao"] #licao-sair{display:none}
#licao[data-sim="prova"] #licao-corpo,#licao[data-sim="cartao"] #licao-corpo{max-width:none;padding:20px max(var(--e4),calc(100% / 2 - 224px)) 28px}
#licao[data-sim="prova"] .no{display:block;color:var(--ouro-velho)}
#licao[data-sim="prova"] #enunciado-q{max-width:none;margin:var(--e3) 0 20px}
#licao[data-sim="prova"] #licao-acao,#licao[data-sim="cartao"] #licao-acao{max-width:none;border-top:1px solid var(--filete);padding:var(--e3) max(var(--e4),calc(100% / 2 - 224px)) calc(var(--e4) + 2px + env(safe-area-inset-bottom))}
#licao[data-sim="prova"] #licao-acao{display:flex;align-items:flex-start;gap:var(--e2)}
#licao[data-sim="prova"] #licao-acao #licao-primaria:enabled{flex:1;min-width:0}   /* `:enabled`: guarda ㉙ do testes_trilha (R.11) */
#licao[data-sim="cartao"] #licao-acao{display:flex;flex-direction:column;gap:14px}
.sim-tb{flex:none;display:inline-grid;place-items:center;grid-auto-flow:column;gap:6px;min-width:48px;height:48px;padding:0 8px;border:0;background:none;color:inherit;cursor:pointer;font:700 14px/1 var(--f-corpo);font-variant-numeric:tabular-nums}
.sim-tb .sim-pausa{width:14px;height:18px;border:solid currentColor;border-width:0 5px}
.sim-tb .sim-grade{width:18px;height:18px;background:
  linear-gradient(currentColor,currentColor) 0 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 6.5px 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 13px 0/5px 5px no-repeat,
  linear-gradient(currentColor,currentColor) 0 6.5px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 6.5px 6.5px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 13px 6.5px/5px 5px no-repeat,
  linear-gradient(currentColor,currentColor) 0 13px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 6.5px 13px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 13px 13px/5px 5px no-repeat}
.sim-tb .x{font:400 22px/1 var(--f-corpo)}
.sim-relogio{margin:0 auto;display:inline-flex;align-items:baseline;gap:1px;min-height:44px;padding:11px 16px 0;border:0;border-radius:999px;background:var(--toga-flanco);box-shadow:var(--rebaixo);
  color:var(--marfim);font:700 22px/1 var(--f-corpo);font-variant-numeric:tabular-nums;letter-spacing:.01em;cursor:pointer}
.sim-relogio small{font:700 13px/1 var(--f-corpo);color:var(--folha-70);margin-right:6px}
.sim-relogio small:last-child{margin-right:0}
.sim-relogio.oculto{align-items:center;padding-top:0;font:700 14px/1 var(--f-corpo);color:var(--folha-70);gap:8px}
.sim-relogio .rel{flex:none;width:18px;height:18px;border-radius:999px;box-shadow:inset 0 0 0 2px currentColor;position:relative}
.sim-relogio .rel::before{content:"";position:absolute;left:8px;top:4px;width:2px;height:6px;background:currentColor}
.sim-relogio .rel::after{content:"";position:absolute;left:8px;top:8px;width:5px;height:2px;background:currentColor}
.sim-relogio.pouco{box-shadow:var(--rebaixo),0 0 0 2px var(--ouro)}
.sim-relogio.fim{background:var(--luz-clara);color:var(--toga);box-shadow:0 0 0 2px var(--ouro)}
.sim-relogio.fim small{color:var(--toga)}
.sim-aviso{display:flex;align-items:center;gap:10px;margin:-8px 0 14px;padding:12px 14px;border-radius:var(--r-peca);background:var(--marfim);box-shadow:var(--amb-1),inset 3px 0 0 var(--ouro-velho);font:600 15px/1.35 var(--f-corpo);color:var(--tinta)}
.sim-aviso b{font-weight:700;color:var(--toga)}
.sim-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--e3);min-height:20px}
.sim-linha .rotulo{color:var(--ouro-velho)}
.sim-marca{display:inline-flex;align-items:center;gap:6px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--toga);white-space:nowrap}
.sim-flag{flex:none;position:relative;width:13px;height:16px;border-left:2px solid currentColor}
.sim-flag::after{content:"";position:absolute;left:0;top:0;width:10px;height:9px;box-shadow:inset 0 0 0 1.5px currentColor}
.sim-marca .sim-flag::after,.sim-peca[aria-pressed="true"] .sim-flag::after{background:currentColor}
.sim-peca{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 14px;border:0;border-radius:var(--r-botao);background:var(--luz-clara);color:var(--toga);
  box-shadow:var(--peca-clara-2);font:700 15px/1 var(--f-corpo);cursor:pointer}
.sim-peca.sim-ant{width:56px;padding:0}
.sim-peca.sim-ant::before{content:"";width:10px;height:10px;margin-left:4px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:rotate(45deg)}
.sim-peca[aria-pressed="true"]{transform:translateY(4px);box-shadow:var(--peca-clara-2-afunda),0 0 0 2.5px var(--toga)}
.sim-peca[disabled]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);color:var(--filete);cursor:default}
.sim-peca.sim-larga{display:flex;width:100%}
.sim-toga{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:var(--e2) var(--e4);border:0;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;cursor:pointer;
  background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
/* T6 · o cartão-resposta */
#licao[data-sim="cartao"] #licao-topo h2{flex:1;font:600 20px/1.2 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em}
#licao[data-sim="cartao"] .sim-relogio{margin:0;min-height:44px;padding:12px 12px 0;font-size:18px}
.sim-soma{font:600 15px/1.4 var(--f-corpo);color:var(--tinta)}
.sim-leg{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 4px;font:500 13.5px/1.2 var(--f-corpo);color:var(--tinta-2)}
.sim-leg span{display:inline-flex;align-items:center;gap:6px}
.sim-leg .sim-cel{width:20px;min-height:20px;height:20px;margin:0;border-radius:5px;box-shadow:none}
.sim-leg .sim-cel.resp{box-shadow:none}
.sim-leg .sim-cel.rev::after{width:9px;height:9px}
.sim-grupo{margin-top:20px}
.sim-grupo>p{display:flex;justify-content:space-between;gap:var(--e2);margin-bottom:10px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
.sim-grupo>p span{color:var(--tinta-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px 8px}
.sim-cel{position:relative;display:grid;place-items:center;min-height:44px;border:0;border-radius:var(--r-controle);font:700 15px/1 var(--f-corpo);font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden}
.sim-cel.resp{background:var(--luz-toga);color:var(--marfim);box-shadow:0 3px 0 var(--toga-flanco);margin-bottom:3px}
.sim-cel.branco{background:var(--folha-2);color:var(--tinta-2);box-shadow:var(--rebaixo);margin-bottom:3px}
.sim-cel.rev::after{content:"";position:absolute;top:0;right:0;width:15px;height:15px;background:var(--ouro-velho);clip-path:polygon(0 0,100% 0,100% 100%)}
.sim-cel.resp.rev::after{background:var(--ouro)}
.sim-cel.aqui{overflow:visible;outline:2.5px solid var(--toga);outline-offset:3px}
/* T7 · a folha da entrega: a casca da folha de baixo da 6.7 (`#folha-recesso`, valor por valor), por classe */
#app[hidden] ~ .sim-veu,#app[hidden] ~ .sim-folha{display:none}
.sim-veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
.sim-folha{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;overflow-y:auto;background:var(--marfim);
  border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px 18px calc(22px + env(safe-area-inset-bottom))}
.sim-folha > *{max-width:480px;margin-left:auto;margin-right:auto}
.sim-folha .alca{width:40px;height:5px;border-radius:3px;background:var(--filete);margin-bottom:18px}
.sim-folha .rotulo{color:var(--ouro-velho)}
.sim-folha h2{margin-top:6px;font:600 24px/1.15 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em;color:var(--toga)}
.sim-folha h2:focus{outline:none}
.sim-fatos{list-style:none;margin:14px 0 18px;display:flex;flex-direction:column}
.sim-fatos li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);padding:11px 0;border-top:1px solid var(--filete);font:500 15.5px/1.35 var(--f-corpo);color:var(--tinta)}
.sim-fatos li:first-child{border-top:0}
.sim-fatos b{font:600 20px/1 var(--f-display);font-variation-settings:var(--fv-display);color:var(--toga);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-fatos small{display:block;font:400 13.5px/1.35 var(--f-corpo);color:var(--tinta-2)}
.sim-pilha{display:flex;flex-direction:column;gap:14px}
/* o ícone do relógio escondido é um círculo: a prancha diz metade da caixa (em por cento), aqui `999px` (o MESMO círculo num quadrado de 18 px), porque o teto dessa porcentagem no style.css está esgotado (testes_meri_onde CSS⑪) */
/* fim: S.7 */

/* ═══ A pausa, a retomada e o tempo esgotado do simulado (S.8) · simulado-enam.html #t5a, #t12a, #t12b, #t8, T14 · o bloco `css-mock` da prancha (`.s-*` vira `.sim-*`), SÓ com tokens. O painel é vestido
   pelo ATRIBUTO `data-sim` ("pausa", "retomada", "esgotado", "entregue7"), páginas claras sem a toga: o topo vazio (sem ✕: sair é pausar), o miolo centrado (`.s-centro`), o pé sem sombra (`.livre`). ═══ */
#licao[data-sim="pausa"] #licao-topo,#licao[data-sim="retomada"] #licao-topo,#licao[data-sim="esgotado"] #licao-topo,#licao[data-sim="entregue7"] #licao-topo{display:none}   /* os quadros não têm topo: sem ✕ (sair é pausar), e o miolo começa na área segura */
#licao[data-sim="pausa"] #licao-corpo,#licao[data-sim="retomada"] #licao-corpo,#licao[data-sim="esgotado"] #licao-corpo,#licao[data-sim="entregue7"] #licao-corpo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background-image:radial-gradient(ellipse 90% 50.0% at center 30%,var(--marfim) 0%,var(--folha) 70%)}   /* o respiro é o do S.6 (4px 24px 24px): no quadro, o `#licao.s-clara #licao-corpo` vence o `#licao.s-clara .s-centro` (medido) */
#licao[data-sim="pausa"] #licao-acao,#licao[data-sim="retomada"] #licao-acao,#licao[data-sim="esgotado"] #licao-acao,#licao[data-sim="entregue7"] #licao-acao{box-shadow:none}
.meri-lugar.mv-pausa{width:132px;height:132px;flex:none}
#licao[data-sim="pausa"] #licao-corpo h2,#licao[data-sim="retomada"] #licao-corpo h2,#licao[data-sim="esgotado"] #licao-corpo h2,#licao[data-sim="entregue7"] #licao-corpo h2{margin-top:10px;font:600 32px/1.08 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.02em;color:var(--toga)}
#licao[data-sim="esgotado"] #licao-corpo h2,#licao[data-sim="entregue7"] #licao-corpo h2{margin-top:0}   /* o `style="margin-top:0"` do h2 do t8 e do t12b (sem a Meri em cima) */
.sim-fala{margin-top:10px;max-width:27ch;font:500 17px/1.4 var(--f-corpo);color:var(--tinta)}
.sim-parado{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 22px 16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
.sim-parado small{font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.sim-parado b{font:600 40px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.02em;color:var(--toga);font-variant-numeric:tabular-nums}
.sim-conta{margin-top:16px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
.sim-texto{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;background:none;color:var(--toga);font:700 15px/1.2 var(--f-corpo);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* fim: S.8 */

/* ═══ O resultado, o cartão corrigido e a questão corrigida do simulado (S.9) · simulado-enam.html #t9a…#t9c, #t10a…#t10d, T14 · o bloco `css-mock` da prancha (`.s-*` vira `.sim-*`), SÓ com tokens. O painel é vestido pelo
   ATRIBUTO `data-sim` ("resultado", "correcao-cartao", "correcao"): sem classe nova no painel. Sem a meia porcentagem literal (o teto do style.css está esgotado): a meia medida é `100% / 2`. A faixa do veredito é a da lição (`#licao .faixa`). ═══ */
html:has(#licao[data-sim="resultado"]:not([hidden])),html:has(#licao[data-sim="correcao-cartao"]:not([hidden])),html:has(#licao[data-sim="correcao"]:not([hidden])){overflow:hidden;overscroll-behavior-y:none}
/* T9 · o resultado: sem topo, o miolo começa na área segura, o pé com a sombra para cima */
#licao[data-sim="resultado"] #licao-topo{display:none}
#licao[data-sim="resultado"]{padding-top:env(safe-area-inset-top)}   /* sem topo, a área segura de cima fica no painel (como a `chegada`): o miolo não a reserva (guarda R.19①) */
#licao[data-sim="resultado"]{background-image:radial-gradient(ellipse 110% 300px at center 150px,var(--marfim) 0%,var(--folha) 70%);background-repeat:no-repeat}   /* o fundo do quadro mora no miolo; aqui mora no painel (a guarda R.19① proíbe `env()` no miolo), com o mesmo centro a 150 px do topo */
#licao[data-sim="resultado"] #licao-corpo{padding:12px 20px 28px}
#licao[data-sim="resultado"] #licao-acao{border-top:0;box-shadow:0 -10px 18px -12px rgba(var(--sombra),.30);padding:var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom))}
#licao[data-sim="resultado"] .sim-texto{margin-top:8px}
.meri-lugar.mv-resultado{width:96px;height:96px;flex:none}
.sim-heroi{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:end;gap:8px}
.sim-nota{font:600 64px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.03em;color:var(--toga);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-nota:focus{outline:none}
.sim-nota small{font:600 26px/1 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em;color:var(--tinta)}
.sim-ver{display:flex;align-items:center;gap:10px;margin-top:14px;font:700 18px/1.25 var(--f-corpo);color:var(--tinta)}
.sim-ver .ok{flex:none;position:relative;width:28px;height:28px;border-radius:var(--r-selo);background:var(--toga);box-shadow:inset 0 0 0 2px var(--ouro),0 2px 0 var(--toga-flanco)}
.sim-ver .ok::before{content:"";position:absolute;inset:-8% 0 0;margin:auto;width:30%;height:52%;border:solid var(--ouro);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.sim-ver .nao{flex:none;position:relative;width:28px;height:28px;border-radius:var(--r-selo);box-shadow:inset 0 0 0 2px var(--tinta)}
.sim-ver .nao::before{content:"";position:absolute;left:7px;right:7px;top:13px;height:2px;background:var(--tinta)}
.sim-regua{position:relative;height:16px;margin:46px 4px 62px;border-radius:999px;background:var(--folha-2);box-shadow:var(--rebaixo)}
.sim-regua>i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--luz-toga)}
.sim-regua .marca{position:absolute;top:-9px;bottom:-9px;width:2px;margin-left:-1px;background:var(--tinta)}
.sim-regua .marca span{position:absolute;top:calc(100% + 4px);left:calc(100% / 2);transform:translateX(calc(100% / -2));text-align:center;white-space:nowrap;font:500 12.5px/1.25 var(--f-corpo);color:var(--tinta-2)}
.sim-regua .marca span b{display:block;font:700 14px/1.2 var(--f-corpo);color:var(--tinta)}
/* o balão fica sobre a ponta da nota e PRENDE nas bordas: com 0 ou 80 acertos ele não vaza da tela (`--p` é a posição da ponta, escrita pelo app) */
.sim-regua .ela{position:absolute;bottom:calc(100% + 8px);left:clamp(36px,var(--p,0px),calc(100% - 36px));transform:translateX(calc(100% / -2));padding:5px 9px;border-radius:var(--r-letra);background:var(--toga);color:var(--marfim);font:700 13px/1 var(--f-corpo);white-space:nowrap}
.sim-regua .ela::after{content:"";position:absolute;left:calc(100% / 2);top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--toga);border-bottom:0}
.sim-h{margin:26px 0 10px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
#licao[data-sim="resultado"] .sim-regua + .sim-h{margin-top:0}
.sim-cartao{padding:6px 16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
.sim-disc{padding:11px 0;border-top:1px solid var(--filete)}
.sim-disc:first-child{border-top:0}
.sim-disc p{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e2);font:600 15px/1.3 var(--f-corpo);color:var(--tinta)}
.sim-disc p b{font:700 15px/1.3 var(--f-corpo);color:var(--toga);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-disc .t{position:relative;height:8px;margin-top:7px;border-radius:999px;background:var(--folha-2);box-shadow:var(--rebaixo)}
.sim-disc .t i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--luz-toga)}
.sim-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sim-nums div{display:flex;flex-direction:column;min-width:0;padding:12px;border-radius:16px;background:var(--marfim);box-shadow:var(--cartao)}
.sim-nums b{font:600 24px/1 var(--f-display);font-variation-settings:var(--fv-display);color:var(--toga);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-nums span{margin-top:6px;font:600 12px/1.25 var(--f-corpo);color:var(--tinta-2)}
.sim-vistas{padding:14px 16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao);font:400 15px/1.5 var(--f-corpo);color:var(--tinta)}
.sim-vistas b{font-weight:700}
.sim-honesto{margin:22px 2px 0;padding-left:12px;border-left:3px solid var(--toga);font:500 15px/1.5 var(--f-corpo);color:var(--tinta)}
/* T10 · a correção: o topo e o miolo como os da prova (a toga da lição em curso), a faixa da lição embaixo */
#licao[data-sim="correcao-cartao"] #licao-topo,#licao[data-sim="correcao"] #licao-topo{max-width:none;height:calc(60px + env(safe-area-inset-top));gap:var(--e1);padding:env(safe-area-inset-top) var(--e3) 0 var(--e1);background:var(--luz-sala);color:var(--folha);--foco:var(--ouro)}
#licao[data-sim="correcao-cartao"] #licao-sair,#licao[data-sim="correcao"] #licao-sair{display:none}
#licao[data-sim="correcao-cartao"] #licao-topo h2{flex:1;font:600 20px/1.2 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em}
#licao[data-sim="correcao"] #licao-topo h2{flex:1;font:600 18px/1.2 var(--f-display);font-variation-settings:var(--fv-display)}
#licao[data-sim="correcao-cartao"] #licao-corpo,#licao[data-sim="correcao"] #licao-corpo{max-width:none;padding:20px max(var(--e4),calc(100% / 2 - 224px)) 28px}
#licao[data-sim="correcao"] .no{display:block;color:var(--ouro-velho)}
#licao[data-sim="correcao"] #enunciado-q{max-width:none;margin:var(--e3) 0 20px}
#licao[data-sim="correcao-cartao"] #licao-acao{max-width:none;border-top:1px solid var(--filete);padding:var(--e3) max(var(--e4),calc(100% / 2 - 224px)) calc(var(--e4) + 2px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.sim-tempo{margin-top:2px;font:500 13px/1.3 var(--f-corpo);color:var(--tinta-2)}
.sim-cel.certa{background:var(--luz-toga);color:var(--marfim);box-shadow:0 3px 0 var(--toga-flanco);margin-bottom:3px}
.sim-cel.errada{background:var(--marfim);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta);margin-bottom:3px}
.sim-cel.errada::before{content:"";position:absolute;inset:0;margin:auto;width:1.5px;height:calc(100% * 3 / 2);background:var(--tinta);opacity:.3;transform:rotate(45deg)}
.sim-cel.vazia{background:transparent;color:var(--tinta-2);border:1.5px dashed var(--tinta-2);margin-bottom:3px}
/* a célula fora do filtro: chapada, no bloco da S.11 (x4b). Antes: `.sim-cel.fora{opacity:.35}` */
.sim-filtros{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.sim-filtros button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--luz-clara);box-shadow:var(--peca-clara-1);font:700 14px/1 var(--f-corpo);color:var(--toga);cursor:pointer}
.sim-filtros button[aria-pressed="true"]{background:var(--luz-toga);color:var(--marfim);box-shadow:0 4px 0 var(--toga-flanco)}
/* fim: S.9 */

/* ═══ As lacunas do simulado (S.11, PARTE A) · simulado-lacunas.html #x1a…#x1d, #x2a…#x2c, #x3a, #x3m, #x3c…#x3e, #x5a · o bloco "lacunas" do `css-mock` da prancha (`.s-*` vira `.sim-*`), SÓ com tokens ═══ */
/* x1 · a falha ao começar: o erro de sistema do DESIGN §2.4 (folha-2, filete toga de 3 px à esquerda, sem ícone), no pé, acima do botão; o botão afundado do "Montando…" */
.sim-erro{margin:0 0 12px;padding:12px 14px;border-radius:var(--r-superficie);background:var(--folha-2);border-left:3px solid var(--toga);font:700 15.5px/1.35 var(--f-corpo);color:var(--tinta)}
.sim-erro span{display:block;margin-top:4px;font:var(--t-apoio);color:var(--tinta-2)}
#licao[data-sim="instrucoes"] #licao-primaria[disabled]{position:relative;flex:none;width:100%;min-height:56px;padding:var(--e2) var(--e4);border:0;border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;
  background:var(--folha-2);color:var(--tinta-2);box-shadow:var(--rebaixo);cursor:default}
/* x2 · "Outro simulado" no fim do resultado: um cartão marfim com a peça clara de 56 */
.sim-outro{margin-top:24px;padding:14px 16px 16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
.sim-outro .sim-outro-t{font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
.sim-outro p{margin:6px 0 14px;font:400 15px/1.5 var(--f-corpo);color:var(--tinta)}
.sim-outro .sim-placa{margin:0;font:500 14.5px/1.4 var(--f-corpo)}
/* x3 · o cadeado (o da porta, t11b) no cartão da Trilha e na linha do "Mais" */
.sim-porta .cad,.m-linha .cad{width:16px;height:18px;position:relative;flex:none}
.sim-porta .cad::before,.m-linha .cad::before{content:"";position:absolute;left:3px;top:0;width:10px;height:9px;border:2px solid var(--tinta-2);border-bottom:0;border-radius:6px 6px 0 0}
.sim-porta .cad::after,.m-linha .cad::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;border-radius:var(--r-marca);background:var(--tinta-2)}
/* x3c, x3d, x3e · a folha do travado: a casca da folha da entrega (`.sim-folha`), com as peças daqui (filhas diretas: a folha da entrega não as tem) */
.sim-folha > .sim-corpo{margin:10px 0 18px;font:400 15.5px/1.5 var(--f-corpo);color:var(--tinta-2)}
.sim-folha > .sim-placa{margin:0 0 14px;text-align:center;font-weight:600}
.sim-folha > .sim-ja{margin:0 0 14px;font:400 14.5px/1.45 var(--f-corpo);color:var(--tinta-2)}
.sim-folha > .sim-texto{margin-top:2px}
/* x4b · fora do filtro a célula fica CHAPADA (a .peca.chapada do app): sem enchimento e sem relevo, contorno filete, número em tinta-2 (6,7 : 1); as erradas ficam em pé; continua tocável
   (antes, no bloco da S.9: `.sim-cel.fora{opacity:.35}`, o x4a: 2,1 : 1 e 1,7 : 1, abaixo do mínimo de 4,5) */
.sim-cel.fora:not(.errada){background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--filete);color:var(--tinta-2);margin-bottom:3px}
.sim-cel.fora:not(.errada)::before{content:none}
/* x5a · a faixa de gravação: a faixa da prova (t4c) com o filete de erro de sistema em vez do ouro */
.sim-aviso.falha{box-shadow:var(--amb-1),inset 3px 0 0 var(--toga);margin:0 0 14px}
/* fim: S.11 */
/* ═══ CONT.1, Parte B: a FONTE de cada questão e a questão RETIRADA · prancha `mocks/fonte-e-aviso.html` (Massimo, e525f17), aprovada pelo Rodrigo em 2026-10-15: "Aprovo a fonte"
   A fonte (quadros L1 a L8, P1, C1): uma linha de apoio logo abaixo do rótulo, antes do enunciado, 14 px `tinta-2` (6,7 : 1 sobre folha). Nunca reticências: quebra inteira (L6, L7).
   A lista de erros (E2): a fonte numa linha própria, o "errada…" embaixo. A retirada (R1 a R3): um cartão de papel no lugar da questão, com um ícone de traço e duas frases.
   O círculo de 32 px é `border-radius:16px` e o traço fica a 15 px do topo (a prancha escreve a metade em porcentagem; o mesmo desenho em px, e o teto de porcentagens do `testes_trilha` ⑭ não anda). */
/* a linha de 19,6 px ocupa uma caixa de 20 px (min-height): a folga da faixa da R.26 conta em px inteiros (`offsetHeight`), e uma fonte fracionária roubava 0,6 px da folga
   da última alternativa (medido: `R26-AC6` 15,39 < 15,5); a diferença para o quadro L1 (0,4 px) fica dentro dos ±0,5 px da casa */
#licao .fonte{margin-top:6px;min-height:20px;font:400 14px/1.4 var(--f-corpo);color:var(--tinta-2);overflow-wrap:anywhere}
/* na prova e na correção o rótulo mora na `.sim-linha` (20 px de altura mínima, o rótulo de 14,4 px centrado nela): 2,8 px a menos, para a fonte e o cartão ficarem à distância do RÓTULO que os quadros P1, C1, R1 e R2 medem (6 e 16 px) */
#licao .sim-linha+.fonte{margin-top:3.2px}
#licao .sim-linha+.retirada{margin-top:13.2px}
ol.erros .meta-f{font:400 12.5px/1.4 var(--f-corpo);color:var(--tinta-2);overflow-wrap:anywhere}
ol.erros .meta-f+.meta{margin-top:0}
#licao .retirada{margin-top:16px;padding:20px 18px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
#licao .ret-ico{display:block;width:32px;height:32px;margin-bottom:12px;border-radius:16px;box-shadow:inset 0 0 0 2px var(--tinta-2);position:relative}
#licao .ret-ico::after{content:"";position:absolute;left:9px;right:9px;top:15px;height:2px;background:var(--tinta-2)}
#licao .ret-t{font:600 17px/1.35 var(--f-corpo);color:var(--tinta)}
#licao .ret-a{margin-top:6px;font:400 14px/1.5 var(--f-corpo);color:var(--tinta-2)}
/* fim: CONT.1, Parte B */

/* ═══ A tela da assinatura e "Minhas compras" (6.16 + M.6, telas) · assinatura-prepago.html (aprovada em 16/10) e navegacao-relevo.html §5 · só `var(--…)`, nenhuma cor nova ═══
   ACHADO DA PRANCHA (registrado, a confirmar pelo Rodrigo): no `<style>` do mock os botões `s-toga`, `s-clara` e `s-texto` pedem `font:var(--t-botao)` (17px/700), `700 16px` e `700 15px`, mas a regra do andaime `.fone button{font:inherit}`
   é MAIS específica e vence: o que o Rodrigo APROVOU (as capturas) são botões na fonte HERDADA (16px/400). Segui o aprovado: nenhuma das três regras abaixo declara `font`. Trocar para a intenção do `<style>` é UMA linha em cada regra.
   Tela cheia FORA do `#app` (que sai da vista: nunca só coberto). As medidas de TEXTO passam por `--k` (1px aqui; o instrumento o sobe a 1.3px para provar a letra a 130%); caixas e alvos ficam.
   O marcador dos benefícios é o FILETE de ouro (a segunda recomendação do Massimo; o sinete não tem lugar aqui, DESIGN §6.4). As peças que se tocam têm espessura (`s-toga` 6 px, `s-clara` 4-6 px, o cartão
   de plano 5 px); a régua e o andamento são leitura (chapados, sem flanco). */
body.com-assinatura #app{visibility:hidden}
#app[hidden] ~ #assinatura,#app[hidden] ~ #restaurar-veu,#app[hidden] ~ #folha-restaurar{display:none}
#assinatura[hidden]{display:none}
#assinatura{--k:1px;position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:var(--folha);color:var(--tinta);padding:env(safe-area-inset-top) max(0px,calc((100% - 480px) / 2)) env(safe-area-inset-bottom)}
#assinatura button{border:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
#folha-restaurar button{border:0;cursor:pointer;-webkit-appearance:none;appearance:none}   /* sem `font:inherit`: o r2 a r5 são de navegacao-relevo.html, que NÃO tem a regra do andaime da prancha do pré-pago (review M3) */
#assinatura :focus-visible,#folha-restaurar :focus-visible{outline:3px solid var(--toga);outline-offset:3px}
#assinatura h1:focus,#assinatura h2:focus,#folha-restaurar h2:focus{outline:none}
#assinatura .rotulo{font:var(--t-rotulo);text-transform:uppercase;letter-spacing:.08em}
#assinatura .as-topo{flex:none;display:flex;align-items:center;gap:2px;min-height:52px;padding:0 6px}
#assinatura .as-x{flex:none;width:48px;height:48px;display:grid;place-items:center;background:none;color:var(--toga)}
#assinatura .as-x svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
#assinatura .as-topo h1{font:600 calc(20 * var(--k))/1.2 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em;color:var(--toga)}
#assinatura .as-corpo{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:2px 20px 16px}
#assinatura .as-corpo > .rotulo{color:var(--ouro-velho)}
#assinatura .as-h{margin-top:8px;font:600 calc(26 * var(--k))/1.15 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em;color:var(--toga)}
#assinatura .as-benef{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
#assinatura .as-benef li{padding-left:16px;position:relative;font:var(--t-corpo);line-height:1.4}
#assinatura .as-benef li::before{content:"";position:absolute;left:0;top:4px;height:14px;width:2px;border-radius:1px;background:var(--ouro-velho)}
#assinatura .as-benef li.novo b{color:var(--toga)}
#assinatura .as-nao{margin-top:14px;padding:12px 14px;background:var(--folha-2);border-radius:var(--r-peca);box-shadow:var(--rebaixo);font:var(--t-apoio);color:var(--tinta)}
#assinatura .as-planos{display:flex;flex-direction:column;gap:12px;margin-top:6px}
#assinatura .as-grupo{margin-top:16px;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
#assinatura .as-grupo span{color:var(--tinta-2);letter-spacing:.04em}
#assinatura .as-plano{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 16px;text-align:left;color:var(--tinta);
  border-radius:var(--r-folha-baixo);background:var(--luz-clara);box-shadow:var(--peca-clara-2);transition:transform var(--t-solta),box-shadow var(--t-solta)}
#assinatura .as-plano:active{transform:translateY(5px);box-shadow:var(--peca-clara-2-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
#assinatura .as-plano[aria-checked="true"]{box-shadow:var(--peca-clara-2),0 0 0 2.5px var(--toga)}
#assinatura .as-plano .marcador{width:26px;height:26px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--filete);display:grid;place-items:center}
#assinatura .as-plano[aria-checked="true"] .marcador{background:var(--toga);box-shadow:none}
#assinatura .as-plano[aria-checked="true"] .marcador::after{content:"";width:10px;height:6px;border:2px solid var(--marfim);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
#assinatura .as-plano b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:var(--t-corpo-f);color:var(--tinta)}
#assinatura .as-plano .apoio{display:block;font:var(--t-apoio);color:var(--tinta-2)}
#assinatura .as-plano .preco{font:600 calc(20 * var(--k))/1 var(--f-display);font-variation-settings:var(--fv-display);color:var(--toga);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
#assinatura .as-plano .preco small{display:block;font:var(--t-rotulo);color:var(--tinta-2);margin-top:5px;letter-spacing:.02em}
#assinatura .as-plano[disabled]{cursor:default;background:var(--marfim);box-shadow:inset 0 0 0 1.5px var(--filete)}
#assinatura .as-plano[disabled] .preco{color:var(--tinta-2)}
#assinatura .as-marca{display:inline-block;font:700 calc(10 * var(--k))/1 var(--f-corpo);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:6px;background:var(--ouro-velho);color:var(--marfim);max-width:100%;line-height:1.15}
#assinatura .as-pe{flex:none;padding:12px 18px 8px;background:var(--folha);box-shadow:0 -10px 18px -12px rgba(var(--sombra),.30)}
#assinatura .as-pe .apoio{margin-top:8px;text-align:center;font:var(--t-apoio);color:var(--tinta-2)}
#assinatura .s-toga,#folha-restaurar .s-toga{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:var(--e2) var(--e4);border-radius:var(--r-botao);letter-spacing:.005em;
  background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2);text-align:center}
#assinatura .s-toga:active,#folha-restaurar .s-toga:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda)}
#assinatura .s-toga[disabled]{box-shadow:none;opacity:.55;cursor:default}
#assinatura .s-clara,#folha-restaurar .s-clara{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:var(--e2) var(--e4);border-radius:var(--r-botao);background:var(--luz-clara);color:var(--toga);
  box-shadow:var(--peca-clara-2);text-align:center}
#assinatura .s-clara:active,#folha-restaurar .s-clara:active{transform:translateY(5px);box-shadow:var(--peca-clara-2-afunda)}
#assinatura .s-texto,#folha-restaurar .s-texto{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;background:none;color:var(--toga);text-decoration:underline;text-underline-offset:3px;text-align:center}
#assinatura .s-placa{margin-top:14px;padding:12px 14px;border-radius:var(--r-peca);background:var(--folha-2);box-shadow:var(--rebaixo);font:500 calc(15 * var(--k))/1.4 var(--f-corpo);color:var(--tinta)}
#assinatura .s-placa b{font-weight:700}
#assinatura .s-placa.aviso{border-left:3px solid var(--ouro-velho)}
#assinatura .as-cartao{margin-top:12px;padding:16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
#assinatura .as-cartao > .rotulo{color:var(--ouro-velho)}
#assinatura .as-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
#assinatura .as-nome{font:600 calc(32 * var(--k))/1.05 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.02em;color:var(--toga)}
#assinatura .as-estado{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:var(--r-letra);font:700 calc(12 * var(--k))/1.1 var(--f-corpo);letter-spacing:.06em;text-transform:uppercase}
#assinatura .as-estado.ok{background:var(--toga);color:var(--marfim)}
#assinatura .as-estado.ouro{background:var(--ouro-velho);color:var(--marfim)}
#assinatura .as-estado.at{box-shadow:inset 0 0 0 1.5px var(--tinta);color:var(--tinta)}
#assinatura .as-fato{margin-top:10px;font:500 calc(16 * var(--k))/1.45 var(--f-corpo);color:var(--tinta)}
#assinatura .as-fato b{font-weight:700}
#assinatura .as-cartao .s-clara,#assinatura .as-cartao .s-toga{margin-top:16px}
#assinatura .as-sob{margin-top:10px;text-align:center;font:var(--t-apoio);color:var(--tinta-2)}
#assinatura .as-sec{margin:26px 0 0;font:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ouro-velho)}
#assinatura .as-nota{margin-top:12px;font:400 calc(14.5 * var(--k))/1.45 var(--f-corpo);color:var(--tinta-2)}
#assinatura .as-nota b{color:var(--tinta);font-weight:700}
#assinatura .regua30{margin-top:14px}
#assinatura .regua30 .trilho{display:flex;height:12px;border-radius:999px;background:var(--folha-2);box-shadow:var(--rebaixo);overflow:hidden}
#assinatura .regua30 .agora{flex:30;background:var(--luz-toga)}
#assinatura .regua30 .soma{flex:30;background:repeating-linear-gradient(135deg,var(--filete) 0 6px,var(--folha-2) 6px 12px);border-left:2px solid var(--marfim)}
#assinatura .regua30 .datas{display:flex;justify-content:space-between;margin-top:6px;font:600 calc(12.5 * var(--k))/1.3 var(--f-corpo);color:var(--tinta-2);font-variant-numeric:tabular-nums}
#assinatura .regua30 .datas b{color:var(--toga)}
#assinatura .as-vai{margin-top:18px}
/* margens que a prancha escreve em linha (`style="margin-top:…"`): por atributo, nunca por estilo escrito em JS */
#assinatura [data-m="4"]{margin-top:4px}
#assinatura [data-m="10"]{margin-top:10px}
#assinatura [data-m="16"]{margin-top:16px}
#assinatura [data-m="18"]{margin-top:18px}
#assinatura .m-linha{display:grid;grid-template-columns:24px minmax(0,1fr) 12px;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;text-align:left;border-radius:var(--r-peca);
  background:var(--luz-clara);box-shadow:var(--peca-clara-1);color:var(--tinta)}
#assinatura .m-linha svg{width:24px;height:24px;color:var(--toga);stroke:currentColor;fill:none;stroke-width:1.5}
#assinatura .m-linha b{display:block;font:700 calc(16 * var(--k))/1.25 var(--f-corpo);color:var(--tinta)}
#assinatura .m-linha small{display:block;margin-top:1px;font:500 calc(13.5 * var(--k))/1.3 var(--f-corpo);color:var(--tinta-2)}
#assinatura .m-linha .v{width:9px;height:9px;border:solid var(--toga);border-width:0 2px 2px 0;transform:rotate(-45deg)}
#assinatura .mc{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
#assinatura .mc li{padding:14px 16px;border-radius:var(--r-carta-relevo);background:var(--marfim);box-shadow:var(--cartao)}
#assinatura .mc .l1{display:flex;justify-content:space-between;align-items:center;gap:8px 10px;flex-wrap:wrap}
#assinatura .mc b{font:600 calc(21 * var(--k))/1.2 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.01em;color:var(--toga)}
#assinatura .mc p{margin-top:6px;font:500 calc(15.5 * var(--k))/1.4 var(--f-corpo);color:var(--tinta)}
#assinatura .mc p.s{margin-top:2px;font-weight:400;color:var(--tinta-2);font-variant-numeric:tabular-nums}
#assinatura .mc-play{margin-top:20px}
#assinatura .mc-falta{text-align:center;margin-top:20px}
#assinatura .anda,#folha-restaurar .m-anda{height:12px;border-radius:999px;background:var(--folha-2);box-shadow:var(--rebaixo);position:relative;overflow:hidden}
#assinatura .anda{margin-top:14px}
#assinatura .anda i,#folha-restaurar .m-anda i{position:absolute;left:28%;top:3px;bottom:3px;width:34%;border-radius:999px;background:var(--luz-toga)}
/* a folha do restaurar (navegacao-relevo.html r2 a r5): a MESMA física da folha da trava, véu da toga */
#folha-restaurar{--g:calc(var(--e4) + 2px)}
#restaurar-veu.veu{position:fixed;inset:0;background:var(--toga-veu);z-index:30}
#folha-restaurar.folha-baixo{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:100dvh;overflow-y:auto;display:flex;flex-direction:column;background:var(--marfim);border-radius:var(--r-folha-baixo-relevo) var(--r-folha-baixo-relevo) 0 0;box-shadow:var(--amb-3),inset 0 1px 0 var(--brilho);padding:10px var(--g) calc(22px + env(safe-area-inset-bottom))}   /* o respiro de baixo é o do mock (22px + a área segura), não o da folha da trava (34px) */
#folha-restaurar.folha-baixo > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto}
#folha-restaurar.folha-baixo .alca{flex:none;width:40px;height:5px;border-radius:3px;background:var(--filete);margin:0 auto 18px}
#folha-restaurar.folha-baixo .rotulo{font:var(--t-rotulo);text-transform:uppercase;letter-spacing:.08em;color:var(--ouro-velho)}
#folha-restaurar.folha-baixo h2{margin-top:6px;font:600 24px/1.15 var(--f-display);font-variation-settings:var(--fv-display);letter-spacing:-.015em;color:var(--toga)}
#folha-restaurar .s-corpo{margin-top:10px;margin-bottom:18px;font:400 15.5px/1.5 var(--f-corpo);color:var(--tinta-2)}
#folha-restaurar .s-corpo b{color:var(--tinta);font-weight:700}
#folha-restaurar .s-toga{font:var(--t-botao)}
#folha-restaurar .s-clara{font:700 16px/1.2 var(--f-corpo)}
#folha-restaurar .s-texto{margin-top:6px;font:700 15px/1.2 var(--f-corpo)}
#folha-restaurar .m-anda{margin-top:0;margin-bottom:22px}   /* o mock tem 6px, que COLAPSA com os 18px do .s-corpo; aqui a folha é flex (sem colapso): 0 dá os mesmos 18 */
/* fim: 6.16 + M.6 */

/* ═══════════════════════════════════════════════════════════════════════════
   Relevo — as peças (R.1)  ·  AD-41, DESIGN.md "O sistema de peças", emenda de 2026-10-05
   Fonte: mocks/revamp-3d.html (`.btn`, `.alt`, `.letra`, `.trilha-chip`, `.opcao-t`) e mocks/direction-revamp-3d.md §2.
   INERTE ATÉ ALGUÉM VESTI-LO: tudo aqui vale SÓ dentro de um ancestral `.relevo`, e nenhum elemento do app tem essa
   classe na R.1 (cada tela do R a recebe na sua story). Nada acima deste bloco foi editado. Só `var(--…)`: nenhuma cor
   literal (as cores moram no tokens.css). Espessura = tocável: 4 px (--prof-1) ou 6 px (--prof-2); 8 px (--prof-3) é só
   do sinete (R.5). Chapado (disabled, texto, "em breve") não tem flanco e não afunda. O estado nunca mora só na sombra.
   ═══════════════════════════════════════════════════════════════════════════ */
.relevo .btn,.relevo .alt,.relevo .peca{border:0;cursor:pointer;appearance:none;-webkit-appearance:none}

/* o foco: toga sobre a folha; ouro dentro da sala (toga sobre toga some) */
.relevo :focus-visible{outline:3px solid var(--foco,var(--toga));outline-offset:3px}
.relevo .sala{--foco:var(--ouro)}

/* botão */
.relevo .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 22px;
  border-radius:var(--r-botao);font:var(--t-botao);letter-spacing:.005em;
  transition:transform var(--t-solta),box-shadow var(--t-solta),filter var(--t-solta)}
.relevo .btn:active{transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.relevo .btn.primario{background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
.relevo .btn.primario:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda)}
.relevo .btn.luz{background:var(--luz-clara);color:var(--toga);box-shadow:var(--peca-luz-2)}
.relevo .btn.luz:active{transform:translateY(5px);box-shadow:var(--peca-luz-2-afunda)}
.relevo .btn.secundario{min-height:48px;width:auto;background:var(--luz-clara);color:var(--toga);box-shadow:var(--peca-clara-1);font-size:15px}
.relevo .btn.secundario:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda)}
.relevo .btn.texto{min-height:44px;width:auto;padding:0 12px;background:none;box-shadow:none;font:600 15px/1 var(--f-corpo);color:var(--toga);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.relevo .btn[disabled]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--folha-40);color:var(--folha-70);cursor:default;transform:none}
.relevo .btn[disabled]:active{background:transparent;box-shadow:inset 0 0 0 1.5px var(--folha-40);transform:none}
@media (hover:hover){.relevo .btn.primario:hover{filter:brightness(1.08)}.relevo .btn.luz:hover,.relevo .btn.secundario:hover{filter:brightness(.985)}}

/* a lista de alternativas: --e3 entre peças (>= --e2; o flanco ocupa parte do vão) */
.relevo .alts{display:flex;flex-direction:column;gap:var(--e3)}

/* alternativa: afunda no toque; a ESCOLHIDA fica afundada, com anel toga e a letra cheia (o estado não mora só na sombra) */
.relevo .alt{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px 10px 10px;text-align:left;
  border-radius:var(--r-peca);background:var(--luz-clara);box-shadow:var(--peca-clara-1);font:500 15.5px/1.35 var(--f-corpo);color:var(--tinta);
  transition:transform var(--t-solta),box-shadow var(--t-solta),background var(--t-solta),opacity var(--t-solta)}
.relevo .alt:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.relevo .alt .letra{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-letra);
  font:700 14px/1 var(--f-corpo);color:var(--tinta-2);box-shadow:inset 0 0 0 1.5px var(--filete);background:var(--folha)}
.relevo .alt[aria-pressed="true"]{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda),0 0 0 2.5px var(--toga)}
.relevo .alt[aria-pressed="true"] .letra{background:var(--toga);color:var(--marfim);box-shadow:none}

/* peça genérica (a generalização do chip da trilha e da opção de trilha, R.6/R.7): luz clara, flanco, afunda */
.relevo .peca{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border-radius:var(--r-peca);background:var(--luz-clara);box-shadow:var(--peca-clara-1);color:var(--toga);font:700 14px/1 var(--f-corpo);
  transition:transform var(--t-solta),box-shadow var(--t-solta)}
.relevo .peca:active{transform:translateY(3px);box-shadow:var(--peca-clara-1-afunda);transition:transform var(--t-afunda),box-shadow var(--t-afunda)}
.relevo .peca.alta{box-shadow:var(--peca-clara-2)}
.relevo .peca.alta:active{transform:translateY(5px);box-shadow:var(--peca-clara-2-afunda)}
.relevo .peca.toga{background:var(--luz-toga);color:var(--marfim);box-shadow:var(--peca-toga-2)}
.relevo .peca.toga:active{transform:translateY(5px);box-shadow:var(--peca-toga-2-afunda)}
.relevo .peca.chapada{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);cursor:default;transform:none}
.relevo .peca.chapada:active{background:transparent;box-shadow:inset 0 0 0 1.5px var(--filete);transform:none}