/* =============================================================================
   ROTA FORTE · D6 v2 — o RESTO da área do aluno.

   Dona: a fatia V5 da implementação da D6 v2. Só ela escreve aqui.
   Vem depois de `rota-forte-area.css` (a V4: a casca, os papéis do estudo e o escuro), atrás da
   mesma chave (`templates/brand/_folha_rota_forte.html`; o 404 e o 500 a pedem em
   `templates/brand/erro.html`). Use só os tokens `--rf-*` da base e os `--rf-a-*` da V4.

   RF-V5 (12/10/2026) — entrar e senha, Estantes (e cada estante), PDF (seletor, recusado, Caderno em
   partes), leitor de PDF, áudios do 47º, busca, Conta, compras, os estados, 404 e 500. A linguagem é
   a do núcleo (V4): a casca, o h1 em Literata e o resto em Hanken, a leitura em 18 px sobre branco,
   o cobre só para a ação e a posição, o petróleo para o resultado, ⛔ vermelho.

   ⭐ Esta folha é pedida em TODA superfície com a chave ligada: toda regra mira uma tela da área —
   `.study-html` (as telas de estudo), `.rf-resto` (as oito telas v3 desta fatia: Estantes, No Ouvido,
   busca, Conta e compras, que só com a chave ganham `study-html rf-resto` no `<html>`), `.rf-erro`
   (404/500) ou um `body` do `base.html` da área (entrar e senha, leitor de PDF, áudios do 47º e o
   painel). ⛔ Seletor solto que vaze para a página ou o checkout (`base.html` também é do checkout).

   S19: as telas v3 ⛔ tinham `study-html` e ficavam com a paleta antiga (âmbar `#D9B25A` no escuro,
   creme e `--alert` vermelho no claro): com a classe, a ponte da base e os papéis da V4 as alcançam.
   ========================================================================== */

/* ── 0 · A letra em `rem` (S14) ─────────────────────────────────────────────────────────
   O mesmo tamanho de hoje (px / 16), para crescer com a letra do navegador. Gerado das folhas das
   telas; vem PRIMEIRO, para as regras escritas à mão abaixo valerem por cima. */
