/* =============================================================================
   ROTA FORTE · D6 v2 — a área do aluno.

   Dona: a fatia V4 da implementação da D6 v2. Só ela escreve aqui.
   Vem logo depois de `rota-forte.css` (a base: tokens, letras, foco e seleção), atrás da
   mesma chave (`templates/brand/_folha_rota_forte.html`). Use só os tokens `--rf-*` da base;
   ⛔ cor solta fora deles.

   RF-V4 (12/10/2026) — o núcleo: painel, boas-vindas, Comece Aqui, Hoje, Rota, peça, treino,
   Volta do Erro e Caderno. A direção é a de "Para estudar" (DIRECAO-DE-ARTE-ROTA-FORTE-D6v2.md §4):
   - leitura: fundo branco, texto grafite, 18 px; o enunciado e as alternativas em Literata, a
     explicação, o comentário e o texto corrido em Hanken; o h1 em Literata;
   - COBRE = ação (o botão) e POSIÇÃO ATUAL (o bloco de hoje na fileira);
   - PETRÓLEO = o que foi feito ou recuperado: acerto (marcador CHEIO), progresso, erro recuperado
     (fundo petróleo-claro, frase em petróleo-escuro, com o histórico e as datas);
   - ERRO = cinza (texto2) e TRACEJADO; ⛔ vermelho;
   - REVISÃO = âmbar, sempre com o ícone de data;
   - o que falta = contorno e número;
   - cor nunca sozinha: cheio × tracejado × vazado, e o rótulo que já existe.

   ⭐ Esta folha é pedida em TODA superfície com a chave ligada (página, checkout, área): toda regra
   daqui mira uma classe da área (`.study-html`, `.training-html`, `.reader-html`, `.rf-painel`,
   `.rf-fileira`) — ⛔ seletor solto que vaze para a página ou o checkout.

   O tema escuro escolhido na Conta (`data-tema-aluno="escuro"`) cobre também o treino, a Volta e a
   peça (S19): a ponte da base só alcançava `.study-html`, e as folhas do treino e do leitor
   declaram o tema escuro antigo (âmbar `#D9B25A`) com a especificidade (0,2,0). Os tons do
   escuro (seção 1) foram medidos contra o fundo `#1A1C1F` e as superfícies dele; a tabela está
   em `apps/study/test_rf_v4_area_d6v2.py` e no README da evidência (`docs/evidence/rf-v4/`).
   ========================================================================== */

/* ── gerado por docs/evidence/gate-d6v2-letra-miolo/gerar_rem.py: ⛔ editar à mão ── */
/* study_training.css */
:where(.training-html) .etapa-ind__n { font-size: 0.875rem; }
:where(.training-html) .etapa-ind__nome { font-size: 0.9375rem; }
:where(.training-html) .etapa-ind__sub { font-size: 0.8125rem; }
:where(.training-html) .sec { font-size: 0.9375rem; }
:where(.training-html) .erro-guardado__onde { font-size: 0.84375rem; }
:where(.training-html) .erro-guardado__q { font-size: 1rem; }
:where(.training-html) .erro-guardado__marca { font-size: 0.875rem; }
:where(.training-html) .linha-do-erro__data { font-size: 0.875rem; }
:where(.training-html) .linha-do-erro__rotulo { font-size: 0.8125rem; }
:where(.training-html) .estados__n { font-size: 1.0625rem; }
:where(.training-html) .estados__nome { font-size: 0.9375rem; }
:where(.training-html) .selo { font-size: 0.8125rem; }
:where(.training-html) .idx .n { font-size: 0.84375rem; }
:where(.training-html) .idx .t { font-size: 1.0625rem; }
:where(.training-html) .idx .s { font-size: 0.875rem; }
/* study_reader.css */
:where(.reader-html) .etapa-ind__n { font-size: 0.875rem; }
:where(.reader-html) .etapa-ind__nome { font-size: 0.9375rem; }
:where(.reader-html) .etapa-ind__sub { font-size: 0.8125rem; }
:where(.reader-html) .leitura-fim__h { font-size: 0.9375rem; }
/* study_states.css */
:where(.training-html, .reader-html) body.study { font-size: 0.9375rem; }
:where(.training-html, .reader-html) .btn { font-size: 1rem; }
:where(.training-html, .reader-html) .msg__kicker { font-size: 0.875rem; }
:where(.training-html, .reader-html) .msg__title { font-size: 1.625rem; }
:where(.training-html, .reader-html) .msg__text { font-size: 1.125rem; }
:where(.training-html, .reader-html) .msg__list a,
:where(.training-html, .reader-html) .msg__list span { font-size: 1.0625rem; }
:where(.training-html, .reader-html) .msg__diag { font-size: 0.71875rem; }
:where(.training-html, .reader-html) .savefail { font-size: 0.875rem; }
:where(.training-html, .reader-html) .savefail__retry { font-size: 0.875rem; }
:where(.training-html, .reader-html) .formnote { font-size: 0.9375rem; }
:where(.training-html, .reader-html) .warn { font-size: 1rem; }
@media (min-width: 600px) { :where(.training-html, .reader-html) .warn { font-size: 1.1875rem; } }
:where(.training-html, .reader-html) .prevbox { font-size: 0.9375rem; }
:where(.training-html, .reader-html) .prevlabel { font-size: 0.75rem; }
:where(.training-html, .reader-html) .pdfbox { font-size: 0.9375rem; }
:where(.training-html, .reader-html) .dur__v { font-size: 0.9375rem; }
:where(.training-html, .reader-html) .dur__q { font-size: 0.84375rem; }
/* study_volta.css */
:where(.training-html) .antes-de-responder { font-size: 0.875rem; }
:where(.training-html) .confianca__p { font-size: 0.9375rem; }
:where(.training-html) .confianca-dita { font-size: 0.875rem; }
:where(.training-html) .vitoria__nota { font-size: 0.9375rem; }
:where(.training-html) .guardei { font-size: 0.9375rem; }
:where(.training-html) .ganhou__h { font-size: 0.875rem; }
:where(.training-html) .ganhou__frase { font-size: 1.0625rem; }
:where(.training-html) .ganhou__lista li { font-size: 1rem; }
:where(.training-html) .preteste__conta { font-size: 0.9375rem; }
/* study_welcome.css */
:where(.study-html) .boas__h { font-size: 2rem; }
:where(.study-html) .page--boas .recado__legenda { font-size: 1rem; }
:where(.study-html) .page--boas .boas__p { font-size: 1.125rem; }
:where(.study-html) .page--boas .btn--grande { font-size: 1.0625rem; }
:where(.study-html) .page--boas .boas__contato { font-size: 0.9375rem; }
@media (min-width: 600px) { :where(.study-html) .boas__h { font-size: 2.75rem; } }
@media (min-width: 600px) { :where(.study-html) .page--boas .boas__p { font-size: 1.1875rem; } }
/* study_start.css */
:where(.study-html) .start__title { font-size: 1.875rem; }
:where(.study-html) .start__lead { font-size: 1.125rem; }
:where(.study-html) .start__p { font-size: 1.0625rem; }
:where(.study-html) .start__note { font-size: 0.90625rem; }
:where(.study-html) .sec { font-size: 0.9375rem; }
:where(.study-html) .field__label { font-size: 0.9375rem; }
:where(.study-html) .field__input { font-size: 1rem; }
:where(.study-html) .field__hint { font-size: 0.875rem; }
:where(.study-html) .field__error { font-size: 0.875rem; }
:where(.study-html) .gateout__text { font-size: 0.9375rem; }
:where(.study-html) .conta__h { font-size: 1.625rem; }
:where(.study-html) .conta__empty,
:where(.study-html) .conta__fact { font-size: 1.125rem; }
:where(.study-html) .ledger dt { font-size: 0.9375rem; }
:where(.study-html) .ledger dd { font-size: 1.0625rem; }
@media (min-width: 600px) { :where(.study-html) .ledger dd { font-size: 1.25rem; } }
:where(.study-html) .key__n { font-size: 0.9375rem; }
:where(.study-html) .key__v { font-size: 0.9375rem; }
:where(.study-html) .key__s { font-size: 0.875rem; }
:where(.study-html) .result2 { font-size: 1.125rem; }
@media (min-width: 600px) { :where(.study-html) .result2 { font-size: 1.375rem; } }
:where(.study-html) .falar__um { font-size: 1.0625rem; }
:where(.study-html) .falar__h { font-size: 0.9375rem; }
:where(.study-html) .falar__lista { font-size: 1rem; }
@media (min-width: 600px) { :where(.study-html) .start__title { font-size: 2.75rem; } }
@media (min-width: 600px) { :where(.study-html) .start__p { font-size: 1.125rem; } }
/* ── fim do bloco gerado (D6-05-R4) ── */

