/* ==========================================================================
   v7-briefing.css: a página do material como BRIEFING da missão, e o 404 "Essa página saiu do mapa". Dona: Frente 5.
   Fonte: C:\AI\projects\ensino-ulysses\themes\ensino-tema\css\v7-briefing.css
   Camada por cima da v6 (v6-material.css): cabeçalho com chip "Fase n · Passo m", ficha do passo, objetivo e cartão do documento
   em painel, "Terminou este passo?" e passos vizinhos. A cor da matéria vem de data-j-mundo (--m) no <article>.

   FRONTEIRA DA ATIVIDADE: nenhum seletor daqui atinge .ensino-atv nem o que está dentro dele. Os seletores que poderiam
   alcançar texto de atividade (objetivo, cartão de PDF) levam :not(.ensino-atv *). Nada aqui muda a largura, a margem ou
   a fonte do contêiner da atividade (.e-leitura__corpo, .e-prosa): a geometria é a de hoje.
   Movimento só em transform e opacity; html[data-calmo] já zera (v7-jogo.css, seção 16).
   ========================================================================== */

/* ---------- 1. Cabeçalho: voltar, chip da fase, tipo, título, resumo, meta ---------- */
.e-material[data-j-briefing] .e-material__topo{row-gap:.15rem;margin-bottom:1.1rem}
.e-material[data-j-briefing] .e-material__topo .j-voltar{margin:0 .25rem 0 0;min-height:44px}
.e-material[data-j-briefing] .e-migalhas a,.e-material[data-j-briefing] .e-migalhas>span{font-family:var(--j-fonte-ui);font-weight:600}
.e-material[data-j-briefing] .e-migalhas a{color:var(--j-tinta)}
.e-material[data-j-briefing] .e-migalhas>span{color:var(--j-ouro-texto)}
.e-material[data-j-briefing] .e-material__plano{color:var(--j-ouro-texto)}
.j-briefing__onde{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:0 0 .85rem}
/* o chip também se chama .j-fase (a seção da matéria, F4, tem margem de 2rem embaixo): aqui ela não vale */
.j-briefing__onde .j-fase{margin:0}
.j-briefing__onde .e-material__tipo{margin:0;font-family:var(--j-fonte-hud);font-size:.75rem;letter-spacing:.16em;color:var(--j-ouro-texto)}
.j-chip--m{color:var(--m,var(--j-ouro-texto));border-color:color-mix(in srgb,var(--m,var(--j-ouro)) 55%,transparent);background:color-mix(in srgb,var(--m,var(--j-ouro)) 8%,var(--j-painel));
  font-family:var(--j-fonte-hud);font-weight:700;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;min-height:32px;padding:0 .8em}
.e-material[data-j-briefing] .e-material__cabeca h1{font-family:var(--j-fonte-logo);font-weight:700;letter-spacing:-.022em}
.e-material[data-j-briefing] .e-material__resumo{color:var(--j-tinta-2)}
.e-material[data-j-briefing] .e-material__meta{border-top-color:var(--j-linha-2);color:var(--j-tinta-2)}
.e-material[data-j-briefing] .e-material__tempo{font-family:var(--j-fonte-ui)}

/* ---------- 2. Ficha do passo: <dl> em painel; cada dado é uma célula (rótulo em cima, valor embaixo) ---------- */
.j-ficha{display:grid;gap:0;margin:1.5rem 0 0;padding:.35rem 1.1rem .9rem}
.j-ficha__titulo{display:flex;margin:0;padding:.75rem 0 .65rem;border-bottom:1px solid var(--j-linha-2)}
.j-ficha dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.75rem,1fr));gap:.9rem 1rem;margin:.9rem 0 0}
.j-ficha dl>div{display:grid;gap:.35rem;align-content:start;min-width:0}
.j-ficha dt{display:inline-flex;align-items:center;gap:.4rem;font:700 .6875rem/1.2 var(--j-fonte-hud);letter-spacing:.12em;text-transform:uppercase;color:var(--j-tinta-3)}
.j-ficha dt svg{width:15px;height:15px;color:var(--j-ouro-texto)}
.j-ficha dd{margin:0;font:600 1rem/1.3 var(--j-fonte-ui);color:var(--j-tinta);overflow-wrap:anywhere}
.j-ficha dd .e-selo{font-size:.8125rem;white-space:nowrap}
@media (max-width:30rem){.j-ficha dl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 3. Objetivo e cartão do documento: painéis (só o que o v6 gera fora da atividade) ---------- */
.e-prosa .e-objetivo:not(.ensino-atv *){position:relative;margin:0 0 1.5rem;padding:1.1rem 1.3rem 1.2rem;color:var(--j-tinta);
  background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));border:1px solid var(--j-linha-2);border-left:3px solid var(--j-ouro);border-radius:var(--j-raio);
  box-shadow:var(--j-sombra-painel)}
