/* lab/apocalipse/app.css — identidade PRÓPRIA do estudo (não usa o visual da BPSO, decisão do Bruno):
   papel e tinta, marca-texto âmbar como assinatura, Fraunces + Inter + Caveat.
   Quadro branco é o padrão ([data-theme="light"] no <html>); sem o atributo, quadro-negro.
   Regras do spec §7: tronco é a linha dominante; nenhum texto sob linha; marca-texto só agrupa períodos. */

:root {
  --papel: #1f2522; --tinta: #ecebe4; --tinta-2: #c4c3b9; --mudo: #9b9a90; --ponto: rgba(255,255,255,.075);
  --tronco: #f3f2ec; --galho: #b7b6ac; --arco: #8f8e85; --lapis: #a9a89e;
  --superficie: #262d29; --superficie-2: #2c3430; --borda: rgba(236,235,228,.14); --sombra: 0 12px 34px rgba(0,0,0,.38);
  --hl-amber: color-mix(in srgb, #fde68a 30%, #1f2522); --hl-rose: color-mix(in srgb, #fecdd3 28%, #1f2522);
  --hl-sky: color-mix(in srgb, #bfdbfe 28%, #1f2522); --hl-mint: color-mix(in srgb, #bbf7d0 26%, #1f2522);
  --hl-lilac: color-mix(in srgb, #ddd6fe 28%, #1f2522); --hl-peach: color-mix(in srgb, #fed7aa 28%, #1f2522);
  --hl-stone: color-mix(in srgb, #e2e0dc 20%, #1f2522); --hl-blend: normal;
  --vc: #f3f2ec; --vc-texto: #1f2522;
  --f-titulo: 'Fraunces', Georgia, serif; --f-ui: 'Inter', system-ui, sans-serif; --f-lapis: 'Caveat', 'Comic Sans MS', cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
[data-theme="light"] {
  --papel: #fbfbf8; --tinta: #161616; --tinta-2: #3a3a37; --mudo: #6f6f6a; --ponto: rgba(22,22,22,.11);
  --tronco: #0e0e0e; --galho: #3d3d3a; --arco: #7a7a74; --lapis: #66665f;
  --superficie: #ffffff; --superficie-2: #f4f4f0; --borda: rgba(22,22,22,.12); --sombra: 0 14px 38px rgba(22,22,22,.12), 0 2px 6px rgba(22,22,22,.06);
  --hl-amber: #fde68a; --hl-rose: #fecdd3; --hl-sky: #bfdbfe; --hl-mint: #bbf7d0;
  --hl-lilac: #ddd6fe; --hl-peach: #fed7aa; --hl-stone: #e2e0dc; --hl-blend: multiply;
  --vc: #161616; --vc-texto: #ffffff;
}

/* ---------- página, cabeçalho e rodapé (identidade do estudo) ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* vinha do lab.css; sem ele, display:grid/flex venceria o atributo */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.apoc-pagina { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-ui); -webkit-font-smoothing: antialiased; }
.apoc-pular { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--tinta); color: var(--papel); font: 500 14px var(--f-ui); }
.apoc-pular:focus { top: 10px; }

.apoc-topo { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 0 16px 0 18px; background: var(--papel); border-bottom: 1px solid var(--borda); }
.apoc-marca { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; color: var(--tinta); text-decoration: none; }
.apoc-marca__simbolo { width: 24px; height: 24px; flex: none; align-self: center; color: var(--tinta); }
.apoc-marca__nome { font: 600 21px/1 var(--f-titulo); letter-spacing: -.012em; padding: 0 .12em;
  background: linear-gradient(transparent 56%, var(--hl-amber) 56%, var(--hl-amber) 90%, transparent 90%); }
.apoc-marca__sub { font: 500 12.5px/1 var(--f-ui); color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apoc-topo__nav { display: flex; align-items: center; gap: 4px; }
.apoc-topo__link, .apoc-topo__tema { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 999px;
  font: 500 13.5px/1 var(--f-ui); color: var(--tinta-2); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.apoc-topo__link i, .apoc-topo__tema i { font-size: 17px; }
.apoc-topo__link:hover, .apoc-topo__tema:hover { background: var(--superficie-2); color: var(--tinta); }
.apoc-topo__link:focus-visible, .apoc-topo__tema:focus-visible, .apoc-marca:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.apoc-topo__tema { width: 38px; padding: 0; justify-content: center; }
[data-theme="light"] .apoc-tema__negro, :root:not([data-theme="light"]) .apoc-tema__branco { display: none; }
.apoc-destaque { padding: 0 .08em; background: linear-gradient(transparent 58%, var(--hl-amber) 58%, var(--hl-amber) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.apoc-rodape { border-top: 1px solid var(--borda); background: var(--papel); }
.apoc-rodape__inner { max-width: 760px; margin: 0 auto; padding: 22px 20px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  font: 400 13px/1.5 var(--f-ui); color: var(--mudo); }
.apoc-rodape__inner p { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.apoc-rodape__marca .apoc-marca__simbolo { width: 18px; height: 18px; color: var(--mudo); }
.apoc-rodape a { color: var(--tinta-2); text-underline-offset: 3px; }

/* ---------- palco ---------- */
.apoc-palco {
  position: relative; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none;
  height: calc(100svh - var(--apoc-topo, 56px)); min-height: 480px;
  background-color: var(--papel);
  background-image: radial-gradient(var(--ponto) 1px, transparent 1.4px);
  background-size: 22px 22px;
  cursor: grab; outline: none;
}
.apoc-palco.is-arrastando { cursor: grabbing; }
.apoc-palco:focus-visible { box-shadow: inset 0 0 0 2px var(--tinta-2); }
.apoc-quadro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- SVG: traços ---------- */
.apoc-quadro text { font-family: var(--f-ui); paint-order: stroke; stroke: var(--papel); stroke-width: 4px; stroke-linejoin: round; fill: var(--tinta); }
.apoc-quadro .tr-tronco { fill: none; stroke: var(--tronco); stroke-width: 5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-galho  { fill: none; stroke: var(--galho); stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-ponte  { fill: none; stroke: var(--papel); stroke-width: 6px; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-arco   { fill: none; stroke: var(--arco); stroke-width: 1.2px; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-vc     { fill: none; stroke: var(--tinta); stroke-width: 1.3px; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-lapis  { fill: none; stroke: var(--lapis); stroke-width: 1.2px; stroke-dasharray: 3 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-guia   { fill: none; stroke: var(--arco); stroke-width: 1px; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .tr-quebra { fill: none; stroke: var(--tronco); stroke-width: 1.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .hl { mix-blend-mode: var(--hl-blend); transform-box: fill-box; transform-origin: left center; }
.apoc-quadro .placa { fill: var(--papel); }
/* a seta da nota do autor some junto com a nota (limiar 0,22 = nível 2) */
.apoc[data-z="0"] .seta-nota, .apoc[data-z="1"] .seta-nota { display: none; }
.apoc-zona { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0;
  background: repeating-linear-gradient(135deg, var(--ponto) 0 1.5px, transparent 1.5px 9px); }

/* nós */
.apoc-quadro .no { cursor: pointer; outline: none; }
.apoc-quadro .no-alvo { fill: transparent; }
.apoc-quadro .no-ponto { fill: var(--tronco); stroke: var(--papel); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.apoc-quadro .no-anel { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.apoc-quadro .no-icone { fill: none; stroke: var(--tinta); stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.apoc-quadro .no-icone .ch { fill: var(--tinta); stroke: none; }
.apoc-quadro .no:hover .no-anel, .apoc-quadro .no:focus-visible .no-anel { stroke-width: 2.4px; }
.apoc-quadro .no:focus-visible .no-foco { stroke: var(--tinta); stroke-width: 1.5px; stroke-dasharray: 3 3; fill: none; vector-effect: non-scaling-stroke; }
.apoc-quadro .no.is-ativo .no-anel { fill: var(--hl-amber); }
/* o que abre explicação se mostra: contorno ao passar o mouse e ao focar (fichas, placas, selos) */
.apoc-quadro .placa, .apoc-quadro .ficha, .apoc-quadro .vc-selo { transition: stroke-width .15s; }
.apoc-quadro .no:hover .placa, .apoc-quadro .no:hover .ficha { stroke: var(--tinta-2); stroke-width: 1px; }
.apoc-quadro .no:focus-visible .placa, .apoc-quadro .no:focus-visible .ficha, .apoc-quadro .no:focus-visible rect.vc-selo,
.apoc-quadro .no:focus-visible .no-anel { stroke: var(--tinta); stroke-width: 1.6px; stroke-dasharray: 3 2; }
.apoc-quadro .no:hover .no-anel { stroke-width: 2.4px; }
.apoc-dica { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px; font: 500 13px/1.3 var(--f-ui); color: var(--tinta-2);
  background: var(--superficie); border: 1px dashed var(--lapis); box-shadow: var(--sombra); pointer-events: none; }
.apoc-dica i { font-size: 16px; color: var(--tinta); }
.apoc-voltar { position: sticky; top: 12px; z-index: 5; display: flex; width: fit-content; margin: 0 0 8px auto; }

/* rótulos (tamanhos em unidades de mundo; o LOD decide quem aparece) */
.apoc-quadro .rt-marco   { font-size: 13px; font-weight: 500; }
.apoc-quadro .rt-forte   { font-size: 15px; font-weight: 600; }
.apoc-quadro .rt-ano     { font-size: 10.5px; fill: var(--mudo); font-variant-numeric: tabular-nums; }
.apoc-quadro .rt-galho   { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; fill: var(--mudo); }
.apoc-quadro .rt-seg     { font-size: 11px; font-weight: 500; fill: var(--tinta-2); }
.apoc-quadro .rt-marca   { font-size: 10px; font-weight: 500; fill: var(--tinta-2); }
.apoc-quadro .rt-arco    { font-size: 11px; font-style: italic; fill: var(--mudo); }
.apoc-quadro .rt-zona    { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--mudo); }
.apoc-quadro .rt-lapis   { font-family: var(--f-lapis); font-size: 19px; fill: var(--lapis); }
.apoc-quadro .rt-vc      { font-size: 12px; font-weight: 600; fill: var(--vc-texto); stroke: none; }
.apoc-quadro .vc-selo    { fill: var(--vc); }


/* ---------- interface sobre o palco ---------- */
.apoc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 14px;
  font: 500 14px/1 var(--f-ui); color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px;
  cursor: pointer; text-decoration: none; transition: background-color .18s, border-color .18s, transform .18s var(--ease); }
.apoc-btn:hover { border-color: var(--tinta-2); }
.apoc-btn:active { transform: scale(.97); }
.apoc-btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.apoc-btn--icone { padding: 0; width: 40px; }
.apoc-btn--icone i { font-size: 18px; }
.apoc-btn--forte { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.apoc-btn--forte:hover { border-color: var(--tinta); opacity: .92; }

.apoc-ctrl { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent); border: 1px solid var(--borda); box-shadow: var(--sombra); backdrop-filter: blur(8px); }
.apoc-ctrl .apoc-btn { border-color: transparent; background: transparent; }
.apoc-ctrl .apoc-btn:hover { background: var(--superficie-2); }

.apoc-faixas { position: absolute; left: 0; top: 0; width: 0; height: 100%; pointer-events: none; }
.apoc-faixa { position: absolute; left: 10px; transform: translateY(-50%); white-space: nowrap; font: 600 10px/1 var(--f-ui); letter-spacing: .09em;
  text-transform: uppercase; color: var(--mudo); padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--papel) 90%, transparent);
  opacity: 0; transition: opacity .2s; }
.apoc-faixa.is-visivel { opacity: 1; }

.apoc-vcborda { position: absolute; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  font: 600 12px/1 var(--f-ui); color: var(--vc-texto); background: var(--vc); border: 0; border-radius: 999px; cursor: pointer;
  transform: translateY(-50%); box-shadow: var(--sombra); }
.apoc-vcborda.is-esquerda { right: auto; left: 12px; flex-direction: row-reverse; }
.apoc-vcborda.is-esquerda i { transform: scaleX(-1); }

/* régua (mini mapa) */
.apoc-regua { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(520px, calc(100% - 580px)); height: 30px;
  border-radius: 10px; background: color-mix(in srgb, var(--superficie) 86%, transparent); border: 1px solid var(--borda);
  backdrop-filter: blur(8px); cursor: pointer; touch-action: none; }
.apoc-regua svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.apoc-regua .rg-tronco { stroke: var(--tronco); stroke-width: 2px; }
.apoc-regua .rg-galho { stroke: var(--galho); stroke-width: 1px; opacity: .55; }
.apoc-regua .rg-janela { fill: color-mix(in srgb, var(--tinta) 8%, transparent); stroke: var(--tinta); stroke-width: 1.2px; rx: 3px; }
.apoc-regua .rg-vc { stroke: var(--tinta); stroke-width: 1px; stroke-dasharray: 2 2; }

/* aula */
.apoc-aula { position: absolute; z-index: 4; left: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); padding: 16px 16px 12px; border-radius: 18px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.apoc-aula__topo { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline; }
.apoc-aula__n { font: 600 11px/1 var(--f-ui); letter-spacing: .08em; color: var(--mudo); font-variant-numeric: tabular-nums; }
.apoc-aula__titulo { margin: 0; font: 600 18px/1.25 var(--f-titulo); grid-column: 1 / -1; order: 3; }
.apoc-aula__sair { justify-self: end; font: 500 12px/1 var(--f-ui); color: var(--mudo); background: none; border: 0; padding: 6px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.apoc-aula__sair:hover { color: var(--tinta); }
.apoc-aula__texto { margin: 8px 0 12px; font: 400 14.5px/1.6 var(--f-ui); color: var(--tinta-2); }
.apoc-aula__nav { display: flex; align-items: center; gap: 10px; }
.apoc-aula__prog { flex: 1; display: flex; gap: 3px; }
.apoc-aula__prog span { flex: 1; height: 3px; border-radius: 2px; background: var(--borda); transition: background-color .3s; }
.apoc-aula__prog span.is-feito { background: var(--tinta); }

/* abertura */
.apoc-abertura { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--papel) 55%, transparent); }
.apoc-abertura__caixa { width: min(560px, 100%); padding: 28px 28px 22px; border-radius: 22px; background: var(--superficie);
  border: 1px solid var(--borda); box-shadow: var(--sombra); }
.apoc-abertura__kicker { margin: 0 0 10px; font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); }
.apoc-abertura__titulo { margin: 0 0 12px; font: 600 clamp(26px, 4.4vw, 36px)/1.08 var(--f-titulo); letter-spacing: -.015em; }
.apoc-abertura__lead { margin: 0 0 14px; font: 400 16px/1.6 var(--f-ui); color: var(--tinta-2); }
.apoc-abertura__aviso { margin: 0 0 20px; padding: 12px 14px; font: 400 13.5px/1.55 var(--f-ui); color: var(--tinta-2);
  border-left: 3px solid var(--tinta); background: var(--superficie-2); border-radius: 0 10px 10px 0; }
.apoc-abertura__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.apoc-abertura__acoes .apoc-btn { height: 46px; padding: 0 18px; font-size: 15px; }
.apoc-abertura__nota { margin: 16px 0 0; font: 400 12.5px/1.5 var(--f-ui); color: var(--mudo); }

/* card */
.apoc-card { position: absolute; z-index: 5; width: min(380px, calc(100% - 24px)); max-height: min(640px, calc(100% - 24px)); overflow: auto;
  padding: 18px 18px 14px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra);
  overscroll-behavior: contain; touch-action: pan-y; user-select: text; -webkit-user-select: text; cursor: auto; }
/* no celular a folha ocupa a metade de baixo de propósito: a linha do tempo continua visível em cima */
.apoc-card.folha { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 62%; border-radius: 20px 20px 0 0; padding-top: 24px; }
.apoc-card.folha::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--borda); }

/* card por dentro */
.apoc-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.apoc-card__kicker { font: 600 10.5px/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mudo); padding-top: 4px; }
.apoc-card__fechar { flex: none; width: 34px; height: 34px; margin: -6px -8px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--mudo); cursor: pointer; font-size: 18px; display: grid; place-items: center; }
.apoc-card__fechar:hover { background: var(--superficie-2); color: var(--tinta); }
.apoc-card__fechar:focus-visible { outline: 2px solid var(--tinta); }
.apoc-card__titulo { margin: 0 0 10px; font: 600 21px/1.22 var(--f-titulo); letter-spacing: -.01em; outline: none; }
.apoc-card__h { margin: 16px 0 6px; font: 600 10.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mudo); }
.apoc-card__citacao { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--hl-amber); }
.apoc-card__citacao p { margin: 0 0 6px; font: 400 15.5px/1.55 var(--f-titulo); color: var(--tinta); }
.apoc-card__citacao cite, .apoc-card__parafrase cite { font: 500 12px/1.4 var(--f-ui); font-style: normal; color: var(--mudo); }
.apoc-card__parafrase { margin: 0; font: 400 14.5px/1.6 var(--f-ui); color: var(--tinta-2); }
.apoc-card__ler { display: inline-block; margin-top: 8px; font: 500 12.5px/1.4 var(--f-ui); color: var(--tinta-2); text-underline-offset: 3px; }
.apoc-card__p { margin: 0; font: 400 14.5px/1.62 var(--f-ui); color: var(--tinta-2); }
.apoc-card__historia { padding-left: 10px; border-left: 2px solid var(--borda); }
.apoc-card__liga { display: flex; flex-wrap: wrap; gap: 6px; }
.apoc-chip { font: 500 12.5px/1.25 var(--f-ui); color: var(--tinta); text-align: left; padding: 7px 11px; min-height: 32px; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--borda); cursor: pointer; transition: border-color .15s, background-color .15s; }
.apoc-chip:hover { border-color: var(--tinta-2); }
.apoc-chip:focus-visible, .apoc-card__navbtn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.apoc-card__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.apoc-card__navbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  font: 500 13px/1 var(--f-ui); color: var(--tinta-2); cursor: pointer; }
.apoc-card__navbtn:hover:not(:disabled) { background: var(--superficie-2); color: var(--tinta); }
.apoc-card__navbtn:disabled { opacity: .35; cursor: default; }
.apoc-card__fontes { margin-top: 12px; font: 400 12px/1.55 var(--f-ui); color: var(--mudo); }
.apoc-card__fontes summary { cursor: pointer; font-weight: 500; }
.apoc-card__fontes ul { margin: 6px 0 0; padding-left: 16px; }
.apoc-card__fontes a { color: inherit; }
.apoc-btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }

/* firmeza (badge) */
.apoc-firmeza { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-ui); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px;
  background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--borda); }
.apoc-firmeza--biblia   { background: var(--hl-mint); }
.apoc-firmeza--oficial  { background: var(--hl-sky); }
.apoc-firmeza--classica { background: var(--hl-stone); }
.apoc-firmeza--variacoes { background: var(--hl-peach); }
.apoc-firmeza--hipotese { background: transparent; border-style: dashed; font-family: var(--f-lapis); font-size: 15px; font-weight: 500; letter-spacing: 0; }

/* ---------- versão em texto ---------- */
.apoc-txt { background: var(--papel); border-top: 1px solid var(--borda); }
.apoc-txt__inner { max-width: 760px; margin: 0 auto; padding: 56px 20px 72px; }
.apoc-txt__h { margin: 0 0 22px; font: 600 30px/1.15 var(--f-titulo); letter-spacing: -.01em; }
.apoc-txt__sobre { margin: 0 0 36px; padding: 18px 20px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.apoc-txt__sobre h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--f-titulo); }
.apoc-txt__sobre p { margin: 0 0 10px; font: 400 15px/1.65 var(--f-ui); color: var(--tinta-2); }
.apoc-txt__secao { margin: 0 0 34px; }
.apoc-txt__secao > h2 { margin: 0 0 14px; padding-bottom: 8px; font: 600 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mudo); border-bottom: 1px solid var(--borda); }
.apoc-txt__card { padding: 14px 0 16px; border-bottom: 1px dashed var(--borda); }
.apoc-txt__card h3 { margin: 0 0 6px; font: 600 19px/1.3 var(--f-titulo); }
.apoc-txt__meta { margin: 0 0 10px; font: 500 12.5px/1.4 var(--f-ui); color: var(--mudo); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.apoc-txt__card p, .apoc-txt__card blockquote { font: 400 15px/1.65 var(--f-ui); color: var(--tinta-2); }
.apoc-txt__card blockquote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--hl-amber); }
.apoc-txt__card blockquote p { margin: 0 0 4px; font-family: var(--f-titulo); font-size: 16px; color: var(--tinta); }
.apoc-txt__card cite { font: 500 12.5px/1.4 var(--f-ui); font-style: normal; color: var(--mudo); }
.apoc-txt__historia { padding-left: 12px; border-left: 2px solid var(--borda); }
.apoc-txt__fontes { margin: 6px 0 0; padding-left: 18px; font: 400 12.5px/1.6 var(--f-ui); color: var(--mudo); }
.apoc-txt__fontes a { color: inherit; }

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .apoc-topo { height: 52px; padding: 0 8px 0 12px; }
  .apoc-faixa { font-size: 9px; padding: 3px 5px; letter-spacing: .07em; }
  .apoc-marca__sub, .apoc-topo__link span { display: none; }
  .apoc-topo__link, .apoc-topo__tema { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .apoc-marca { min-height: 44px; align-items: center; }
  .apoc-aula__sair { min-height: 44px; padding: 0 6px; }
  .apoc-ctrl { right: 10px; bottom: auto; top: 10px; padding: 4px; gap: 2px; }
  .apoc-ctrl .apoc-btn span { display: none; }
  .apoc-ctrl #btnAula { width: 44px; padding: 0; }
  .apoc-btn { height: 44px; min-width: 44px; }
  .apoc-btn--icone { width: 44px; }
  .apoc-regua { bottom: 12px; width: calc(100% - 24px); }
  .apoc-indice { left: 0; right: 0; top: 18%; bottom: 0; width: 100%; border-radius: 20px 20px 0 0; }
  .apoc-aula { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 20px 20px 0 0; padding: 14px 14px max(12px, env(safe-area-inset-bottom)); }
  .apoc-abertura__caixa { padding: 22px 18px 18px; }
}