/* ── 1 · Os papéis do estudo, no claro e no escuro ─────────────────────────────────────
   Nomes da ÁREA (`--rf-a-*`), a partir dos tokens da base. No escuro, os tons próprios desta
   folha (⛔ o petróleo e o cobre do claro sobre fundo escuro sem medir):
     petróleo no escuro  #6FC2AE · 8,13:1 no #1A1C1F · 7,52:1 no #202326 · 6,72:1 no #15302A
     fundo do acerto     #15302A (o petróleo-claro do escuro) · texto #EDE6DA 11,38:1
     frase recuperada    #A6DCCB · 9,22:1 no #15302A
     revisão no escuro   #E0B060 · 8,58:1 no #1A1C1F
     erro no escuro      #C9C2B6 (o texto no grafite da base) · 9,66:1 no #1A1C1F
     contorno no escuro  #8C8780 · 4,79:1 no #1A1C1F · 3,96:1 no #15302A
     cobre no escuro     #F2B38F (o cobre claro da base) · 9,45:1 no #1A1C1F; texto grafite nele 8,74:1 */
.study-html,
.training-html,
.reader-html,
.rf-painel {
  --rf-a-posicao: var(--rf-cobre);
  --rf-a-acao: var(--rf-cobre);
  --rf-a-acao-texto: var(--rf-branco);
  --rf-a-acao-mao: var(--rf-cobre-texto);
  --rf-a-link: var(--rf-cobre-texto);
  --rf-a-feito: var(--rf-petroleo);
  --rf-a-feito-fundo: var(--rf-petroleo-claro);
  --rf-a-feito-frase: var(--rf-petroleo-escuro);
  --rf-a-erro: var(--rf-texto2);
  --rf-a-revisao: var(--rf-revisao);
  --rf-a-vazio: var(--rf-borda);
  --rf-a-fundo: var(--rf-fundo);
  --rf-a-texto: var(--rf-grafite);
  --rf-a-realce: var(--rf-realce);
  --rf-a-realce-texto: var(--rf-grafite);
  /* o ícone de data da revisão (SVG): é máscara, a cor é a do texto (`currentColor`) */
  --rf-a-ico-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2'/%3E%3C/svg%3E");
}
.study-html[data-tema-aluno="escuro"],
.training-html[data-tema-aluno="escuro"],
.reader-html[data-tema-aluno="escuro"] {
  --rf-a-posicao: var(--rf-cobre-claro);
  --rf-a-acao: var(--rf-cobre-claro);
  --rf-a-acao-texto: var(--rf-grafite);
  --rf-a-acao-mao: #EDE6DA;
  --rf-a-link: var(--rf-cobre-claro);
  --rf-a-feito: #6FC2AE;
  --rf-a-feito-fundo: #15302A;
  --rf-a-feito-frase: #A6DCCB;
  --rf-a-erro: var(--rf-tinta-escura);
  --rf-a-revisao: #E0B060;
  --rf-a-vazio: #8C8780;
  --rf-a-fundo: #1A1C1F;
  --rf-a-texto: #EDE6DA;
  --rf-a-realce: var(--rf-realce);
  --rf-a-realce-texto: var(--rf-grafite);
}