@supports (corner-shape:bevel){.e-prosa .e-objetivo:not(.ensino-atv *){border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}}
.e-prosa .e-objetivo:not(.ensino-atv *) .e-objetivo__rotulo{display:flex;align-items:center;gap:.55rem;font-family:var(--j-fonte-hud);font-size:.75rem;letter-spacing:.16em;color:var(--j-ouro-texto)}
.e-prosa .e-objetivo:not(.ensino-atv *) .e-objetivo__rotulo::before{content:"";flex:none;width:1.15rem;height:1.15rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4.5'/><circle cx='12' cy='12' r='.8' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4.5'/><circle cx='12' cy='12' r='.8' fill='black'/></svg>") center/contain no-repeat}
.e-prosa .e-objetivo:not(.ensino-atv *) .e-objetivo__texto,.e-prosa .e-objetivo:not(.ensino-atv *) .e-objetivo__lista{color:var(--j-tinta)}
.e-prosa .e-objetivo:not(.ensino-atv *) .e-objetivo__lista>li::marker{color:var(--j-ouro-texto)}

.e-prosa .e-doc:not(.ensino-atv *) .e-doc__cartao{position:relative;color:var(--j-tinta);
  background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));border:1px solid var(--j-linha-2);border-radius:var(--j-raio);
  box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-painel),inset 0 0 0 4px var(--j-linha)}
@supports (corner-shape:bevel){.e-prosa .e-doc:not(.ensino-atv *) .e-doc__cartao{border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}}
.e-prosa .e-doc:not(.ensino-atv *) .e-doc__icone{color:var(--j-tinta-2)}
.e-prosa .e-doc:not(.ensino-atv *) .e-doc__nome{color:var(--j-tinta);font-family:var(--j-fonte-logo)}
.e-prosa .e-doc:not(.ensino-atv *) .e-doc__meta{color:var(--j-tinta-2);font-family:var(--j-fonte-hud);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* zona de leitura calma: moldura sem brilho, sem partícula e sem movimento (o visor do PDF é só uma folha) */
.e-prosa .e-doc:not(.ensino-atv *) .e-doc__visor{border-color:var(--j-linha-2);border-radius:var(--j-raio);background:var(--j-fundo-2);box-shadow:none}

/* ---------- 4. Terminou este passo? e passos vizinhos ---------- */
.j-fim-passo{display:grid;gap:1.25rem;max-width:var(--e-medida,70ch);margin:clamp(2rem,5vw,3rem) auto 0;padding:1.3rem 1.4rem}
.e-material[data-j-briefing]:has(.e-doc) .j-fim-passo{max-width:min(100%,var(--e-doc-medida,56rem))}
.e-material[data-j-briefing][data-e-lateral] .j-fim-passo{max-width:min(100%,20rem + var(--e-medida,70ch))}
.j-fim-passo__marcar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 1.5rem}
html:not([data-j-js]) .j-fim-passo__marcar{display:none}
.j-fim-passo h2{margin:0;font:650 1.375rem/1.2 var(--j-fonte-logo);letter-spacing:-.01em;color:var(--j-tinta)}
.j-fim-passo p{margin:.3rem 0 0;color:var(--j-tinta-2);font-size:.975rem;line-height:1.5}
.j-feito[aria-pressed="true"]{color:var(--j-ok)}
.j-feito[aria-pressed="true"]::before{background:color-mix(in srgb,var(--j-ok) 55%,transparent)}
.j-feito[aria-pressed="true"]::after{background:var(--j-ok-fundo);box-shadow:inset 0 0 0 1px var(--j-ok)}
.j-feito .j-so-on{display:none}
.j-feito[aria-pressed="true"] .j-so-on{display:inline}
.j-feito[aria-pressed="true"] .j-so-off{display:none}
.j-passos-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:1.1rem;border-top:1px solid var(--j-linha)}
html:not([data-j-js]) .j-fim-passo__marcar+.j-passos-nav{padding-top:0;border-top:0}
.j-passos-nav a{display:grid;gap:.3rem;align-content:center;min-height:64px;padding:.8rem 1rem;color:var(--j-tinta);text-decoration:none;
  background:var(--j-fundo-1);border:1px solid var(--j-linha-2);border-radius:5px;
  transition:border-color var(--j-d-1),transform var(--j-d-2) var(--j-ease-chegada)}