/* índice (legenda de mapa) */
.apoc-indice { position: absolute; z-index: 6; left: 16px; top: 16px; bottom: 16px; width: min(340px, calc(100% - 32px)); display: flex; flex-direction: column;
  border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); overflow: hidden; cursor: auto; touch-action: pan-y; }
.apoc-indice__topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px 18px; }
.apoc-indice__nome { margin: 0; font: 600 20px/1.2 var(--f-titulo); }
.apoc-indice__busca { position: relative; display: block; margin: 4px 14px 10px; }
.apoc-indice__busca i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mudo); font-size: 16px; }
.apoc-indice__busca input { width: 100%; height: 42px; padding: 0 12px 0 34px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2);
  font: 400 14.5px var(--f-ui); color: var(--tinta); }
.apoc-indice__busca input:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.apoc-indice__lista { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 0 8px 14px; }
.apoc-indice__h { position: sticky; top: 0; z-index: 1; margin: 6px 0 2px; padding: 8px 10px 6px; font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--mudo); background: var(--superficie); }
.apoc-indice ul { list-style: none; margin: 0; padding: 0; }
.apoc-indice__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent;
  text-align: left; cursor: pointer; color: var(--tinta); }
.apoc-indice__item:hover { background: var(--superficie-2); }
.apoc-indice__item:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.apoc-indice__marca { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--borda); display: grid; place-items: center; background: var(--papel); }
.apoc-indice__marca svg { width: 17px; height: 17px; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.apoc-indice__marca.is-ponto::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--tronco); }
.apoc-indice__marca.is-ponto[style]::after { display: none; }
.apoc-indice__marca.is-ponto[style] { border-radius: 7px; width: 22px; height: 14px; margin: 0 3px; }
.apoc-indice__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.apoc-indice__titulo { font: 500 14px/1.3 var(--f-ui); }
.apoc-indice__quando { font: 400 12px/1.3 var(--f-ui); color: var(--mudo); }