/* ── 2 · A ponte do treino e do leitor (S19) ────────────────────────────────────────────
   `study_training.css` e `study_reader.css` declaram os tokens deles em `.training-html` e
   `.reader-html` (e o escuro em `[data-tema-aluno="escuro"]`): a ponte vai nos MESMOS seletores,
   depois deles. Os valores são os de `.study-html` na base — uma paleta só na área. */
.training-html,
.reader-html {
  --paper: var(--rf-fundo);
  --paper-raised: var(--rf-pedra);
  --ink: var(--rf-grafite);
  --ink-soft: var(--rf-texto2);
  --rule: rgba(32, 35, 38, .14);
  --rule-strong: rgba(32, 35, 38, .30);
  --ctl: var(--rf-borda);
  --accent: var(--rf-cobre-texto);
  --accent-soft: rgba(168, 79, 29, .12);
  --focus: var(--rf-foco-claro);
  --font-ui: var(--rf-texto);
  /* ⭐ D6-03 (gate D6 v2): a casca do fim do bloco (`study_shell.css`) lê `--soft` e `--rule2`, que
     `study_training.css` declara como `var(--ink-soft)` e `var(--rule-strong)` no `.training-html`.
     O `:root` da base (`rota-forte.css`, mesma especificidade, folha posterior) os fixava no claro:
     no escuro as abas e os links da casca ficavam #4A4F55 sobre #1A1C1F (2,07:1). O apelido volta
     aqui, depois da base; no claro o valor é o mesmo de antes. */
  --soft: var(--ink-soft);
  --rule2: var(--rule-strong);
}
.training-html[data-tema-aluno="escuro"],
.reader-html[data-tema-aluno="escuro"] {
  --paper: #1A1C1F;
  --paper-raised: var(--rf-grafite);
  --ink: #EDE6DA;
  --ink-soft: var(--rf-tinta-escura);
  --rule: rgba(237, 230, 218, .16);
  --rule-strong: rgba(237, 230, 218, .32);
  --ctl: #8C8780;
  --accent: var(--rf-cobre-claro);
  --accent-soft: rgba(242, 179, 143, .16);
  --focus: var(--rf-cobre-claro);
  --rf-anel: var(--rf-cobre-claro);
  --quiet: #2B2F33;
}
/* A leitura tem 18 px (a preferência "menor" e "maior" continuam as delas). */
.training-html[data-size="m"],
.reader-html[data-size="m"] { --text-size: 1.125rem; }

/* ── 3 · A casca: um cabeçalho só, uma voz de título (S08) ──────────────────────────────
   O fim do bloco (`.training-html` com a casca) tinha a assinatura grande e o cabeçalho em
   duas linhas: a assinatura é a mesma do Hoje. Botões mais justos; a 320 px "Buscar" e "Conta"
   ficam só com o ícone (o rótulo sai da vista, ⛔ da leitura: regra de `study_shell.css`). */
.training-html .brand .rf-assinatura,
.reader-html .brand .rf-assinatura { height: 15px; }
@media (min-width: 600px) {
  .training-html .brand .rf-assinatura,
  .reader-html .brand .rf-assinatura { height: 22px; }
}
.study-html .apphead,
.training-html .apphead { flex-wrap: nowrap; gap: 6px; padding-right: 10px; background: var(--rf-a-fundo); }
.study-html .brand,
.training-html .brand { flex: 0 1 auto; min-width: 0; }
.study-html .apphead__util,
.training-html .apphead__util { gap: 6px; }
.study-html .hbtn,
.training-html .hbtn { gap: 5px; padding: 0 9px; border-radius: var(--rf-raio); font-size: 0.875rem; }
@media (max-width: 359px) {
  .study-html .apphead,
  .training-html .apphead { padding-left: 12px; padding-right: 8px; }
  .study-html .hbtn,
  .training-html .hbtn { padding: 0; }
}
@media (min-width: 960px) {
  .study-html .apphead,
  .training-html .apphead { padding: 0 32px; gap: 12px; }
}
/* ⭐ D6-05-R3 (re-gate da D6-05-R1): o cabeçalho do computador com a letra da PESSOA ampliada. A assinatura é imagem
   (⛔ cresce) e os destinos e Buscar/Conta crescem com a letra: a 960–1120 px com a letra a 32 eles ⛔ cabem numa
   linha, a caixa do link da marca encolhia (`min-width: 0`) e a imagem passava por cima de "Hoje". Agora o
   cabeçalho QUEBRA, na ordem do documento, em vez de encolher: assinatura e menu numa linha e Buscar/Conta na
   seguinte, à direita; ou, se nem o menu cabe ao lado da assinatura, o menu desce inteiro e Buscar/Conta seguem
   depois dele. ⛔ limite fixo: a quebra só acontece quando falta lugar, em qualquer letra. A 16 px tudo cabe numa
   linha de 960 px para cima, e a linha é a mesma de antes: os 24 px entre a marca e o menu passam da margem do
   menu para a da marca (o menu que desce fica alinhado à assinatura), a margem automática de Buscar/Conta os
   mantém encostados à direita, e 9 px de `padding` em cima e embaixo dão às linhas que quebram o respiro que o
   `min-height: 64px` de `study_shell.css` dava à linha única (9 + 45 + 9 + 1 da borda = 64: a linha única fica
   onde estava, a 16 e a 32 px). */