.j-passos-nav a:hover,.j-passos-nav a:focus-visible{border-color:var(--m,var(--j-ouro))}
.j-passos-nav__ant:hover{transform:translate3d(-3px,0,0)}
.j-passos-nav__prox{grid-column:2;text-align:right}
.j-passos-nav__prox:hover{transform:translate3d(3px,0,0)}
.j-passos-nav small{font:800 .6875rem/1 var(--j-fonte-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--j-tinta-3)}
.j-passos-nav span{font:650 1.0625rem/1.25 var(--j-fonte-logo);overflow-wrap:anywhere}
@media (max-width:40rem){
  .j-fim-passo{padding:1.1rem 1rem}
  .j-fim-passo__marcar{grid-template-columns:1fr}
  .j-fim-passo .j-btn{width:100%}
  .j-passos-nav{grid-template-columns:1fr}
  .j-passos-nav__prox{grid-column:auto;text-align:left}
}

/* ---------- 5. 404: "Essa página saiu do mapa" (continuar? sem contagem regressiva, sem culpa) ---------- */
.j-fim{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--e-cabecalho-real,var(--j-hud-h)) - 3rem);display:grid;place-items:center;text-align:center;padding:2.5rem 0 3rem}
.j-fim .e-404.j-fim__palco{position:relative;z-index:var(--j-z-palco);display:grid;justify-items:center;gap:1.1rem;max-width:none;padding-block:0;background:none}
.j-fim .e-404::before{display:none}
body.j-pagina-404 .e-principal{padding-block:0}
.j-fim .j-fim__num{position:relative;max-width:none;margin:0;font:800 clamp(6rem,4rem + 10vw,11rem)/.9 var(--j-fonte-logo);font-style:normal;font-variation-settings:normal;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--j-linha-ouro)}
.j-fim__pomba{position:absolute;left:50%;top:-34px;width:44px;height:44px;margin-left:-22px;color:var(--j-ouro);-webkit-text-stroke:0;animation:j-procura 9s var(--j-ease-respira) infinite}
.j-fim__pomba svg{width:100%;height:100%;animation:j-flutua-fim 1.6s var(--j-ease-respira) infinite alternate}
@keyframes j-flutua-fim{to{transform:translate3d(0,-5px,0)}}
/* a pomba procura a página: vai e volta por cima do número e vira nas pontas (scaleX passa por zero: parece girar) */
@keyframes j-procura{0%{transform:translate3d(-170px,6px,0) scaleX(1)}44%{transform:translate3d(170px,-14px,0) scaleX(1)}50%{transform:translate3d(170px,-14px,0) scaleX(-1)}94%{transform:translate3d(-170px,6px,0) scaleX(-1)}100%{transform:translate3d(-170px,6px,0) scaleX(1)}}
.j-fim h1.e-404__titulo{margin:0;font:700 clamp(1.75rem,1.3rem + 2vw,2.75rem)/1.1 var(--j-fonte-logo);letter-spacing:-.02em;color:var(--j-tinta)}
.j-fim .e-404__texto{max-width:46ch;margin:0;color:var(--j-tinta-2);font-size:1.0625rem}
.j-fim__menu{display:grid;gap:.6rem;width:min(360px,100%);margin:.5rem 0 0;padding:0;list-style:none;position:relative}
.j-fim__menu a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:0 1.1rem;font:700 1.0625rem/1 var(--j-fonte-ui);color:var(--j-tinta);text-decoration:none;
  background:var(--j-painel);border:1px solid var(--j-linha-2);border-radius:5px;transition:transform var(--j-d-2) var(--j-ease-chegada),background-color var(--j-d-1)}
@supports (corner-shape:bevel){.j-fim__menu a{border-radius:12px 4px;corner-shape:bevel}}
.j-fim__menu a:hover,.j-fim__menu a:focus-visible,.j-fim__menu a.j-alvo{background:var(--j-sel);color:var(--j-sel-tinta);transform:translate3d(6px,0,0)}
.j-fim__menu svg{width:18px;height:18px;flex:none}
.j-fim__busca{display:grid;justify-items:center;gap:.5rem;width:min(360px,100%);margin-top:.75rem}
.j-fim__busca-rotulo{margin:0;font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-tinta-3)}
.j-fim .e-busca-form{width:100%;margin:0}
@media (max-width:40rem){.j-fim__pomba{animation-name:j-procura-curto}}
@keyframes j-procura-curto{0%{transform:translate3d(-110px,6px,0) scaleX(1)}44%{transform:translate3d(110px,-14px,0) scaleX(1)}50%{transform:translate3d(110px,-14px,0) scaleX(-1)}94%{transform:translate3d(-110px,6px,0) scaleX(-1)}100%{transform:translate3d(-110px,6px,0) scaleX(1)}}
html[data-calmo] .j-fim__pomba{animation:none;transform:translate3d(0,0,0)}

/* ---------- 6. Impressão: nada de decoração de jogo no briefing ---------- */
@media print{
  .j-ficha,.j-fim-passo,.j-voltar,.j-chip--m,.j-fim__pomba,.j-fim .j-mundo{display:none!important}
}