/* ── gerado por docs/evidence/rf-v5/gerar_rem.py: ⛔ editar à mão ── */
/* study_v3.css */
html.rf-resto { --text-size: 1.1875rem; }
html.rf-resto[data-size="s"] { --text-size: 1.0625rem; }
html.rf-resto[data-size="l"] { --text-size: 1.3125rem; }
@media (max-width: 599px) { html.rf-resto { --text-size: 1.125rem; } }
@media (max-width: 599px) { html.rf-resto[data-size="s"] { --text-size: 1rem; } }
@media (max-width: 599px) { html.rf-resto[data-size="l"] { --text-size: 1.25rem; } }
.rf-resto body { font-size: 0.9375rem; }
.rf-resto .btn { font-size: 1rem; }
.rf-resto .kicker { font-size: 0.875rem; }
.rf-resto .sec { font-size: 0.9375rem; }
.rf-resto .warn { font-size: 1rem; }
@media (min-width: 600px) { .rf-resto .warn { font-size: 1.0625rem; } }
.rf-resto .page__title { font-size: 1.875rem; }
.rf-resto .page__lead { font-size: 1.0625rem; }
@media (min-width: 600px) { .rf-resto .page__title { font-size: 2.75rem; } }
@media (min-width: 600px) { .rf-resto .page__lead { font-size: 1.1875rem; } }
.rf-resto .idx .n { font-size: 0.8438rem; }
.rf-resto .idx .t { font-size: 1.0625rem; }
.rf-resto .idx .s { font-size: 0.875rem; }
.rf-resto .student-coverage__label { font-size: 0.9375rem; }
.rf-resto .student-coverage__note,
.rf-resto .student-coverage__empty { font-size: 0.875rem; }
.rf-resto .student-coverage__antes { font-size: 0.875rem; }
.rf-resto .tobogan__aqui { font-size: 0.8125rem; }
.rf-resto .tobogan__faixa { font-size: 0.8125rem; }
.rf-resto .tobogan__legenda { font-size: 0.875rem; }
@media (max-width: 479px) { .rf-resto .tobogan__faixa { font-size: 0.75rem; } }
.rf-resto .linha-do-erro__data { font-size: 0.875rem; }
.rf-resto .linha-do-erro__rotulo { font-size: 0.8125rem; }
.rf-resto .vitoria__nota { font-size: 0.9375rem; }
.rf-resto .antes-de-responder { font-size: 0.875rem; }
.rf-resto .home__bloco-onde { font-size: 0.875rem; }
.rf-resto .hoje__data { font-size: 0.875rem; }
.rf-resto .hoje__h { font-size: 1.875rem; }
.rf-resto .hoje__ordem { font-size: 1.0625rem; }
.rf-resto .agenda__n { font-size: 1rem; }
.rf-resto .agenda__t { font-size: 1.3125rem; }
.rf-resto .agenda__meta { font-size: 0.875rem; }
.rf-resto .agenda__p { font-size: 1rem; }
.rf-resto .agenda__nota { font-size: 0.875rem; }
.rf-resto .agenda__etapas { font-size: 0.875rem; }
.rf-resto .today__peca::before { font-size: 0.8438rem; }
.rf-resto .today__peca-t { font-size: 1rem; }
.rf-resto .today__peca-m { font-size: 0.8438rem; }
.rf-resto .evo__n { font-size: 2rem; }
.rf-resto .evo__t { font-size: 1.0625rem; }
.rf-resto .evo__s { font-size: 0.875rem; }
@media (max-width: 400px) { .rf-resto .hoje__h { font-size: 1.6875rem; } }
@media (max-width: 400px) { .rf-resto .agenda__t { font-size: 1.25rem; } }
@media (min-width: 600px) { .rf-resto .hoje__h { font-size: 2.5rem; } }
.rf-resto .rbtn { font-size: 0.9375rem; }
.rf-resto .etapa__h { font-size: 1.625rem; }
.rf-resto .ponte__frase { font-size: 1rem; }
.rf-resto .reader-block { font-size: 0.9375rem; }
.rf-resto .reader-piece__kicker { font-size: 0.875rem; }
.rf-resto .reader-piece__tempo { font-size: 0.875rem; }
.rf-resto .reader-toc { font-size: 0.9375rem; }
.rf-resto .vespera__guarda { font-size: 0.875rem; }
.rf-resto .reader-pdf { font-size: 0.9375rem; }
.rf-resto .reader-pdf__title { font-size: 1rem; }
.rf-resto .aa-choice__aa--s { font-size: 0.875rem; }
.rf-resto .aa-choice__aa--m { font-size: 1.0625rem; }
.rf-resto .aa-choice__aa--l { font-size: 1.25rem; }
.rf-resto .aa-panel__status { font-size: 0.875rem; }
.rf-resto .training-kicker { font-size: 0.875rem; }
.rf-resto .otag { font-size: 0.8125rem; }
.rf-resto .guardei { font-size: 0.9375rem; }
.rf-resto .training-pager { font-size: 0.9375rem; }
.rf-resto .erro-guardado__onde { font-size: 0.8438rem; }
.rf-resto .erro-guardado__q { font-size: 1rem; }
.rf-resto .erro-guardado__marca { font-size: 0.875rem; }
.rf-resto .nb-summary { font-size: 1.125rem; }
.rf-resto .nb-prova__frase { font-size: 1.375rem; }
@media (min-width: 600px) { .rf-resto .nb-summary { font-size: 1.375rem; } }
@media (min-width: 600px) { .rf-resto .nb-prova__frase { font-size: 1.625rem; } }
.rf-resto .nb-grupo__nota { font-size: 0.875rem; }
.rf-resto .nb-row .n { font-size: 0.8438rem; }
.rf-resto .nb-row .t { font-size: 1.0625rem; }
.rf-resto .nb-row__estado { font-size: 0.875rem; }
.rf-resto .rota-fatos p { font-size: 1.0625rem; }
.rf-resto .faixa__h { font-size: 1.625rem; }
.rf-resto .bloco-row .n { font-size: 0.8438rem; }
.rf-resto .bloco-row .t { font-size: 1rem; }
.rf-resto .bloco-row .t small { font-size: 0.8438rem; }
.rf-resto .bloco-row__nota { font-size: 0.8438rem; }
.rf-resto .field__label { font-size: 0.9375rem; }
.rf-resto .field__input { font-size: 1rem; }
.rf-resto .field__hint { font-size: 0.875rem; }
.rf-resto .field__error { font-size: 0.875rem; }
.rf-resto .conta__h { font-size: 1.625rem; }
.rf-resto .ledger dt { font-size: 0.875rem; }
.rf-resto .ledger dd { font-size: 1.0625rem; }
.rf-resto .key__s { font-size: 0.875rem; }
.rf-resto .result2 { font-size: 1.125rem; }
@media (min-width: 600px) { .rf-resto .result2 { font-size: 1.375rem; } }
.rf-resto .start__note { font-size: 0.875rem; }
.rf-resto .guardei-lista li::before { font-size: 0.8438rem; }
.rf-resto .guardei-lista b { font-size: 1.0625rem; }
.rf-resto .guardei-lista span { font-size: 0.875rem; }
.rf-resto .estados__n { font-size: 1.0625rem; }
.rf-resto .estados__nome { font-size: 0.9375rem; }
.rf-resto .estados__o-que { font-size: 0.875rem; }
.rf-resto .selo { font-size: 0.8125rem; }
.rf-resto .dominio__label { font-size: 0.9375rem; }
.rf-resto .dominio__note { font-size: 0.875rem; }
.rf-resto .calibragem__frase { font-size: 1rem; }
.rf-resto .calibragem__nota { font-size: 0.875rem; }
.rf-resto .confianca__p { font-size: 0.9375rem; }
.rf-resto .confianca-dita { font-size: 0.875rem; }
.rf-resto .preteste__p { font-size: 1rem; }
.rf-resto .preteste__conta { font-size: 0.9375rem; }
.rf-resto .ganhou__h { font-size: 0.875rem; }
.rf-resto .ganhou__frase { font-size: 1.0625rem; }
.rf-resto .ganhou__lista li { font-size: 1rem; }
.rf-resto .painel__nota { font-size: 0.875rem; }
.rf-resto .sem-streak { font-size: 0.875rem; }
.rf-resto .etapa-ind__n { font-size: 0.875rem; }
.rf-resto .etapa-ind__nome { font-size: 0.9375rem; }
.rf-resto .etapa-ind__sub { font-size: 0.8125rem; }
.rf-resto .leitura-fim__h { font-size: 0.9375rem; }
.rf-resto .boas__h { font-size: 2rem; }
.rf-resto .recado__legenda { font-size: 1rem; }
.rf-resto .boas__p { font-size: 1.125rem; }
.rf-resto .boas__contato { font-size: 0.9375rem; }
@media (min-width: 600px) { .rf-resto .boas__h { font-size: 2.75rem; } }
@media (min-width: 600px) { .rf-resto .boas__p { font-size: 1.1875rem; } }
.rf-resto .guardei__hoje { font-size: 1.0625rem; }
.rf-resto .estante__h { font-size: 1.375rem; }
.rf-resto .estante__n { font-size: 0.875rem; }
.rf-resto .estante__o-que { font-size: 1.0625rem; }
.rf-resto .estante__quando { font-size: 0.9375rem; }
.rf-resto .tocador__onde { font-size: 0.875rem; }
.rf-resto .tocador__t { font-size: 1.375rem; }
.rf-resto .tocador__hoje { font-size: 0.9375rem; }
.rf-resto .tocador__play { font-size: 1.0625rem; }
.rf-resto .tocador__vel legend { font-size: 0.9375rem; }
.rf-resto .tocador__nota { font-size: 0.875rem; }
.rf-resto .ouvido-direto { font-size: 1.0625rem; }
.rf-resto .ouvido-item__n { font-size: 0.8438rem; }
.rf-resto .ouvido-item__t { font-size: 1.0625rem; }
.rf-resto .ouvido-item__onde { font-size: 0.875rem; }
.rf-resto .hit__onde { font-size: 0.8438rem; }
.rf-resto .hit__t { font-size: 1.125rem; }
.rf-resto .hit__trecho { font-size: 1rem; }
.rf-resto .falar__um { font-size: 1.0625rem; }
.rf-resto .falar__sec p { font-size: 1rem; }
.rf-resto .falar__lista { font-size: 1rem; }
.rf-resto .conta-sec__p { font-size: 1rem; }
.rf-resto .btn--grande { font-size: 1.0625rem; }
.rf-resto .nb-prova__sub { font-size: 1.0625rem; }
/* study_states.css */
.study-html body.study { font-size: 0.9375rem; }
.study-html .btn { font-size: 1rem; }
.study-html .msg__kicker { font-size: 0.875rem; }
.study-html .msg__title { font-size: 1.625rem; }
.study-html .msg__text { font-size: 1.125rem; }
.study-html .msg__list a,
.study-html .msg__list span { font-size: 1.0625rem; }
.study-html .msg__diag { font-size: 0.7188rem; }
.study-html .savefail { font-size: 0.875rem; }
.study-html .savefail__retry { font-size: 0.875rem; }
.study-html .formnote { font-size: 0.9375rem; }
.study-html .warn { font-size: 1rem; }
@media (min-width: 600px) { .study-html .warn { font-size: 1.1875rem; } }
.study-html .prevbox { font-size: 0.9375rem; }
.study-html .prevlabel { font-size: 0.75rem; }
.study-html .pdfbox { font-size: 0.9375rem; }
.study-html .idx .n { font-size: 0.8438rem; }
.study-html .idx .t { font-size: 1.0625rem; }
.study-html .dur__v { font-size: 0.9375rem; }
.study-html .dur__q { font-size: 0.8438rem; }
@media (min-width: 600px) { .study-html .idx .t { font-size: 1.25rem; } }
/* study_shelves.css */
.study-html .shelf__title { font-size: 1.875rem; }
.study-html .shelf__lead { font-size: 1.0625rem; }
.study-html .shelf__kicker { font-size: 0.9062rem; }
.study-html .shelf__count { font-size: 1.0625rem; }
.study-html .shelf__note { font-size: 0.9062rem; }
.study-html .rate__t { font-size: 0.8438rem; }
.study-html .sec { font-size: 1.25rem; }
.study-html .transcript__t { font-size: 0.8438rem; }
.study-html .transcript__x { font-size: 1.0625rem; }
@media (min-width: 600px) { .study-html .shelf__title { font-size: 2.75rem; } }
@media (min-width: 600px) { .study-html .shelf__lead { font-size: 1.25rem; } }
@media (min-width: 600px) { .study-html .shelf__count { font-size: 1.25rem; } }
@media (min-width: 600px) { .study-html .sec { font-size: 1.5rem; } }
@media (min-width: 600px) { .study-html .transcript__x { font-size: 1.1875rem; } }
/* study_pdf.css */
.study-html .pdfsel__title { font-size: 1.875rem; }
.study-html .pdfsel__lead { font-size: 1.125rem; }
.study-html .pdfsel__p { font-size: 0.9375rem; }
.study-html .pdfsel__planh { font-size: 1.0625rem; }
@media (min-width: 600px) { .study-html .pdfsel__title { font-size: 2.75rem; } }
@media (min-width: 600px) { .study-html .pdfsel__lead { font-size: 1.25rem; } }
@media (min-width: 600px) { .study-html .pdfsel__planh { font-size: 1.1875rem; } }
/* study_ouvido.css */
.rf-resto .tocador__vel .rate__t { font-size: 0.8438rem; }
.rf-resto .tocador .formnote { font-size: 1rem; }
.rf-resto .ouvido-item__ouvida { font-size: 0.875rem; }
.rf-resto .transcript__t { font-size: 0.8438rem; }
.rf-resto .transcript__x { font-size: 1.0625rem; }
/* study_search.css */
.rf-resto .sch__pageof { font-size: 0.875rem; }
.rf-resto .msg__diag { font-size: 0.8125rem; }
/* study_annex.css */
.study-html .annex__toc-title { font-size: 0.8438rem; }
.study-html .annex__title { font-size: 1.4375rem; }
@media (min-width: 600px) { .study-html .annex__title { font-size: 1.625rem; } }
/* ── fim do bloco gerado ── */