@media (min-width: 960px) {
  .study-html .apphead,
  .training-html .apphead { flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
  .study-html .brand,
  .training-html .brand { margin-right: 24px; }
  .study-html .appnav,
  .training-html .appnav { margin-left: 0; }
  .study-html .apphead__util,
  .training-html .apphead__util { margin-left: auto; }
}
/* O lugar atual: a cor do link E o traço cobre (⛔ só cor). */
.study-html .navl[aria-current],
.training-html .navl[aria-current] { color: var(--rf-a-link); box-shadow: inset 0 -3px 0 var(--rf-a-posicao); }
.study-html .tab[aria-current="page"],
.training-html .tab[aria-current="page"] { color: var(--rf-a-link); }
.study-html .tab[aria-current="page"]::before,
.training-html .tab[aria-current="page"]::before { background: var(--rf-a-posicao); }
.study-html .tabbar,
.training-html .tabbar { background: var(--rf-a-fundo); border-top-color: var(--rf-a-vazio); }

/* ⭐ D6-05-R1 (re-gate D6 v2): a casca com a letra da PESSOA ampliada (preferência do navegador).
   Com a letra em `rem`, Buscar e Conta passam de 14 para 28 px e os rótulos da barra de 12,5 para 25 px:
   numa linha só, Buscar cobria a assinatura (que é imagem e ⛔ cresce) e "Falar comigo" saía da aba e da
   tela. A casca acomoda: ⛔ letra menor, ⛔ rótulo escondido, ⛔ corte.
   - A barra: cada coluna tem no mínimo a largura do próprio rótulo (`min-content`) e divide o resto por
     igual. A 16 px todo rótulo cabe na quarta parte, e as quatro colunas são as mesmas de antes.
   - A folga, a rede de segurança do `<body>` e a compensação da rolagem seguem a ALTURA da barra:
     6 + 24 (ícone) + 3 + 1,15 × a letra do rótulo (0,78125rem) + 5 + 1 (borda). A 16 px o alvo de 56 px
     manda e a conta dá os mesmos 57 (e 72 na rolagem).
   - Os limites em `em` acompanham a letra da pessoa: abaixo de 22,4375em o cabeçalho pode quebrar (a
     assinatura numa linha, Buscar e Conta na outra, à direita, como em `study_shell.css`), e abaixo de
     19,4375em o rótulo da aba pode quebrar entre as palavras ("Falar / comigo"); a barra passa a contar
     duas linhas. A 16 px, o de 19,4375em (311 px) ⛔ dispara de 320 px para cima; o de 22,4375em (359 px)
     DISPARA de 320 a 359 px, mas ⛔ muda a geometria medida: ali Buscar e Conta são só o ícone, o cabeçalho
     cabe numa linha e o `flex-wrap` só age quando falta lugar (D6-05-R2/R3: correção do comentário). */
.study-html,
.training-html { --rf-a-barra: max(57px, calc(39px + 1.15 * 0.78125rem)); }
.study-html .tabbar__lista,
.training-html .tabbar__lista { grid-template-columns: repeat(4, minmax(min-content, 1fr)); }
.study-html .tabbar-folga,
.training-html .tabbar-folga { height: calc(var(--rf-a-barra) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 959px) {
  .study-html body:has(.tabbar):not(:has(.tabbar-folga)),
  .training-html body:has(.tabbar):not(:has(.tabbar-folga)) { padding-bottom: calc(var(--rf-a-barra) + env(safe-area-inset-bottom, 0px)); }
  html.study-html:has(.tabbar),
  html.training-html:has(.tabbar) { scroll-padding-bottom: calc(var(--rf-a-barra) + 15px + env(safe-area-inset-bottom, 0px)); }
}
/* A 320 px com a letra a 32, uma palavra do conteúdo que ⛔ cabe nem na TELA (o h2 da agenda do Hoje, o h1 do fim
   do treino) alarga a janela de layout do celular, e a barra FIXA vai junto, para fora da tela. Abaixo de 11,25em
   (360 px com a letra a 32; 180 px a 16, largura que ⛔ existe) a palavra quebra, e só quando ⛔ cabe na linha (a
   mesma regra do `body.rf-p1` no D6-05). Acima disso a palavra fica inteira, como antes. */
@media (max-width: 11.25em) {
  .study-html body,
  .training-html body { overflow-wrap: break-word; }
}
/* ⭐ D6-05-R2 (re-gate da D6-05-R1): de 361 a 387 px com a letra a 32, o h1 do fim do treino ("Treino do bloco
   respondido.", Literata 700 a 1,8rem) ainda alargava a janela de layout: "respondido." mede 10,82rem e começa
   depois da margem do treino (`--gutter`, 1,25rem = 40 px a 32), e a palavra ia até 12,07em (386,3 px) — a barra
   fixa ia junto, para fora da tela. A palavra cabe INTEIRA na tela, então ⛔ quebra: entre 11,265625em e
   12,09375em (361 a 387 px com a letra a 32; 180,25 a 193,5 px a 16, larguras que ⛔ existem) a margem do treino
   passa a 12 px (a mesma do cabeçalho a 320) e a palavra vai até 358,3 px. ⛔ letra menor, ⛔ quebra nova; até 360 px
   fica a regra de cima, como antes. */
@media (min-width: 11.265625em) and (max-width: 12.09375em) {
  .training-html { --gutter: 12px; }
}
@media (max-width: 22.4375em) {
  .study-html .apphead,
  .training-html .apphead { flex-wrap: wrap; }
}
@media (max-width: 19.4375em) {
  .study-html,
  .training-html { --rf-a-barra: calc(39px + 2 * 1.15 * 0.78125rem); }
  .study-html .tab,
  .training-html .tab { white-space: normal; }
}

/* Os títulos: o h1 de cada tela em Literata; o resto em Hanken. */
.study-html .boas__h,
.study-html .start__title,
.study-html .rota__title,
.study-html .nb-title,
.study-html .msg__title,
.training-html .msg__title,
.training-html .etapa__h,
.training-html .training-finished__title,
.reader-html .reader-piece__title,
.rf-painel h2:first-of-type {
  font-family: var(--rf-titulo);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}
.study-html .faixa__h,
.study-html .agenda__t,
.study-html .evo__t,
.study-html .nb-prova__frase,
.training-html .training-bar__title,
.training-html .training-index,
.training-html .training-result,
.training-html .training-commentary,
.training-html .training-finished__count,
.training-html .training-finished__tempo,
.training-html .bloco-fecha__frase,
.training-html .preteste__p,
.training-html .ponte__frase,
.training-html .aviso-leitura__p,
.training-html .ganhou__frase,
.training-html .ganhou__lista li,
.training-html .vitoria__frase,
.reader-html .reader-section__title,
.reader-html .reader-prose { font-family: var(--rf-texto); }
.study-html .faixa__h { font-weight: 700; }
.training-html .training-result { font-weight: 700; }
.training-html .training-commentary { line-height: 1.6; }
.reader-html .reader-section__title { font-weight: 700; }
.reader-html .reader-prose { line-height: 1.6; }

/* O botão: a ação é cobre (5,52:1 com o branco); no escuro, o cobre claro com texto grafite. */
.training-html .training-btn--primary,
.training-html .btn--primary,
.reader-html .reader-btn--primary,
.study-html .btn--primary {
  background: var(--rf-a-acao); border-color: var(--rf-a-acao); color: var(--rf-a-acao-texto);
  border-radius: var(--rf-raio);
}
.training-html .training-btn--primary:hover,
.training-html .btn--primary:hover,
.reader-html .reader-btn--primary:hover,
.study-html .home .btn--primary:hover {
  background: var(--rf-a-acao-mao); border-color: var(--rf-a-acao-mao); color: var(--rf-a-acao-texto);
}
.training-html .training-btn,
.reader-html .reader-btn { border-radius: var(--rf-raio); }
.study-html .tlink,
.training-html .tlink,
.training-html .training-pager__link { color: var(--rf-a-link); }

/* ── 4 · O treino: antes de responder, a alternativa marcada, o acerto e o erro ────────
   Marcada (antes de responder): borda grafite de 2 px e a letra cheia em grafite — ⛔ o realce
   e ⛔ o petróleo, que são de outra coisa. O foco é o anel da casa, 3 px afastado 2 px.
   Acerto: borda CHEIA petróleo, fundo petróleo-claro, letra cheia em petróleo, e o rótulo
   "resposta". Erro: borda TRACEJADA cinza, fundo branco, letra vazada e tracejada, e o rótulo
   "sua marcação". ⛔ Vermelho. A separação ⛔ depende da cor (§7 do parecer do Codex). */
.training-html .training-option__label { border-radius: var(--rf-raio); background: var(--rf-a-fundo); }
.training-html .training-option__label:hover { border-color: var(--ink); }
.training-html .training-option__label:has(input:checked) {
  border: 2px solid var(--ink); background: var(--rf-a-fundo);
}
.training-html .training-option__label:has(input:checked) .training-option__letter {
  border-color: var(--ink); background: var(--ink); color: var(--rf-a-fundo);
}
.training-html .training-option__label:has(input:focus-visible) { outline: 3px solid var(--rf-anel); outline-offset: 2px; }
.training-html .training-fieldset:disabled .training-option.is-correct .training-option__label {
  border: 2px solid var(--rf-a-feito); background: var(--rf-a-feito-fundo);
}
.training-html .training-fieldset:disabled .training-option.is-correct .training-option__letter {
  border-color: var(--rf-a-feito); background: var(--rf-a-feito); color: var(--rf-a-fundo);
}
.training-html .training-option__tag--correct,
.training-html .training-fieldset:disabled .training-option.is-correct .training-option__tag { color: var(--rf-a-feito); }
.training-html .training-fieldset:disabled .training-option.is-correct .training-option__tag { color: var(--rf-a-feito-frase); }
.training-html .training-fieldset:disabled .training-option.is-chosen:not(.is-correct) .training-option__label {
  border: 2px dashed var(--rf-a-erro); background: var(--rf-a-fundo);
}
.training-html .training-fieldset:disabled .training-option.is-chosen:not(.is-correct) .training-option__letter {
  border: 2px dashed var(--rf-a-erro); background: transparent; color: var(--rf-a-erro);
}
.training-html .training-fieldset:disabled .training-option.is-chosen:not(.is-correct) .training-option__tag { color: var(--rf-a-erro); }

/* ── 5 · A vitória da Volta: o erro recuperado (S41) ────────────────────────────────────
   A moldura é DELA — fundo petróleo-claro e borda petróleo de 2 px —, ⛔ o anel de foco: a mesma
   com toque, com teclado e com o foco que o script põe ali para quem ouve a tela. A frase em
   petróleo-escuro (8,62:1); o histórico e as datas vêm logo abaixo, na linha do erro. */
.training-html .vitoria,
.training-html .vitoria--curta {
  padding: 16px 18px 14px;
  border: 2px solid var(--rf-a-feito);
  border-radius: var(--rf-raio);
  background: var(--rf-a-feito-fundo);
}
.training-html .vitoria:focus,
.training-html .vitoria:focus-visible { outline: none; }
.training-html .vitoria__frase,
.training-html .vitoria--curta .vitoria__frase { font-weight: 700; color: var(--rf-a-feito-frase); }
.training-html .vitoria__nota { color: var(--ink); }

/* ── 6 · A linha do erro como fileira (Volta e fim do bloco) ────────────────────────────
   Os marcos são blocos da Costura, alternando 6/4: errou = TRACEJADO cinza; acertou = CHEIO
   petróleo; a volta de hoje ainda sem resposta = cobre (a posição atual); as voltas que faltam =
   vazadas. As datas e os rótulos de cada marco são os de hoje. */
.training-html .linha-do-erro { --dot: 20px; }
.training-html .linha-do-erro__marco { padding-top: 32px; }
.training-html .linha-do-erro__marco::before {
  top: 0; width: 26px; height: 20px; border-radius: 3px;
  border: 2px solid var(--rf-a-vazio); background: var(--rf-a-fundo); box-shadow: none;
}
.training-html .linha-do-erro__marco:nth-child(even)::before { top: 6px; width: 18px; height: 14px; }
.training-html .linha-do-erro__marco::after { left: 30px; top: 9px; border-top: 2px dashed var(--rf-a-vazio); }
.training-html .linha-do-erro__marco.is-feito::after { border-top: 2px solid var(--rf-a-feito); }
.training-html .linha-do-erro__marco.is-bloco::before { border: 2px solid var(--rf-a-feito); background: var(--rf-a-feito); }
.training-html .linha-do-erro__marco.is-hoje::before { border: 2px solid var(--rf-a-posicao); background: var(--rf-a-posicao); box-shadow: none; }
.training-html .linha-do-erro__marco.is-acertou::before,
.training-html .linha-do-erro__marco.is-hoje.is-acertou::before { border: 2px solid var(--rf-a-feito); background: var(--rf-a-feito); box-shadow: none; }
.training-html .linha-do-erro__marco.is-errou::before,
.training-html .linha-do-erro__marco.is-bloco.is-errou::before,
.training-html .linha-do-erro__marco.is-hoje.is-errou::before { border: 2px dashed var(--rf-a-erro); background: var(--rf-a-fundo); box-shadow: none; }
.training-html .linha-do-erro__marco.is-hoje .linha-do-erro__data { color: var(--ink); }
.training-html .guardei { border-color: var(--rf-a-vazio); border-radius: var(--rf-raio); }

/* ── 7 · A FILEIRA DA COSTURA (`study/shared/_fileira_rf.html` e a Rota) ────────────────
   O bloco de hoje CHEIO em cobre; o que já foi fechado, cheio em petróleo; o limite da rota
   TRACEJADO em petróleo; o que falta, vazado. Os blocos alternam a largura 6/4 do símbolo e
   descem meio passo; ⛔ esticar, ⛔ escada, ⛔ tamanho com sentido de tempo. Muitos blocos
   quebram em mais fileiras, com o mesmo desenho. */
.rf-fileira {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 5px;
  margin: 4px 0 14px; padding: 0; list-style: none;
}
.rf-fileira__bloco {
  flex: none; width: 30px; height: 24px; margin: 0;
  border: 2px solid var(--rf-a-vazio); border-radius: 4px; background: var(--rf-a-fundo);
}
.rf-fileira__bloco:nth-child(even) { width: 20px; height: 16px; margin-top: 12px; }
.rf-fileira__bloco.is-feito { border-color: var(--rf-a-feito); background: var(--rf-a-feito); }
.rf-fileira__bloco.is-limite { border: 2px dashed var(--rf-a-feito); }
.rf-fileira__bloco.is-feito.is-limite { border-style: solid; }
.rf-fileira__bloco.is-hoje { border: 2px solid var(--rf-a-posicao); background: var(--rf-a-posicao); }
/* a fileira pequena do treino e da Volta: só a posição atual, o resto vazado */
.rf-fileira--progresso { gap: 4px; margin: 6px auto 4px; max-width: var(--measure, 40rem); padding: 0 var(--gutter, 1.25rem); }
.rf-fileira--progresso .rf-fileira__bloco { width: 16px; height: 13px; border-width: 1.5px; border-radius: 3px; }
.rf-fileira--progresso .rf-fileira__bloco:nth-child(even) { width: 11px; height: 9px; margin-top: 6px; }
.training-html .training-progress:has(+ .rf-fileira--progresso) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

/* ── 8 · O progresso: posição, trabalho feito e erro recuperado são coisas distintas ───
   (parecer do Codex §4): cobre = onde estou; petróleo = o que fiz ou recuperei; contorno e
   número = o que falta. "Até onde você chega" é PROJEÇÃO: número grafite com o traço tracejado
   do limite, ⛔ o petróleo do que foi feito. ⛔ barra única de "domínio", ⛔ confete. */
.study-html .evo__n { color: var(--rf-a-feito); }
.study-html .evo__n[data-value="turned_right"] {
  justify-self: start; padding: 2px 8px 4px; border-radius: 4px;
  background: var(--rf-a-feito-fundo); color: var(--rf-a-feito-frase);
}
@media (max-width: 719px) { .study-html .evo__n[data-value="turned_right"] { justify-self: center; } }
.study-html .evo__n[data-value="stop"] {
  justify-self: start; color: var(--ink); padding-bottom: 4px; border-bottom: 2px dashed var(--rf-a-feito);
}
@media (max-width: 719px) { .study-html .evo__n[data-value="stop"] { justify-self: center; } }
/* ⭐ D6-05-R5 (re-gate em lote): os três números do Hoje com a letra a 32, a 320 px. A coluna fixa do número (4,6rem =
   147 px) deixava ~120 px para o texto, e cada cartão media de 700 a 900 px de altura: mais que o espaço entre a
   compensação do topo e a da barra (`scroll-padding`), o navegador alinhava o cartão pelo topo e, numa janela de 900 px,
   o fim dele e o anel do foco ficavam 21,22 e 27,22 px debaixo da barra (outro cartão, 5,2 px do anel). Abaixo de
   19,9375em (638 px com a letra a 32; 319 px a 16, largura que ⛔ existe: a letra padrão fica como estava) o cartão
   ganha o arranjo que já tem no computador (`study_today.css`, a partir de 720 px): o número em cima, o texto na
   largura inteira. ⛔ letra menor, ⛔ texto escondido; a barra e as compensações ficam como estão. */
@media (max-width: 19.9375em) {
  .study-html .evo { grid-template-columns: minmax(0, 1fr); }
  .study-html .evo__n { grid-row: auto; margin-bottom: .375rem; text-align: start; }
  .study-html .evo__n:is([data-value="turned_right"], [data-value="stop"]) { justify-self: start; }
}
.study-html .home__onde-frase { font-family: var(--rf-titulo); font-size: 1.25rem; font-weight: 600; }
.study-html .student-coverage__rule,
.study-html .home .student-coverage__rule,
.training-html .student-coverage__rule,
.rf-painel .student-coverage__rule { border-color: var(--rf-a-vazio); background: var(--rf-a-fundo); }
.study-html .student-coverage__fill,
.study-html .home .student-coverage__fill,
.training-html .student-coverage__fill,
.rf-painel .student-coverage__fill { fill: var(--rf-a-feito); }
.study-html .student-coverage__rest,
.study-html .home .student-coverage__rest,
.training-html .student-coverage__rest,
.rf-painel .student-coverage__rest { fill: var(--rf-a-fundo); }
.study-html .garantia__regua { border-color: var(--rf-a-vazio); }
.study-html .garantia__feito { fill: var(--rf-a-feito); }
.study-html .garantia__resto { fill: var(--rf-a-fundo); }

/* A agenda do dia: cartões calmos (fio de controle, ⛔ grafite grosso), número em pedra. */
.study-html .agenda__item { border: 1px solid var(--rf-a-vazio); border-radius: var(--rf-raio); background: var(--rf-a-fundo); }
.study-html .agenda__n { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.study-html .agenda__meta { color: var(--ink); }

/* ── 9 · A revisão: âmbar, sempre com o ícone de data ────────────────────────────────── */
.study-html [data-copy-id="today.review.meta"],
.training-html .erro-guardado__marca,
.training-html .guardei > p:first-child { color: var(--rf-a-revisao); }
.study-html [data-copy-id="today.review.meta"]::before,
.training-html .erro-guardado__marca::before,
.training-html .guardei > p:first-child::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .4em; vertical-align: -.15em;
  background: currentColor; -webkit-mask: var(--rf-a-ico-data) center / contain no-repeat; mask: var(--rf-a-ico-data) center / contain no-repeat;
}
.training-html .erro-guardado__marca b,
.training-html .guardei > p:first-child b { color: inherit; }

/* ── 10 · A Rota: o mapa em petróleo (dado), o bloco de hoje em cobre, o resto vazado ── */
.study-html .tobogan__feito { fill: var(--rf-a-feito); }
.study-html .tobogan__hoje { fill: var(--rf-a-posicao); }
.study-html .tobogan__falta { fill: var(--paper); stroke: var(--rf-a-vazio); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.study-html .tobogan__parada { stroke: var(--rf-a-feito); stroke-width: 2px; }
.study-html .tobogan__aqui { color: var(--rf-a-link); border-left-color: var(--rf-a-posicao); }
.study-html .tobogan__aqui--direita { border-right-color: var(--rf-a-posicao); }
/* S09 (1E.4b): a coluna de uma faixa nunca fica mais estreita que o nome dela. Com o `min-width: 0` de
   study_progress.css, a 320 e a 360 px a faixa de 49 dos 346 blocos ficava menor que "Margem", e o
   `overflow: hidden` do celular cortava a palavra. Acima desse mínimo, as colunas seguem `data-faixas`. */
.study-html .tobogan__faixa { min-width: min-content; }
/* S49/S56: ⛔ a faixa cobre à esquerda que cortava "bloco 1"; o lugar se marca pelo bloco da
   fileira antes do número e pela frase "É o bloco de hoje." */
.study-html .bloco-row.is-hoje { box-shadow: none; padding-left: 0; margin-left: 0; }
.study-html .bloco-row .n::before { content: ""; display: inline-block; width: 12px; height: 10px; margin-right: 6px; border: 1.5px solid var(--rf-a-vazio); border-radius: 2px; vertical-align: -1px; }
.study-html .bloco-row.is-feito .n::before { width: 12px; height: 10px; border-radius: 2px; border-color: var(--rf-a-feito); background: var(--rf-a-feito); }
.study-html .bloco-row.is-hoje .n::before { border-color: var(--rf-a-posicao); background: var(--rf-a-posicao); }
.study-html .bloco-row.is-hoje .n,
.study-html .bloco-row.is-hoje .bloco-row__nota { color: var(--rf-a-link); }
.study-html .bloco-row.is-parada { border-bottom: 2px dashed var(--rf-a-feito); }
.study-html .bloco-row__nota--conta { color: var(--rf-a-feito); }
.study-html .rf-fileira--rota { margin: 4px 0 18px; }

/* ── 11 · "Treinado" e "Retido" com a forma da fileira (S42) ────────────────────────────
   O quadrado vazio de 13 px parecia caixa de seleção desmarcada: o estado agora é um bloco da
   Costura, cheio — grafite em "Treinado" (o assunto passou pelo treino), petróleo em "Retido"
   (acertou de volta). O rótulo é o mesmo de hoje. */
.study-html .marca,
.training-html .marca { width: 16px; height: 12px; border: 2px dashed var(--rf-a-vazio); border-radius: 3px; vertical-align: -1px; }
.study-html .marca--treinado,
.training-html .marca--treinado { border-style: solid; border-color: var(--ink); background: var(--ink); }
.study-html .marca--retido,
.training-html .marca--retido { border-style: solid; border-color: var(--rf-a-feito); background: var(--rf-a-feito); }
.study-html .selo--retido,
.training-html .selo--retido { color: var(--rf-a-feito); }

/* ── 12 · A peça: texto corrido em Hanken 18 px e a regra central com o realce LOCALIZADO ─
   O realce vai só no trecho em negrito do primeiro parágrafo de "O que é" — onde a peça escreve
   a regra —, com o peso tipográfico; ⛔ parágrafo pintado. "Quando o caso é outro" ganha o
   número da seção em âmbar (o cabeçalho; o corpo continua grafite). */
.reader-html .reader-section[data-section-key="o_que_e"] .reader-prose > p:first-of-type strong:first-of-type {
  font-weight: 700; color: var(--rf-a-realce-texto); background: var(--rf-a-realce);
  padding: 0 .18em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.reader-html .reader-section[data-section-key="quando_o_caso_e_outro"] .reader-section__index { color: var(--rf-a-revisao); }
.reader-html .reader-progress__fill { background: var(--rf-a-feito); }

/* ── 13 · O painel `/area/` na linguagem do Hoje (S47) ──────────────────────────────────
   ⛔ cartão dentro de cartão, ⛔ número-herói, ⛔ "olho" em caixa-alta, ⛔ gradiente: a posição na
   rota e a próxima ação na frente; os fatos de cada acesso em texto. */
.rf-painel .eyebrow { display: none; }
.rf-painel h2:first-of-type { margin-top: 0 !important; font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 800; }
.rf-painel .panel {
  margin-top: 2rem !important; padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--rf-borda);
  border-radius: 0; background: transparent; box-shadow: none;
}
.rf-painel .panel .panel { padding: 0; border-top: 0; }
.rf-painel .panel h3 { font-family: var(--rf-titulo); font-weight: 700; font-size: 1.375rem; }
.rf-painel .meta-row { gap: .5rem 1.75rem; }
.rf-painel .meta__label { font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--rf-texto2); }
.rf-painel .meta__value { font-family: var(--rf-texto); font-weight: 600; font-size: 1.0625rem; color: var(--rf-grafite); }
.rf-painel .progress { border: 1px solid var(--rf-borda); border-radius: 2px; background: var(--rf-fundo); height: 8px; }
.rf-painel .progress__fill { background: var(--rf-petroleo); border-radius: 0; }
.rf-painel .rf-painel__onde { font-family: var(--rf-titulo); font-size: 1.25rem !important; font-weight: 600; color: var(--rf-grafite); line-height: 1.4; }
.rf-painel .btn--primary { background: var(--rf-cobre); border-color: var(--rf-cobre); color: var(--rf-branco); }
.rf-painel .btn--primary:hover { background: var(--rf-cobre-texto); border-color: var(--rf-cobre-texto); }
/* ⭐ D6-05-R4: a 320 px com a letra a 32, "Começar" (`.track__cta`, que ⛔ encolhe) ⛔ cabia ao lado do número e do título
   da trilha e alargava a janela de layout para 357 px. Abaixo de 11,25em (360 px com a letra a 32; 180 px a 16, largura
   que ⛔ existe) o botão desce para a linha de baixo, inteiro, só quando falta lugar, e o respiro dos lados dele passa a
   meia letra (a palavra ⛔ cabia nos 112 px de dentro e virava "Começa/r"). ⛔ letra menor, ⛔ corte. */
@media (max-width: 11.25em) {
  .rf-painel .track__item { flex-wrap: wrap; }
  .rf-painel .track__cta { padding-inline: .5em; }
}
/* os destinos da rota: links de texto, ⛔ parede de botões */
.rf-painel .study-destinations { gap: .25rem 1.25rem !important; }
.rf-painel .study-destinations .btn {
  min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--rf-cobre-texto); font-weight: 600; text-decoration: underline; text-underline-offset: .18em;
}

/* Movimento reduzido: nada aqui anima; a vitória continua com o único movimento da Volta
   (`study_volta.css`), que já respeita `prefers-reduced-motion`. */

/* O painel usa o topo de `base.html`: a assinatura do tamanho da casca da área (S08), para o topo
   ⛔ quebrar em duas linhas no celular. Uma ação principal por acesso: o botão cobre fica na rota
   da edição; os do material do 47º passam a vazados (o mesmo destino, o mesmo rótulo). */
body:has(.rf-painel) .site-header .brand .rf-assinatura { height: 15px; }
@media (min-width: 600px) { body:has(.rf-painel) .site-header .brand .rf-assinatura { height: 22px; } }
.rf-painel .panel:not(:has(.rf-painel__onde, .study-destinations)) .btn--primary {
  background: transparent; border-color: var(--rf-borda); color: var(--rf-grafite);
}
.rf-painel .panel:not(:has(.rf-painel__onde, .study-destinations)) .btn--primary:hover { border-color: var(--rf-grafite); }

/* ── 14 · O miolo do treino com a letra da PESSOA ampliada (D6-05-R4) ───────────────────
   Com a letra em `rem` (o bloco gerado no topo), o texto dobra junto com a preferência — e as fileiras de colunas FIXAS
   do treino deixam de caber: a 320 e a 390 px com a letra a 32, a linha do erro (quatro colunas) partia "Prim/eira" e
   "13/ 10", as três etapas partiam "Aque/cer", e o nome do assunto e o título do índice se espremiam ao lado de
   "Treinado" e da duração. Abaixo de 19,9375em (638 px com a letra a 32; 319 px a 16, largura de tela que ⛔ existe: a
   letra padrão fica como estava) as colunas viram linhas: a linha do erro em pares (o traço que ligava o fim de uma
   linha ao começo da outra sai; a ordem e as datas ficam), as etapas uma embaixo da outra, com o círculo ao lado do
   nome, e "Treinado" e a duração embaixo do nome. ⛔ letra menor, ⛔ texto escondido, ⛔ corte. */
@media (max-width: 19.9375em) {
  .training-html .linha-do-erro { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .training-html .linha-do-erro__marco:nth-child(2n)::after { display: none; }
  .training-html .etapa-ind__lista,
  .reader-html .etapa-ind__lista { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .training-html .etapa-ind__item::after,
  .reader-html .etapa-ind__item::after { display: none; }
  .training-html .etapa-ind__passo,
  .reader-html .etapa-ind__passo { flex-direction: row; align-items: center; gap: 10px; }
  .training-html .estados__item { grid-template-columns: auto minmax(0, 1fr); }
  .training-html .estados__n { grid-column: 2; }
  .training-html .idx__row { grid-template-columns: minmax(0, 1fr); }
  .training-html .idx .dur { grid-column: 1; grid-row: auto; text-align: left; }
}