/* o universo do afastamento máximo (--universo vai de 0 a 1 conforme se afasta além do "ver tudo") */
.apoc-universo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.apoc-quadro { opacity: calc(1 - var(--universo, 0)); }
/* rótulos e selos têm tamanho de tela: somem antes, para não embolar sobre o traço que encolhe */
.apoc-quadro .c-ancoras { opacity: calc(1 - var(--universo, 0) * 2.5); }
.apoc-palco.no-universo .apoc-quadro { pointer-events: none; }
.apoc-zona { opacity: calc(1 - var(--universo, 0)); }
.apoc-palco.no-universo .apoc-regua, .apoc-palco.no-universo .apoc-faixas, .apoc-palco.no-universo .apoc-vcborda, .apoc-palco.no-universo .apoc-dica { opacity: 0; pointer-events: none; }
.apoc-universo__texto { position: absolute; z-index: 2; left: 50%; bottom: 14%; transform: translateX(-50%); width: min(600px, calc(100% - 32px)); text-align: center;
  color: #f4f1e6; pointer-events: none; opacity: calc((var(--universo, 0) - .55) * 2.3); }
.apoc-universo__frase { margin: 0 0 18px; font: 600 clamp(19px, 2.6vw, 25px)/1.3 var(--f-titulo); }
.apoc-universo__texto blockquote { margin: 0 auto 14px; max-width: 520px; }
.apoc-universo__texto blockquote p { margin: 0 0 6px; font: 400 16px/1.6 var(--f-titulo); color: #e9e4d2; }
.apoc-universo__texto cite { font: 500 12px/1.4 var(--f-ui); font-style: normal; color: #b9b3a0; }
.apoc-universo__lapis { margin: 0; font: 500 21px/1.3 var(--f-lapis); color: #fde68a; }
.apoc-universo__lapis cite { font-family: var(--f-ui); margin-left: 6px; }

/* céu no afastamento máximo: cabeçalho e controles entram no escuro junto com ele */
.apoc-topo, .apoc-ctrl, .apoc-aula, .apoc-indice { transition: background-color .5s, border-color .5s, color .5s; }
.apoc-noite .apoc-topo, .apoc-noite .apoc-ctrl, .apoc-noite .apoc-aula, .apoc-noite .apoc-indice {
  --papel: #0b1020; --superficie: #121a33; --superficie-2: #1b2444; --tinta: #f4f1e6; --tinta-2: #d9d4c3; --mudo: #a3a0b5;
  --borda: rgba(244,241,230,.14); --hl-amber: rgba(253,230,138,.42); color: var(--tinta); }

/* tela cheia: só o quadro (e a aula, se estiver em andamento) */
.apoc-sairtela { position: absolute; z-index: 7; right: 12px; top: 12px; box-shadow: var(--sombra); }
.apoc-imersivo, .apoc-imersivo body { overflow: hidden; }
.apoc-imersivo .apoc-topo, .apoc-imersivo .apoc-ctrl, .apoc-imersivo .apoc-regua, .apoc-imersivo .apoc-dica { display: none !important; }
.apoc-imersivo .apoc-palco { height: 100vh; height: 100dvh; }
.apoc:fullscreen { background: var(--papel); }

/* régua some quando não sobra largura entre os controles (tablet em retrato) */
@media (min-width: 641px) and (max-width: 900px) { .apoc-regua { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .apoc *, .apoc *::before, .apoc *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}