/* ── 1 · Os papéis destas telas, no claro e no escuro ───────────────────────────────────
   Os mesmos da V4, com nome desta folha (`--rf-r-*`), para a régua medir os pares do que ESTA
   folha pinta. No escuro, os tons que a V4 mediu (petróleo, revisão e frase recuperada próprios):
     texto        #EDE6DA · 13,77:1 no #1A1C1F · 12,73:1 na superfície #202326
     apoio        #C9C2B6 · 9,66:1 no #1A1C1F
     ação/link    #F2B38F · 9,45:1 no #1A1C1F; o texto do botão (#202326) nele, 8,74:1
     contorno     #8C8780 · 4,79:1 no #1A1C1F
     feito        #6FC2AE · 8,13:1 no #1A1C1F
     revisão      #E0B060 · 8,58:1 no #1A1C1F
   ⭐ D6-02 (gate D6 v2): o `body:has(...)` é dos áudios do 47º e do entrar (`base.html`, sem tema
   escuro). O detalhe do No Ouvido do 48º também tem `#audio-mark-heard`, mas é `.study-html`: lá
   os papéis vêm do `<html>` (claro ou escuro), e o `body` ⛔ pode redeclará-los claros — era o
   título a 1,08:1 e os controles do tocador a 1:1 no escuro. Daí o `:not(.study-html) >`. */
