/* rn-ajuda — o botão de ajuda padrão do app (regra constitucional de 27/09).
   Molde: docs/rodada_botao_ajuda_2026-09-27/rn_ajuda.html (Jean Claude) — o bloco
   abaixo é CÓPIA LITERAL de "rn-ajuda — O COMPONENTE REAL" até "fim do componente".
   Os tokens do :root do molde vêm aqui como padrão do próprio componente, porque o
   app não os declara no :root (moram em .rn-per / ficha_v4). Valores idênticos ao molde. */
.rn-ajuda,.rn-ajuda-folha,.rn-ajuda-balao{
  --card-line-1:rgba(255,255,255,.18);--card-line-2:rgba(255,255,255,.28);--card-line-ouro:rgba(201,162,39,.5);
  --ui:'Jost','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,serif;
}
/* ══════════════════════════════════════════════════════════════════
   rn-ajuda — O COMPONENTE REAL (copiar verbatim pro app)
   Um botão, duas formas: .rn-ajuda--so («?» sozinho, 24×24, toque 44)
   e .rn-ajuda--chip (o termo é o botão, 32 de altura, toque 44).
   Estado aberto = aria-expanded="true" (é o JS que põe/tira).
   ══════════════════════════════════════════════════════════════════ */
.rn-ajuda{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0;padding:0;
  border:1px solid var(--card-line-1);background:rgba(255,255,255,.02);color:var(--text3);
  font:500 var(--fs-sm)/1 var(--ui);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
/* área de toque invisível — o host É position:relative (senão o ::before sobe pro pai e vira toque de tela inteira, C-monta11) */
.rn-ajuda::before{content:"";position:absolute;inset:-10px}          /* A: 24 + 2×10 = 44 */
.rn-ajuda--so{width:24px;height:24px;border-radius:7px 7px 7px 3px}
.rn-ajuda--chip{height:32px;gap:7px;padding:0 7px 0 11px;border-radius:9px 9px 9px 4px}
.rn-ajuda--chip::before{inset:-6px}                                   /* B: 32 + 2×6 = 44 */
.rn-ajuda-glifo{display:block;flex:none;width:18px;height:18px}      /* nunca abaixo de 16px: o ponto e o vão somem */
.rn-ajuda--chip .rn-ajuda-glifo{width:16px;height:16px}
.rn-ajuda-termo{color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em;transition:color .18s var(--ease)}
@media(hover:hover){.rn-ajuda:hover{color:var(--gold);border-color:var(--card-line-ouro)}}
.rn-ajuda:active,.rn-ajuda[aria-expanded="true"]{color:var(--gold);border-color:var(--card-line-ouro);background:rgba(201,162,39,.06)}
.rn-ajuda[aria-expanded="true"] .rn-ajuda-termo{color:var(--text)}   /* o termo sobe de brilho; só o glifo e a borda vão a ouro */
.rn-ajuda:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── a explicação: mesmo miolo nas duas caixas ── */
.rn-ajuda-eb{margin:0;font:500 var(--fs-micro)/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rn-ajuda-t{margin:8px 0 0;font:500 var(--fs-xl)/1.15 var(--serif);color:var(--text);text-wrap:pretty}
.rn-ajuda-p{margin:10px 0 0;font:400 var(--fs-md)/1.45 var(--ui);color:var(--text2);text-wrap:pretty}
.rn-ajuda-p+.rn-ajuda-p{margin-top:8px}

/* ── PORTE JANELAS FATIA 6 (07/10): a folha e o balão do «?» vestem a placa do padrão v2
   [CÓPIA] fonte: docs/rodada_janelas_contexto_2026-10-06/DO_JEAN/janela_contexto_v2.css
   (§1 véu · §2 placa chumbo + madrepérola + aro · §3 fio · §7 folha M · §9 balão · §5 botão fantasma).
   O «?» explica → acento AZUL (.rnj--info). Valores literais com o token v2 na frente, porque este
   arquivo também roda no lado do aluno (ficha/index.html), que não carrega o janela_contexto_v2.css.
   O marrom (rgba(24,20,14,.96/.97)) morreu aqui. ── */
.rn-ajuda-folha,.rn-ajuda-balao{--rnj-acc:var(--rnj-azul,#5b8def);--rnj-glow:91,141,239}
.rn-ajuda-eb{margin:0;font:500 var(--fs-micro,11.5px)/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--rnj-text2,#c8bfb0);display:flex;align-items:center;gap:8px}
.rn-ajuda-eb::before{content:"";width:14px;height:1.5px;border-radius:1px;flex:none;background:linear-gradient(90deg,var(--rnj-acc),rgba(var(--rnj-glow),0))}
.rn-ajuda-t{margin:8px 0 0;font:500 var(--fs-xl,22px)/1.2 var(--serif);color:var(--rnj-text,#eee7da);text-wrap:balance}
.rn-ajuda-p{margin:10px 0 0;font:400 var(--fs-sm,14.5px)/1.5 var(--ui);color:var(--rnj-text2,#c8bfb0);text-wrap:pretty}

/* ── FOLHA (celular, <1024) = folha M solta do v2 ── */
.rn-ajuda-folha{position:fixed;inset:0;z-index:var(--rnj-z-folha,10200);display:none;align-items:flex-end;justify-content:center;
  padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:var(--rnj-veu,rgba(8,6,4,.58));-webkit-backdrop-filter:blur(12px) saturate(115%);backdrop-filter:blur(12px) saturate(115%)}
.rn-ajuda-folha.open{display:flex}
.rn-ajuda-folha-card,.rn-ajuda-balao{position:relative;isolation:isolate;color:var(--rnj-text,#eee7da);border:1px solid transparent;
  background:linear-gradient(160deg,var(--rnj-chumbo-1,#262421),var(--rnj-chumbo-0,#1c1b19)) padding-box,
             linear-gradient(150deg,rgba(236,214,170,.48) 0%,rgba(255,255,255,.28) 34%,rgba(255,255,255,.22) 100%) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(238,231,218,.07)}
.rn-ajuda-folha-card::before,.rn-ajuda-balao::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(70% 60% at 16% 10%,rgba(232,170,150,.04),transparent 62%),radial-gradient(70% 55% at 70% 104%,rgba(236,214,170,.03),transparent 62%),linear-gradient(118deg,rgba(238,231,218,.06) 0%,rgba(238,231,218,.021) 28%,transparent 48%)}
.rn-ajuda-folha-card::after,.rn-ajuda-balao::after{content:"";position:absolute;top:8px;left:50%;width:44px;height:3px;transform:translateX(-50%);border-radius:2px;background:var(--rnj-acc);
  box-shadow:0 0 2px rgba(var(--rnj-glow),.9),0 0 10px rgba(var(--rnj-glow),.55),0 0 22px rgba(var(--rnj-glow),.25);pointer-events:none}   /* o fio azul: «isto explica» */
.rn-ajuda-folha-card{display:flex;flex-direction:column;width:100%;max-width:560px;height:var(--rnj-h-m,560px);max-height:calc(100dvh - var(--topo-seguro,32px) - 10px);overflow:auto;overscroll-behavior:contain;
  border-radius:var(--rnj-r,18px);padding:28px 20px 18px;animation:rn-ajuda-sobe .32s cubic-bezier(.23,1,.32,1) both}
.rn-ajuda-ok{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin:auto 0 0;flex:none;
  border:1px solid rgba(255,255,255,.18);border-radius:12px 12px 12px 6px;background:rgba(255,255,255,.02);
  color:var(--rnj-text,#eee7da);font:500 var(--fs-md,16px)/1.2 var(--ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rn-ajuda-folha-card>.rn-ajuda-ok{margin-top:auto}
.rn-ajuda-folha-card>:not(.rn-ajuda-ok):nth-last-child(2){margin-bottom:18px}
.rn-ajuda-ok:active{transform:translateY(1px)}
.rn-ajuda-ok:focus-visible{outline:2px solid rgba(226,194,94,.75);outline-offset:2px}

/* ── BALÃO ANCORADO (Mac, ≥1024) = .rnj-balao do v2 ── */
.rn-ajuda-ancora{position:relative;display:inline-flex}
.rn-ajuda-balao{display:none;position:absolute;left:0;top:calc(100% + 12px);z-index:30;width:min(var(--rnj-w-p,400px),calc(100vw - 32px));
  padding:22px 20px 16px;border-radius:var(--rnj-r,18px);box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(238,231,218,.07);text-align:left}
.rn-ajuda-balao::after{left:26px;transform:none;width:28px}                       /* o fio aponta: do lado da âncora */
.rn-ajuda-balao.open{display:block;animation:rn-ajuda-sobe .26s cubic-bezier(.23,1,.32,1) both}
.rn-ajuda-balao.direita{left:auto;right:0}
.rn-ajuda-balao.direita::after{left:auto;right:26px}
.rn-ajuda-balao .rn-ajuda-t{font-size:var(--fs-lg,18px)}
.rn-ajuda-balao .rn-ajuda-p{font-size:var(--fs-sm,14.5px)}
@media (min-width:1024px) and (min-height:501px), (min-width:1024px) and (pointer:fine){.rn-ajuda-folha{align-items:center;padding:28px}.rn-ajuda-folha-card{width:var(--rnj-w-m,480px);height:auto;max-height:min(86dvh,780px)}.rn-ajuda-folha-card::after{display:none}}

@keyframes rn-ajuda-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rn-ajuda-folha-card,.rn-ajuda-balao.open{animation:none}.rn-ajuda,.rn-ajuda-termo{transition:none}}
/* ═══════════════════════ fim do componente ═══════════════════════ */