.study-html,
.rf-erro,
.page-reader,
:not(.study-html) > body:has(main :is(.auth-wrap, .audio-group, #audio-mark-heard, .audio-resume)) {
  --rf-r-fundo: var(--rf-fundo);
  --rf-r-superficie: var(--rf-pedra);
  --rf-r-texto: var(--rf-grafite);
  --rf-r-apoio: var(--rf-texto2);
  --rf-r-acao: var(--rf-cobre);
  --rf-r-acao-texto: var(--rf-branco);
  --rf-r-link: var(--rf-cobre-texto);
  --rf-r-contorno: var(--rf-borda);
  --rf-r-feito: var(--rf-petroleo);
  --rf-r-revisao: var(--rf-revisao);
  /* os ícones desenhados (S40): máscara; a cor é a do texto (`currentColor`) */
  --rf-r-ico-feito: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --rf-r-ico-mais: 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'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --rf-r-ico-menos: 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'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.study-html[data-tema-aluno="escuro"] {
  --rf-r-fundo: #1A1C1F;
  --rf-r-superficie: var(--rf-grafite);
  --rf-r-texto: #EDE6DA;
  --rf-r-apoio: var(--rf-tinta-escura);
  --rf-r-acao: var(--rf-cobre-claro);
  --rf-r-acao-texto: var(--rf-grafite);
  --rf-r-link: var(--rf-cobre-claro);
  --rf-r-contorno: #8C8780;
  --rf-r-feito: #6FC2AE;
  --rf-r-revisao: #E0B060;
}
/* As telas v3 declaram um `--alert` vermelho (`#B02A30`; no escuro `#E0666B`): o erro da área é
   cinza (e tracejado onde é estado), ⛔ vermelho. E o `--serif` delas vira a Hanken pela base. */
.rf-resto { --alert: var(--rf-r-apoio); }

/* ── 2 · Um título por tela, a leitura em 18 px ─────────────────────────────────────── */
.study-html .page__title,
.study-html .shelf__title,
.study-html .pdfsel__title,
.study-html .msg__title,
body:has(main .auth-wrap) .auth-card h2,
body:has(main :is(.audio-group, #audio-mark-heard)) main h2:first-of-type,
.rf-erro .rf-erro__corpo h1 {
  font-family: var(--rf-titulo);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  color: var(--rf-r-texto);
}
/* ⭐ D6-05-R5 (re-gate em lote): a letra FLUIDA dos títulos de `base.html` acompanha a letra da pessoa. `app.css`
   (`h2 { clamp(1.6rem, 3.2vw, 2.3rem) }`: entrar, senha, "No Ouvido" do 47º) e `rota-forte.css`
   (`.rf-erro__corpo h1 { clamp(2rem, 6vw, 3rem) }`: 404 e 500) medem o termo do meio em `vw`, que ⛔ acompanha a
   letra: com ela a 32, de 600 a 1920 px o título crescia menos que o dobro (a 1440, 36,8 → 51,2 e 48 → 86,4 px). O
   termo em `vw` passa a ser multiplicado pela letra da pessoa (`1rem / 16px`: 1 com a letra padrão, 2 com ela a 32):
   a 16 px os três termos são os de antes, em toda largura; a 32, os três dobram. ⛔ entra o No Ouvido do 48º (é
   `.study-html`: a letra dele já vem em `rem`). O navegador sem a conta de unidades (`calc` com `px / px`) descarta a
   declaração e fica com a regra de hoje. */
body:has(main .auth-wrap) .auth-card h2,
:not(.study-html) > body:has(main :is(.audio-group, #audio-mark-heard)) main h2:first-of-type {
  font-size: clamp(1.6rem, calc(3.2vw * (1rem / 16px)), 2.3rem);
}
.rf-erro .rf-erro__corpo h1 { font-size: clamp(2rem, calc(6vw * (1rem / 16px)), 3rem); }
.rf-resto .page__lead,
.rf-resto .conta-sec__p,
.study-html .shelf__lead,
.study-html .msg__text { font-family: var(--rf-texto); font-size: 1.125rem; line-height: 1.55; }
.rf-resto .kicker,
.study-html .msg__kicker { color: var(--rf-r-apoio); }
/* o que cada estante tem (o número é dado, ⛔ ação): grafite de apoio, ⛔ o cobre dos links */
.rf-resto .estante__n { color: var(--rf-r-apoio); }

/* O "olho" em caixa-alta acima do título (S10) vira um rótulo de texto, na mesma linha de leitura. */
body:has(main :is(.auth-wrap, .audio-group, #audio-mark-heard)) main .eyebrow {
  text-transform: none; letter-spacing: 0; font-family: var(--rf-texto);
  font-size: .9375rem; font-weight: 600; color: var(--rf-texto2);
}

/* ── 3 · A ação e os controles: o cobre só no botão; o resto vazado, contorno de controle ─ */
.rf-resto .btn,
.study-html .msg .btn { border-radius: var(--rf-raio); }
.rf-resto .btn:not(.btn--primary) { border-color: var(--rf-r-contorno); color: var(--rf-r-texto); }
.rf-resto .btn:not(.btn--primary):hover { border-color: var(--rf-r-texto); color: var(--rf-r-texto); }
.rf-resto .btn--primary:hover { background: var(--rf-cobre-texto); border-color: var(--rf-cobre-texto); color: var(--rf-branco); }
.rf-resto[data-tema-aluno="escuro"] .btn--primary,
.rf-resto[data-tema-aluno="escuro"] .btn--primary:hover {
  background: var(--rf-r-acao); border-color: var(--rf-r-acao); color: var(--rf-r-acao-texto);
}
.rf-resto .tlink,
.study-html .msg .tlink { color: var(--rf-r-link); }
/* o campo da busca e da Conta: a borda de controle e o anel da casa */
.rf-resto .field__input { border-color: var(--rf-r-contorno); border-radius: var(--rf-raio); }
.rf-resto .field__error { color: var(--rf-r-apoio); }
.rf-resto .field--invalid .field__input { border-style: dashed; border-color: var(--rf-r-apoio); }

/* O tema escolhido na Conta: o botão marcado é o do tema da vez, com o ✓ DESENHADO (S40). */
.rf-resto .tema-btn[aria-pressed="true"] { border-color: var(--rf-r-texto); background: transparent; }
.rf-resto .tema-btn[aria-pressed="true"]::before {
  content: ""; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: var(--rf-r-ico-feito) center / contain no-repeat; mask: var(--rf-r-ico-feito) center / contain no-repeat;
}

/* ── 4 · Os vazios com a ação que já existe (S46) ───────────────────────────────────────
   Compras vazia: "Voltar para Hoje" (marcação, só com a chave). Busca sem resultado: a saída
   permanente "Voltar para o meu bloco de hoje" (já existia como link) vira o botão da tela. */
.rf-resto .rf-vazio__acao { margin-top: 1.5rem; }
.rf-resto .sch:has(.sch__none) .sch__today .tlink {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5rem;
  border-radius: var(--rf-raio); background: var(--rf-r-acao); color: var(--rf-r-acao-texto);
  font-weight: 600; text-decoration: none;
}
.rf-resto .sch:has(.sch__none) .sch__today .tlink:hover { background: var(--rf-cobre-texto); color: var(--rf-branco); }
.rf-resto[data-tema-aluno="escuro"] .sch:has(.sch__none) .sch__today .tlink:hover { background: var(--rf-r-acao); color: var(--rf-r-acao-texto); }
/* S59: o texto da lista de compras ⛔ encosta no botão */
.rf-resto .conta-sec .btn { margin-top: 1rem; }
/* D6-06 (gate D6 v2): com a letra a 200 %, o e-mail de contato da Compras vazia (uma palavra só, sem
   ponto de quebra) passava da largura e o `overflow-x: hidden` da tela o cortava. Ele quebra onde
   precisar; a frase e o endereço são os mesmos. */
.rf-resto .conta-sec__p a { overflow-wrap: anywhere; }

/* ── 5 · ⛔ faixa colorida à esquerda (S49) e ⛔ vermelho ────────────────────────────────
   O lugar de hoje no No Ouvido se marca pelo bloco da Costura antes do número e pelo texto que já
   está lá ("onde"), ⛔ a faixa cobre. Os avisos: contorno fino, ⛔ faixa. */
.rf-resto .ouvido-item.is-hoje { box-shadow: none; padding-left: 0; }
.rf-resto .ouvido-item.is-hoje .ouvido-item__n::before {
  content: ""; display: inline-block; width: 12px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 1.5px solid var(--rf-r-acao); border-radius: 2px; background: var(--rf-r-acao);
}
.rf-resto .ouvido-item.is-hoje .ouvido-item__onde { color: var(--rf-r-link); }
.rf-resto .ouvido-item.is-feito .ouvido-item__n::before {
  width: 12px; height: 10px; border-radius: 2px; background: var(--rf-r-feito); vertical-align: -1px;
}
.rf-resto .warn,
.rf-resto .tocador .formnote,
.study-html .formnote,
.rf-resto .sch__standing {
  border: 1px dashed var(--rf-r-apoio); border-left-width: 1px; border-radius: var(--rf-raio);
  padding: .625rem .875rem; background: transparent;
}
.study-html .formnote b { color: var(--rf-r-texto); }
.study-html .annex__prose blockquote { border-left: 1px solid var(--rf-r-contorno); }

/* ── 6 · O topo de `base.html` nas telas da área (S09 e o aviso (a) da V4) ───────────────
   Entrar e senha, leitor de PDF, áudios do 47º e o painel: a 320 a marca dividia a linha com
   "Área do aluno" e "Sair" (o botão cobria a assinatura); com a letra a 200 % o topo passava da
   tela. A assinatura tem o tamanho da casca da área (15 px; 22 px a partir de 600) e o topo QUEBRA
   em duas linhas em vez de cobrir ou transbordar. ⛔ `base.html`: a regra mira o `body` da área. */
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header__inner {
  height: auto; min-height: 4.25rem; flex-wrap: wrap; row-gap: .5rem; padding-block: .5rem;
}
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header .brand { flex: 0 1 auto; min-width: 0; }
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header .brand .rf-assinatura { height: 15px; }
@media (min-width: 600px) {
  body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header .brand .rf-assinatura { height: 22px; }
}
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header .nav {
  flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-left: auto; min-width: 0;
}
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-header .nav .btn {
  min-height: 44px; padding-inline: .75rem; border-radius: var(--rf-raio); white-space: nowrap;
}
/* O painel com a letra a 200 % (aviso a da V4): as linhas do painel e o e-mail do rodapé quebram. */
body:has(main .rf-painel) main :is(p, a, li, span) { overflow-wrap: anywhere; }
body:is(.page-reader, :has(main :is(.auth-wrap, .rf-painel, .audio-group, #audio-mark-heard, .audio-resume))) .site-footer :is(p, a, li) { overflow-wrap: anywhere; }

/* ── 7 · Entrar e senha (S09: o formulário sem corte com a letra a 200 %) ────────────────
   A grade centrava o cartão pela largura MÍNIMA do campo (que cresce com a letra): a coluna agora
   cabe na tela e o campo encolhe com ela. */
body:has(main .auth-wrap) .auth-wrap { grid-template-columns: minmax(0, 1fr); }
body:has(main .auth-wrap) .auth-card { min-width: 0; }
body:has(main .auth-wrap) .field input { min-width: 0; max-width: 100%; }
body:has(main .auth-wrap) .auth-card :is(p, a) { overflow-wrap: anywhere; }
body:has(main .auth-wrap) .auth-card .btn--primary { border-radius: var(--rf-raio); }
/* S17: o foco do campo era o halo dourado de 1,20:1 por cima do anel; agora o anel da casa. */
body:has(main .auth-wrap) .field input:focus,
body:has(main .auth-wrap) .field input:focus-visible {
  outline: 3px solid var(--rf-anel); outline-offset: 2px; border-color: var(--rf-borda); box-shadow: none;
}
/* O erro do formulário: cinza e tracejado, ⛔ vermelho (o texto do Django fica como está — S21). */
body:has(main .auth-wrap) .form-errors {
  color: var(--rf-grafite); border: 1px dashed var(--rf-texto2); border-radius: var(--rf-raio); padding: .625rem .875rem;
}
body:has(main .auth-wrap) .form-errors ul { margin: 0; padding-left: 1.1rem; }
body:has(main .auth-wrap) .form-errors.small { border: 0; padding: .25rem 0 0; }

/* ── 8 · O leitor de PDF (S09: nenhum controle sobre controle a 320 e a 200 %) ───────────
   "Página 1 de 3" ficava por baixo de "Próxima" e "Tela cheia" saía da tela. No estreito (37,5em:
   600 px com a letra padrão, e acompanha a letra do navegador), o indicador ganha a linha dele e
   "Anterior" e "Próxima" dividem a de baixo; as ferramentas quebram. */
.page-reader .reader-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem .75rem;
}
.page-reader .reader-nav [data-reader-prev] { justify-self: start; }
.page-reader .reader-nav [data-reader-next] { justify-self: end; }
.page-reader .reader-nav .btn,
.page-reader .reader-bar .btn,
.page-reader .reader-iconbtn { border-radius: var(--rf-raio); gap: .4rem; }
@media (max-width: 37.5em) {
  .page-reader .reader-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-reader .reader-page-indicator { grid-column: 1 / -1; grid-row: 1; white-space: normal; }
  .page-reader .reader-nav .btn {
    grid-row: 2; justify-self: stretch; min-width: 0; padding-inline: .75rem; white-space: normal; justify-content: center;
  }
  .page-reader .reader-nav [data-reader-next] { grid-column: 2; }
  .page-reader .reader-tools { flex: 1 1 100%; flex-wrap: wrap; }
  .page-reader .reader-bar .btn { white-space: normal; }
}
/* ⭐ D6-05-R5 (re-gate em lote da R2/R3 e R4): com a letra a 32, a 320 e a 390 px, metade da linha ⛔ cabe o ícone e a
   palavra: "Anterior" passava da própria caixa e cobria "Próxima" (41,16 e 6,16 px). 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) cada um ganha a linha inteira, na
   ordem do documento (o indicador em cima, "Anterior", "Próxima"): ⛔ letra menor, ⛔ rótulo escondido, ⛔ palavra
   partida. */
@media (max-width: 19.9375em) {
  .page-reader .reader-nav { grid-template-columns: minmax(0, 1fr); }
  .page-reader .reader-nav [data-reader-next] { grid-column: 1; grid-row: 3; }
}
/* ⭐ D6-05-R4: o título da apostila (`app.css`: uma linha, com reticências) perdia o fim a 320 e a 390 px com a letra a 32
   ("Apostila sintética do 47º" virava "Apostila sintéti…"). 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) ele quebra de linha, inteiro. */
@media (max-width: 19.9375em) {
  .page-reader .reader-bar__title { white-space: normal; overflow-wrap: break-word; }
}
/* ⭐ D6-05-R7 (re-gate da R6): a barra de ferramentas e o topo de `base.html` ficavam presos no topo ao rolar (`app.css`,
   `sticky`, os dois em `top: 0`; o topo, `z-index` 50, POR CIMA da barra, 5). A R6 os soltava por faixas de largura e
   altura medidas só com a letra 16 e 32: com a letra 20, 24 ou 28 sobravam janelas (400×480, 480×540, 560×640, 600×640)
   com a barra presa por cima do foco; o Shift+Tab, que leva o controle para o ALTO da janela, era coberto até com a letra
   16 (390×900: "Anterior", "Próxima", o campo e "Ir"; 1440×900 com a letra 32: "Área do aluno" sob o topo); e, lendo com
   a letra 16 no computador, o topo cobria a barra inteira (68 px sob 69). Aqui as duas rolam com a página, no lugar
   delas, em TODA letra e janela: nenhuma camada presa ⇒ nada fica por baixo de nada, nos dois sentidos do teclado. Na
   abertura (rolagem 0) a posição é a mesma de antes; as ferramentas saem da janela ao rolar e voltam pela rolagem ou
   pelo teclado; a tela cheia (`.is-immersive`, `app.css`) continua com os controles dela. ⛔ letra menor, ⛔ controle
   escondido, ⛔ rótulo cortado, ⛔ `z-index`; a ordem, os destinos e o zoom ficam como estão.
   A rolagem do foco deixa meia letra de folga, em cima e embaixo, para o anel (3 px + 2 de afastamento) ⛔ passar da
   borda da janela; e "Pular para o conteúdo" (de `base.html`, colado no canto: o anel saía 5 px para cima e para a
   esquerda; com a letra 32 no celular ele quebra em duas linhas e encostava na borda direita) aparece afastado meia
   letra das bordas, com o raio da casa — SÓ nesta tela (o das outras fica como está). */
.page-reader .reader-bar,
body.page-reader .site-header { position: static; }
html:has(> body.page-reader) { scroll-padding-block: .5rem; }
body.page-reader .skip-link:focus { top: .5rem; left: .5rem; max-width: calc(100% - 1rem); border-radius: var(--rf-raio); }
/* ⭐ D6-05-R8 (re-gate da R7, N1 e N2): a tela cheia (`.is-immersive`, `app.css`) entrava com os controles escondidos
   (`controls-hidden`: transparentes, empurrados para fora da janela e sem ponteiro) e só o toque os trazia de volta. No
   computador, nem o clique nem o Tab: o teclado focava "Área do aluno", o zoom e "Sair" invisíveis, e "Anterior",
   empurrado para baixo, arrastava a tela 71 px ao receber o foco. E as duas faixas eram camadas soltas, cada uma na sua
   borda: a 320×640 com a letra 32 a de baixo (a navegação, de y393) cobria "Aumentar zoom" e "Sair" (y408→496) inteiros
   e, reveladas, as duas tapavam a página toda (o toque ⛔ achava mais página para escondê-las). "Ir para a página"
   ficava por baixo da página do PDF, focável e invisível; "Pular para o conteúdo", por baixo da tela cheia, também.
   Aqui, SÓ na tela cheia (o leitor normal da R7 fica como está), e SÓ com CSS (o template e o JS ficam):
   - as três faixas (o topo, a navegação e "Ir para a página") ocupam linhas próprias de uma grade da altura da janela,
     e a página do PDF ocupa a grade inteira, por baixo delas: uma faixa ⛔ cobre a outra em letra ou janela nenhuma. As
     de baixo têm a altura delas; o topo fica com o que sobra (no mínimo 5em) e rola por dentro quando ⛔ cabe (a roda,
     o dedo e o teclado o rolam até o controle, com a folga de meia letra da R7 para o anel); a linha do meio é a
     leitura que sobra entre as faixas. Se nem as de baixo com o mínimo do topo cabem (janela muito baixa com a letra
     grande, como 640×360 a 32), a coluna inteira rola, com a mesma folga, e a página fica da altura da janela (sem a
     folga, para o foco nela a trazer inteira);
   - o fundo da navegação e o de "Ir para a página" deixam passar o toque e a roda para a página (só os controles os
     pegam): tocar fora de um controle mostra e esconde as faixas e a roda rola o PDF ampliado, também quando as faixas
     tomam a tela toda;
   - com mouse (`any-hover`), as faixas ficam à vista: ⛔ há o que revelar. Pelo teclado, a faixa que recebe o foco
     aparece (`:focus-within`). No toque fica o que era: entra sem as faixas e o toque na página as mostra e esconde (o
     `touchend` do template). Escondidas, elas ficam no lugar delas (⛔ fora da janela: o foco ⛔ arrasta a tela) e
     aparecem sem transição; depois do toque que as revela, os controles esperam .3s para pegar o ponteiro — o clique que
     o navegador manda em seguida ao toque ⛔ aciona o controle que acabou de aparecer debaixo do dedo (a animação de
     `app.css` fazia isso por acaso; o `!important` vence o `animation: none` do movimento reduzido, e ⛔ há movimento);
   - "Pular para o conteúdo" e o rodapé de privacidade saem do caminho do teclado enquanto a tela cheia dura (o topo e o
     rodapé da casa já saíam, `app.css`); a própria página do PDF, que o Chrome deixa focar para rolar pelo teclado e
     ocupa a janela inteira, ganha o anel da casa POR DENTRO (o padrão do navegador ficava fora da janela).
   ⛔ letra menor, ⛔ rótulo cortado, ⛔ controle escondido, ⛔ `z-index`, ⛔ texto; a ordem e os destinos ficam. */
.page-reader .reader.is-immersive .reader__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow-y: auto; scroll-padding-block: .5rem;
  grid-template-rows: minmax(min(100%, 5em), max-content) minmax(0, 1fr) max-content max-content;
}
.page-reader .reader.is-immersive .reader-page {
  position: static; grid-row: 1 / -1; grid-column: 1;
  max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); scroll-margin-block: -.5rem;
}
.page-reader .reader.is-immersive .reader-head {
  position: relative; grid-row: 1; grid-column: 1; align-self: start; max-height: 100%; overflow-y: auto;
  scroll-padding-block: .5rem;
}
.page-reader .reader.is-immersive .reader-nav { position: relative; grid-row: 3; grid-column: 1; }
.page-reader .reader.is-immersive .reader-goto {
  position: relative; grid-row: 4; grid-column: 1; margin: 0; padding: 0 clamp(.5rem, 2vw, 1rem) .4rem;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.page-reader .reader.is-immersive :is(.reader-head, .reader-nav) { transition: none; }
.page-reader .reader.is-immersive :is(.reader-nav, .reader-goto) { pointer-events: none; }
.page-reader .reader.is-immersive.controls-hidden :is(.reader-head, .reader-nav) { transform: none; }
.page-reader .reader.is-immersive.controls-hidden .reader-goto { opacity: 0; }
.page-reader .reader.is-immersive.controls-hidden :is(.reader-head, .reader-nav, .reader-goto):focus-within { opacity: 1; }
.page-reader .reader.is-immersive.controls-hidden .reader-head:focus-within,
.page-reader .reader.is-immersive.controls-hidden :is(.reader-nav, .reader-goto):focus-within :is(a[href], button, input, label),
.page-reader .reader.is-immersive:not(.controls-hidden) :is(.reader-nav, .reader-goto) :is(a[href], button, input, label) {
  pointer-events: auto;
}
@media (any-hover: hover) {
  .page-reader .reader.is-immersive.controls-hidden :is(.reader-head, .reader-nav, .reader-goto) { opacity: 1; }
  .page-reader .reader.is-immersive.controls-hidden .reader-head,
  .page-reader .reader.is-immersive.controls-hidden :is(.reader-nav, .reader-goto) :is(a[href], button, input, label) {
    pointer-events: auto;
  }
  /* manutenção P3 do re-gate da R8: com as faixas à vista, a dica do toque (`reader.html`) ⛔ vale no computador; no
     toque sem mouse ela fica como era. ⛔ texto. */
  .page-reader .reader.is-immersive .reader-tip { display: none; }
}
.page-reader .reader.is-immersive:not(.controls-hidden) .reader-head,
.page-reader .reader.is-immersive:not(.controls-hidden) :is(.reader-nav, .reader-goto) :is(a[href], button, input, label) {
  animation: rf-leitor-toque .3s !important;
}
@keyframes rf-leitor-toque { from, to { pointer-events: none; } }
.page-reader .reader.is-immersive .reader-page:focus-visible { outline: 3px solid var(--rf-anel); outline-offset: -5px; }
body.page-reader .skip-link:has(~ main .reader.is-immersive) { display: none; }
body.page-reader.reader-immersive .student-foot { display: none; }
.page-reader .reader-page-indicator { font-size: 1rem; color: var(--rf-texto2); }
.page-reader .reader-bar__title { font-family: var(--rf-titulo); font-weight: 700; }
.page-reader .reader-iconbtn[aria-pressed="true"] { background: var(--rf-grafite); border-color: var(--rf-grafite); color: var(--rf-branco); }
.page-reader .progress { border: 1px solid var(--rf-borda); border-radius: 2px; background: var(--rf-fundo); height: 8px; }
.page-reader .progress__fill { background: var(--rf-petroleo); border-radius: 0; }
.page-reader .reader-next-doc .btn--primary { background: var(--rf-cobre); border-color: var(--rf-cobre); color: var(--rf-branco); }
/* ⛔ o emoji de livros como ícone do índice (S40) */
.page-reader .reader-index__label::before { content: none; }

/* ── 9 · Os ícones desenhados (S40) ─────────────────────────────────────────────────────
   `reader/_ico_rf.html` no leitor e nos áudios; e o "+"/"−" do grupo de áudios, em máscara. */
.rf-ico { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
body:has(main .audio-group) .audio-group__toggle::before,
body:has(main .audio-group) .audio-group[open] .audio-group__toggle::before {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background: currentColor;
  -webkit-mask: var(--rf-r-ico-mais) center / contain no-repeat; mask: var(--rf-r-ico-mais) center / contain no-repeat;
}
body:has(main .audio-group) .audio-group[open] .audio-group__toggle::before {
  -webkit-mask-image: var(--rf-r-ico-menos); mask-image: var(--rf-r-ico-menos);
}
/* ⚠ "✓ Ouvida" / "✓ Ouvido" FICAM: é o literal que o `audio-player.js` escreve (contrato C9 da F13,
   fixado por `test_f13_integration` e `test_navigation_f13`). Trocar exige mudar o JS e a régua:
   decisão do MENTOR, ⛔ desta fatia. */
/* áudios do 47º: o aviso calmo (⛔ faixa dourada à esquerda) e o feito em petróleo */
body:has(main :is(.audio-group, #audio-mark-heard)) .notice { border: 1px solid var(--rf-borda); border-radius: var(--rf-raio); background: var(--rf-fundo); }
body:has(main :is(.audio-group, #audio-mark-heard)) .badge--active { background: var(--rf-petroleo-claro); color: var(--rf-petroleo-escuro); border-color: var(--rf-petroleo-claro); }
body:has(main :is(.audio-group, #audio-mark-heard)) .meta-row { gap: .5rem 1.25rem; }
body:has(main :is(.audio-group, #audio-mark-heard)) .meta__value { margin-left: .25em; }

/* ── 10 · 404 e 500 (S09 e S58) ─────────────────────────────────────────────────────────
   O e-mail longo quebra (a 200 % ele empurrava a página a 536 px); "Voltar para o início" é link
   (cor e sublinhado), ⛔ cinza solto. */
.rf-erro .site-header .brand .rf-assinatura { height: 15px; }
@media (min-width: 600px) { .rf-erro .site-header .brand .rf-assinatura { height: 22px; } }
.rf-erro .rf-erro__corpo { max-width: 40rem; }
.rf-erro .rf-erro__corpo a { color: var(--rf-cobre-texto); text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }

/* ── 11 · A pendência (S07) ─────────────────────────────────────────────────────────────
   A única ação era "Pedir o dinheiro de volta": a ação de ajuda ("Falar comigo", o rótulo da barra
   de abas, para o mesmo contato) é o botão; o pedido de devolução continua logo abaixo, como link. */
.study-html .msg .msg__actions + .msg__exit { margin-top: 1.25rem; }

/* Movimento reduzido: nada aqui anima. */