/* Mapas Concursos · Biblioteca — direção visual 6C-B v2 (protótipo): "central de estudo operacional".
   Shell escuro (carvão/grafite em elevações) + conteúdo claro: o mapa é o "conteúdo iluminado".
   Branco = ação primária e texto. Rosa = raro: microassinatura e interação, nunca estrutura.
   Identidade policial com intensidade por tela: login e topo da home com o fundo de doodles
   (static/doodles*.svg), glyphs vivos das disciplinas na home; na disciplina, só o glyph já no
   estado ativo (estático) e tipografia, sem fundo; nada novo no mapa. Nada finge ser dado técnico.
   Mobile first; sem fontes nem imagens externas; CSP sem inline. */
:root{
  /* superfícies (elevação por luminância, não por borda) */
  --bg:#0c0e11;--s1:#14181d;--s2:#1b2026;--s3:#242a31;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.18);--line-3:rgba(255,255,255,.32);
  /* texto */
  --text:#f2f0eb;--text-2:#b7bac1;--text-3:#8a8f98;
  --on-light:#0c0e11;--light:#f7f6f2;--light-press:#e4e2dc;
  /* assinatura */
  --pink:#f5008e;
  --pink-lamp:#ff8fd0;/* lâmpada da sirene ligada (V1.3): o rosa da marca clareado, lê como luz sobre a cúpula rosa */
  --danger:#ff8d8d;--danger-bg:rgba(255,99,99,.12);
  --warn:#f2c46d;/* status "Expira em breve" e barra de 31-60 dias de Meu acesso (V1.1) */
  /* barra do período de acesso (V1.1): urgência pelos dias restantes; sóbrias no fundo escuro */
  --bar-ok:#5fa97a;--bar-short:#ec8b76;--bar-urgent:#e5534b;--bar-done:#5d636c;--bar-neutral:#7d93b2;
  --avatar-ring:rgba(242,240,235,.88);/* anel do círculo do avatar (V1.1): o mesmo em todas as cores */
  --study:#08090b;
  /* tipografia: 3 pesos (400 · 600 · 800) */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* ritmo 4/8 */
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;
  --r:8px;--r-l:12px;--r-pill:999px;--tap:52px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --w:1040px;
}
.discipline-page{--w:860px}
.map-page{--w:1280px}
/* topo, faixas e conteúdo alinham pela mesma borda */
body{--edge-l:max(var(--sp4),var(--safe-l),calc((100% - var(--w)) / 2 + var(--sp4)));--edge-r:max(var(--sp4),var(--safe-r),calc((100% - var(--w)) / 2 + var(--sp4)))}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{margin:0;min-height:100vh;font:400 16px/1.5 var(--sans);color:var(--text);background:var(--bg)}
a{color:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:var(--r)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= componentes compartilhados ================= */
/* rótulo operacional: mono, caixa alta, pequeno; a marca rosa só nos rótulos de seção */
.label{display:block;font:600 .6875rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hero .label,.section-head .label,.login .label{display:flex;align-items:center;gap:var(--sp2)}
.hero .label::before,.section-head .label::before,.login .label::before{content:"";width:6px;height:6px;background:var(--pink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.meta{color:var(--text-3);font-size:.8125rem;letter-spacing:.02em}
.page-title{font-size:1.75rem;font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--text)}
.empty{color:var(--text-2)}

/* botões: primário = claro sobre o escuro; contorno = secundário forte */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);min-height:var(--tap);padding:0 var(--sp5);border-radius:var(--r);border:1.5px solid transparent;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,transform .08s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--light);color:var(--on-light)}
.btn-primary:active{background:var(--light-press)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-3)}
.btn-outline:active{background:var(--s2)}
.text-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--sp2);margin-right:calc(-1 * var(--sp2));border-radius:var(--r);color:var(--text-2);font-size:.8125rem;font-weight:600;text-decoration:none;transition:color .12s,background-color .12s}
.text-btn .i{width:16px;height:16px}
.text-btn:active{background:var(--s1)}
@media (hover:hover){
  .btn-primary:hover{background:#fff}
  .btn-outline:hover{border-color:var(--text-2)}
  .text-btn:hover{color:var(--text)}
}
/* retorno de download (boot.js): o ícone vira um "visto" rosa por 3 s */
a[download] .i:nth-of-type(2){display:none}
a[download].is-started .i:first-of-type{display:none}
a[download].is-started .i:nth-of-type(2){display:inline-block;color:var(--pink)}
a.btn-outline.is-started{border-color:var(--pink)}

/* campo de texto: superfície elevada, borda clara, foco rosa */
.field{font:inherit;width:100%;min-height:var(--tap);padding:0 var(--sp4);border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--s1);color:var(--text);transition:border-color .12s,box-shadow .12s}
.field::placeholder{color:var(--text-3)}
.field:hover{border-color:var(--line-3)}
.field:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.field-label{display:grid;gap:var(--sp2);font-size:.875rem;font-weight:600;color:var(--text-2)}
.error{padding:var(--sp3) var(--sp4);border-radius:var(--r);background:var(--danger-bg);color:var(--danger);font-weight:600;font-size:.9375rem}


/* linhas de lista: sem caixa; separadas por fio; o título manda */
.rows{list-style:none;margin:0;padding:0}
.rows li{border-bottom:1px solid var(--line)}
.row,.results a{display:flex;align-items:center;gap:var(--sp3);min-height:52px;padding:var(--sp3) var(--sp2);margin:0 calc(-1 * var(--sp2));border-radius:var(--r);text-decoration:none;color:var(--text);transition:background-color .12s}
.row:active,.results a:active{background:var(--s2)}
.row-pos{flex:none;width:2.2em;font-size:.75rem;color:var(--text-3)}
.row-text,.results a>span{flex:1;min-width:0;line-height:1.35}
.row>.i,.results .i{color:var(--text-3);transition:transform .12s var(--ease),color .12s}
@media (hover:hover){
  .row:hover,.results a:hover{background:var(--s1)}
  .row:hover>.i{transform:translateX(2px);color:var(--pink)}
}

/* ================= topo ================= */
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3);min-height:56px;padding:var(--safe-t) var(--edge-r) 0 var(--edge-l)}
.top form{margin:0}
/* Meu acesso no topo (V1.1): o avatar É a entrada; o rótulo aparece quando há espaço; Sair continua ao lado */
.top-actions{display:flex;align-items:center;gap:var(--sp1)}
/* Meus salvos (V1.2): marcador neutro antes do avatar, só ícone (sem contador/badge); alvo de toque 44 px */
.saved-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--r-pill);color:var(--text-2);transition:background-color .12s,color .12s}
.saved-link:active{background:var(--s2)}
@media (hover:hover){.saved-link:hover{background:var(--s1);color:var(--text)}}
/* Novidades (V1.3): sirene na mesma família do marcador (mesma caixa; base = uma linha). Sem itens = contorno cinza,
   imóvel, sem luz. Com itens = sirene ligada, SEM número: luz rosa na cúpula, lâmpada clara, halo sutil; base neutra.
   Microinteração a cada 10 s (1ª aos 1,5 s, 2,1 s no total): 2 voltas de .7s do refletor; o corpo nunca se move.
   prefers-reduced-motion = ligada e estática */
.news-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--r-pill);color:var(--text-2);text-decoration:none;transition:background-color .12s,color .12s}
/* ligada: cúpula rosa preenchida, lâmpada clara (a luz), halo = cópia desfocada da cúpula (filtro SVG, dentro do
   viewBox: não cresce a caixa). Base sempre neutra. Apagada: sem halo */
.news-link .sr-halo{display:none}
.news-link.has-news .sr-halo{display:inline;stroke:var(--pink);opacity:.5}
.news-link.has-news .sr-dome{stroke:var(--pink);fill:var(--pink);fill-opacity:.4}
.news-link.has-news .sr-lamp{stroke:var(--pink-lamp)}
.news-link:active{background:var(--s2)}
/* farol, a cada 10s (1,5s após carregar): a cúpula sobe um pouco, a lâmpada atravessa a cúpula como refletor girando
   (afina, some numa borda, volta pela outra), 2 voltas de .7s; a luz é mais forte quando o refletor passa de frente e
   mais fraca nas laterais; volta suave ao repouso aos 2,1s. Corpo e base nunca se movem */
@media (prefers-reduced-motion:no-preference){
  .news-link.has-news .sr-lamp{transform-box:view-box;transform-origin:12px 12px;animation:sr-turn 10s linear 1.5s infinite}
  .news-link.has-news .sr-dome{animation:sr-glow 10s linear 1.5s infinite}
  .news-link.has-news .sr-halo{animation:sr-halo 10s linear 1.5s infinite}
}
@keyframes sr-turn{
  0%,3%,10%,17%,100%{transform:translateX(0) scaleX(1);opacity:1}
  5.5%,12.5%{transform:translateX(2.2px) scaleX(.7);opacity:.85}
  6.5%,13.5%{transform:translateX(3px) scaleX(.45);opacity:0}
  6.51%,13.51%{transform:translateX(-3px) scaleX(.45);opacity:0}
  7.5%,14.5%{transform:translateX(-2.2px) scaleX(.7);opacity:.85}
}
@keyframes sr-glow{0%,21%,100%{fill-opacity:.4}3%{fill-opacity:.5}6.5%,13.5%{fill-opacity:.34}10%{fill-opacity:.62}17%{fill-opacity:.58}}
@keyframes sr-halo{0%,21%,100%{opacity:.5}3%{opacity:.6}6.5%,13.5%{opacity:.4}10%{opacity:.85}17%{opacity:.78}}
@media (hover:hover){.news-link:hover{background:var(--s1);color:var(--text)}}
.me{display:inline-flex;align-items:center;gap:var(--sp2);min-height:44px;padding:0 var(--sp2) 0 6px;border-radius:var(--r-pill);color:var(--text-2);font-size:.875rem;text-decoration:none;transition:background-color .12s,color .12s}
.me:active{background:var(--s2)}
.me-label{display:none}
@media (min-width:640px){.me-label{display:inline}}
@media (hover:hover){.me:hover{background:var(--s1);color:var(--text)}}
/* avatar = personagem de perfil (PNG transparente) sobre o círculo na cor escolhida, com anel claro fino e igual em
   todas as cores; sem personagem, a inicial em fundo neutro. Cores = catálogo de biblioteca/avatars.py (mesmo hex) */
.avatar-bg-areia{--avatar-bg:#EBDDB7}.avatar-bg-rosa{--avatar-bg:#F06292}.avatar-bg-ambar{--avatar-bg:#F4A261}
.avatar-bg-oliva{--avatar-bg:#A3B18A}.avatar-bg-vinho{--avatar-bg:#8B2E4A}.avatar-bg-azul-aco{--avatar-bg:#5B7DAA}
.avatar-bg-azul-petroleo{--avatar-bg:#0F6B7D}.avatar-bg-ameixa{--avatar-bg:#8E5BB7}
.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--avatar-bg,var(--s3));overflow:hidden}
.avatar:has(img){box-shadow:0 0 0 1.5px var(--avatar-ring)}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-initial{font-weight:800;font-size:.875rem;color:var(--text)}
.avatar-l{width:88px;height:88px;background:var(--avatar-bg,var(--s2))}
.avatar-l:has(img){box-shadow:0 0 0 2px var(--avatar-ring)}
.avatar-l .avatar-initial{font-size:2rem}
.brand,.login-brand{font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--text-2);white-space:nowrap}
.brand b,.login-brand b{font-weight:800;color:var(--text)}
.link-btn{min-height:44px;padding:0 var(--sp2);border:0;background:none;font:inherit;font-size:.875rem;color:var(--text-2);cursor:pointer;border-radius:var(--r)}
.link-btn:hover{color:var(--text)}
main{padding:var(--sp4) var(--edge-r) calc(var(--sp7) + var(--safe-b)) var(--edge-l)}
.hero .wrap{padding:var(--sp2) var(--edge-r) var(--sp5) var(--edge-l)}
/* entrada discreta do conteúdo */
main,.hero .wrap{animation:enter .24s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(4px)}}

/* ================= login ================= */
/* fundo = personalidade: pattern "universo policial Mapas" (doodles line-art em static/doodles.svg).
   1ª leitura textura, 2ª policial, 3ª o desenho; monocromático, sem rosa, sem animação. O SVG não
   tem viewBox: desenha 1:1 em px em qualquer tela e só rasteriza o tamanho da janela.
   Formulário = função: superfícies sólidas e neutras, que o pattern não atravessa. */
.login-page{isolation:isolate}
.login-page .top{display:none}
.login-page main{min-height:100vh;display:flex;align-items:center}
.doodles{position:fixed;inset:0;z-index:-1;width:100%;height:100%;opacity:.07;pointer-events:none;user-select:none;-webkit-mask-image:radial-gradient(ellipse 75% 34% at 50% 44%,rgba(0,0,0,.3) 35%,#000);mask-image:radial-gradient(ellipse 75% 34% at 50% 44%,rgba(0,0,0,.3) 35%,#000)}
.login{width:100%;max-width:380px;margin:0 auto;display:grid;gap:var(--sp4);padding:var(--sp6) 0 8vh}
.login-brand{font-size:.9375rem}
.login .page-title{margin:0 0 var(--sp4);font-size:2.25rem}
.login .field{background:#151619;border-color:#2e3034}
.login .field:hover{border-color:#45484d}
.login .field:focus{border-color:var(--pink)}
.login .error{background:#2a1517}
.login .btn{margin-top:var(--sp2);width:100%}

/* ================= home ================= */
/* atmosfera no topo (mesmos doodles do login, outra composição) que some antes do catálogo:
   identidade no ambiente, silêncio no conteúdo */
.home{position:relative;isolation:isolate}
.home-bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:300px;opacity:.07;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(#000 22%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.26) 66%,rgba(0,0,0,.08) 82%,transparent 94%);mask-image:linear-gradient(#000 22%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.26) 66%,rgba(0,0,0,.08) 82%,transparent 94%)}
.hero-title{margin-top:var(--sp3);font-size:1.875rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.search{position:relative;margin-top:var(--sp5)}
.search>.i{position:absolute;left:16px;top:50%;margin-top:-10px;color:var(--text-2);pointer-events:none}
.search .field{min-height:56px;padding:0 52px 0 48px;font-size:1.0625rem;background:var(--s2);border-color:var(--line-3)}
.search .field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.clear{position:absolute;right:6px;top:50%;margin-top:-22px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r);background:none;color:var(--text-2);cursor:pointer}
.clear .i{width:18px;height:18px}
.search .field:placeholder-shown~.clear{display:none}
@media (hover:hover){.clear:hover{color:var(--text);background:var(--s3)}}
.hero .meta{margin-top:var(--sp3);font-variant-numeric:tabular-nums}
.status{margin:var(--sp2) 0 var(--sp3);font-size:.875rem;color:var(--text-2)}
.results{margin-bottom:var(--sp6)}
.results strong{display:block;font-weight:600}
.results small{display:block;margin-top:2px;color:var(--text-3);font-size:.8125rem}
.section-head{margin:var(--sp3) 0 var(--sp3);font-size:.9375rem;font-weight:800;letter-spacing:-.005em;color:var(--text)}
/* V1.2 Continuar revisando: UMA linha utilitária sob o contador (o último mapa válido), sem card, fundo ou título de
   seção; o título encolhe com reticências; as Disciplinas continuam sendo o foco */
.resume{display:flex;align-items:center;gap:var(--sp2);width:fit-content;max-width:100%;min-height:44px;margin-top:var(--sp2);color:var(--text-2);font-size:.875rem;text-decoration:none}
.resume[hidden]{display:none}
.resume .i{width:16px;height:16px;color:var(--text-3);transition:color .12s}
.resume-label{flex:none}
.resume-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.resume-title::before{content:"·";margin-right:var(--sp2);color:var(--text-3);font-weight:400}
@media (hover:hover){.resume:hover .resume-title{text-decoration:underline;text-underline-offset:3px}.resume:hover>.i:last-child{color:var(--text-2)}}
/* Meus salvos (/meus-salvos): linhas compactas (título + contexto), sem miniatura, data ou progresso */
.pick-list .row{min-height:48px;padding-top:var(--sp2);padding-bottom:var(--sp2)}
.pick-list strong,.pick-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-list strong{font-weight:600}
.pick-list small{margin-top:2px;color:var(--text-3);font-size:.8125rem}
.saved-page .page-title{margin:var(--sp2) 0 var(--sp4)}
.saved-list li{display:flex;align-items:center;gap:var(--sp2)}
.saved-list .row{flex:1;min-width:0}
.unsave{border:0;background:none;font:inherit;font-size:.8125rem;cursor:pointer}
/* Novidades (/novidades, V1.3): mesma linha compacta de Meus salvos; o tipo vem acima do título, discreto. Sem datas */
.news-page .page-title{margin:var(--sp2) 0 var(--sp4)}
.news-list .row{min-height:64px}
.news-kind{display:block;margin-bottom:2px;color:var(--text-2);font-size:.75rem;font-weight:500;letter-spacing:.02em}
.news-tags{display:block;margin-top:4px;color:var(--text-3);font-size:.75rem}
@media (hover:hover){.unsave:hover{color:var(--text)}}

/* estante: cada disciplina é um item de catálogo — o nome manda; o glyph (ilustração da disciplina,
   sem moldura) ajuda a reconhecer pela forma; contagem é metadado; chevron é terciário. O rosa é só
   a energia da microação do glyph (glyphs vivos, abaixo). */
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.volume{display:flex;align-items:center;gap:14px;height:100%;min-height:72px;padding:var(--sp2) var(--sp4) var(--sp2) var(--sp3);border-radius:var(--r-l);background:var(--s1);text-decoration:none;color:var(--text);transition:background-color .12s}
.volume-art{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px}
.glyph{display:block;width:56px;height:56px;overflow:visible;color:#a3a7ae}
.glyph .h{fill:var(--s1);transition:fill .12s}
.glyph .h-line{stroke:var(--s1);transition:stroke .12s}
.volume-text{flex:1;min-width:0}
.volume-text strong{display:block;font-size:1.0625rem;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.volume-text .meta{display:block;margin-top:3px;font-variant-numeric:tabular-nums}
.volume>.i{flex:none;width:18px;height:18px;color:var(--text-3);transition:color .12s}
.volume:active{background:var(--s2)}
.volume:active .glyph .h{fill:var(--s2)}
.volume:active .glyph .h-line{stroke:var(--s2)}
.volume:active>.i{color:var(--text-2)}
@media (hover:hover){
  .volume:hover{background:var(--s2)}
  .volume:hover .glyph .h{fill:var(--s2)}
  .volume:hover .glyph .h-line{stroke:var(--s2)}
  .volume:hover>.i{color:var(--text-2)}
}
/* BL-041 (DEC-072): disciplina publicada sem direito = trancada. Mesma geometria do card aberto, mas contorno em vez
   de superfície e, no lugar do chevron, um cadeado grande: "módulo trancado" sem texto. Hierarquia: cadeado (text) >
   nome (text-2) > glyph e contagem (text-3). Sem hover, sem glyph vivo, sem link; nada de rosa, brilho ou oferta. */
.section-head-quiet{margin-top:var(--sp6);color:var(--text-2)}
.volume-locked,.volume-locked:hover,.volume-locked:active{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text);cursor:default}
.volume-locked .glyph{color:var(--text-3);opacity:.55}
.volume-locked .glyph .h,.volume-locked:hover .glyph .h,.volume-locked:active .glyph .h{fill:var(--bg)}
.volume-locked .glyph .h-line,.volume-locked:hover .glyph .h-line,.volume-locked:active .glyph .h-line{stroke:var(--bg)}
.volume-locked .volume-text strong{font-weight:600;color:var(--text-2)}
.volume-locked>.i{width:26px;height:26px;stroke-width:1.75;color:var(--text)}
/* aviso do zero acesso: cadeado + mensagem + "Meu acesso ›" como UMA unidade discreta (sem caixa, fundo ou borda).
   Desktop: na mesma linha; estreito: a ação quebra alinhada ao texto. A ação é navegação contextual, não CTA: cor
   secundária, sem sublinhado fixo; a área de toque cresce com padding invisível, sem mudar o layout. */
.access-note{display:flex;align-items:flex-start;gap:var(--sp2);margin-top:var(--sp3);color:var(--text-2);font-size:.875rem;line-height:1.5}
.access-note[hidden]{display:none}
.access-note>.i{width:16px;height:16px;margin-top:2.5px;color:var(--text-3)}
.access-note-body{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--sp4)}
.access-note-link{display:inline-flex;align-items:center;gap:2px;padding:12px 0;margin:-12px 0;color:var(--text-2);font-weight:500;font-size:.8125rem;text-decoration:none;transition:color .12s}
.access-note-link .i{width:14px;height:14px;color:var(--text-3);transition:color .12s}
.access-note-link:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.access-note-link:hover{color:var(--text)}.access-note-link:hover .i{color:var(--text-2)}}
/* glyphs vivos (protótipo, só na Home): o objeto executa a ação da própria natureza e SEGURA o estado
   ativo enquanto o mouse está no item; ao sair, volta ao repouso — o escudo ativa, a algema abre, a
   pistola dispara (ferrolho fica recuado, cano aceso), o carimbo marca o documento, a lupa fica
   ampliando a digital, a cela fica aberta. static/glyphs.js põe a classe live na entrada (mouse) ou no
   toque e a tira na saída; não intercepta o clique. Estado sustentado = transição (ida e volta suaves,
   sem loop); só o instante da ação (luz no contorno, flash, estojo, batida do carimbo) é animação de
   uma vez, que termina invisível ou em repouso. Ritmo comum: ida 320–460 ms, volta 260–300 ms. Só
   transform/translate/rotate/scale, opacity e cor, dentro da caixa do glyph — nada mexe no layout.
   Decisão do fundador (DEC-040): animam sempre, inclusive com movimento reduzido do sistema (o bloco
   global no fim do arquivo os exclui). Partes desenhadas em scripts/make_glyphs.mjs. A classe glyph-on
   (página da disciplina) mostra o MESMO estado ativo, estático: as regras de estado valem para .live e
   .glyph-on; transições e animações, só para .live — nada se mexe ao carregar. */
.glyph g{transform-box:view-box;transform-origin:0 0}
.glyph .pk{fill:var(--pink)}
.glyph{--gv-in:cubic-bezier(.22,.8,.24,1);--gv-out:cubic-bezier(.4,0,.2,1)}
/* escudo: a luz desenha o contorno e ele fica aceso; o núcleo acende rosa */
.g-trace{opacity:0;stroke:#eceae5;stroke-dasharray:100;stroke-dashoffset:0;transition:opacity .28s var(--gv-out)}
.live .g-trace,.glyph-on .g-trace{opacity:1}
.live .g-trace{transition:none;animation:gv-draw .46s var(--gv-in) backwards}
.g-core{fill-opacity:.42;transition:fill .26s var(--gv-out),fill-opacity .26s var(--gv-out)}
.live .g-core,.glyph-on .g-core{fill:var(--pink);fill-opacity:1}
.live .g-core{transition:fill .24s var(--gv-in) .2s,fill-opacity .24s var(--gv-in) .2s}
@keyframes gv-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* algemas: a meia-lua abre e fica aberta (a lingueta do mecanismo, rosa); a corrente acompanha */
.g-jaw{transition:rotate .28s var(--gv-out)}
.live .g-jaw,.glyph-on .g-jaw{rotate:-28deg}
.live .g-jaw{transition:rotate .42s var(--gv-in)}
.g-chain{transition:translate .3s var(--gv-out),rotate .3s var(--gv-out)}
.live .g-chain,.glyph-on .g-chain{translate:-1.1px .7px;rotate:-2deg}
.live .g-chain{transition:translate .46s var(--gv-in),rotate .46s var(--gv-in)}
.g-pawl{fill-opacity:.45;transition:fill .2s var(--gv-out),fill-opacity .2s var(--gv-out)}
.live .g-pawl,.glyph-on .g-pawl{fill:var(--pink);fill-opacity:1}
.live .g-pawl{transition:fill .2s var(--gv-in) .12s,fill-opacity .2s var(--gv-in) .12s}
/* pistola: tiro (coice do ferrolho, flash rosa, estojo) e depois o ferrolho fica recuado com o cano aceso */
.g-slide{transition:translate .3s var(--gv-out)}
.live .g-slide,.glyph-on .g-slide{translate:-1.9px 0}
.live .g-slide{transition:translate .3s var(--gv-in);animation:gv-kick .34s cubic-bezier(.2,.7,.3,1)}
.g-muzzle{transition:stroke .26s var(--gv-out)}
.live .g-muzzle,.glyph-on .g-muzzle{stroke:var(--pink)}
.live .g-muzzle{transition:stroke .2s var(--gv-in) .1s}
.g-flash,.g-case{opacity:0}
.live .g-flash{animation:gv-flash .3s ease-out}
.live .g-case{animation:gv-case .44s cubic-bezier(.2,.6,.4,1)}
@keyframes gv-kick{0%{transform:none}18%{transform:translateX(-1.6px)}100%{transform:none}}
@keyframes gv-flash{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.15)}38%{opacity:1;transform:scale(1.25)}70%,100%{opacity:0;transform:scale(.8)}}
@keyframes gv-case{0%,6%{opacity:0;transform:none}14%{opacity:1}55%{opacity:1;transform:translate(3px,-8px) rotate(120deg)}100%{opacity:0;transform:translate(6.5px,-5px) rotate(250deg)}}
/* carimbo: desce, marca e volta; o documento fica carimbado (marca rosa) enquanto houver hover */
.g-mark{opacity:0;stroke:var(--pink);transition:opacity .26s var(--gv-out)}
.g-mark path:first-child{fill:var(--pink);fill-opacity:.16}
.live .g-mark,.glyph-on .g-mark{opacity:1}
.live .g-mark{transition:opacity .1s linear .2s}
.live .g-stamp{animation:gv-stamp .46s}
@keyframes gv-stamp{0%{transform:none;animation-timing-function:cubic-bezier(.45,0,.8,.5)}42%,54%{transform:translateY(3.1px);animation-timing-function:cubic-bezier(.2,.6,.25,1)}100%{transform:none}}
/* lupa: desliza até a digital e fica ali ampliando (digital rosa sob a lente); a ampliação acompanha a lente */
.g-lens,.g-world{transition:translate .3s var(--gv-out)}
.live .g-lens,.glyph-on .g-lens{translate:-5px 5px}
.live .g-world,.glyph-on .g-world{translate:5px -5px}
.live .g-lens,.live .g-world{transition:translate .44s var(--gv-in)}
.g-print{transition:stroke .26s var(--gv-out)}
.live .g-print,.glyph-on .g-print{stroke:var(--pink)}
.live .g-print{transition:stroke .26s var(--gv-in) .16s}
/* cela: o ferrolho recua, a porta abre e fica aberta (ferrolho rosa); ao sair, fecha e o ferrolho volta */
.g-door{transition:transform .3s var(--gv-out)}
.live .g-door,.glyph-on .g-door{transform:scaleX(.62) skewY(-3deg)}
.live .g-door{transition:transform .46s var(--gv-in)}
.g-bolt{fill-opacity:.5;transition:translate .14s var(--gv-out) .24s,fill .2s var(--gv-out),stroke .2s var(--gv-out),fill-opacity .2s var(--gv-out)}
.live .g-bolt,.glyph-on .g-bolt{translate:-2.6px 0;fill:var(--pink);stroke:var(--pink);fill-opacity:1}
.live .g-bolt{transition:translate .12s var(--gv-in),fill .2s var(--gv-in) .1s,stroke .2s var(--gv-in) .1s,fill-opacity .2s var(--gv-in) .1s}
@media (min-width:640px){.shelf{grid-template-columns:repeat(2,1fr);gap:var(--sp2)}}
@media (min-width:1000px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media (min-width:720px){
  .hero .wrap{padding-top:var(--sp5);padding-bottom:var(--sp6)}
  .hero-title{font-size:2.5rem}
  .search{max-width:680px}
}

/* ================= disciplina ================= */
/* mais silenciosa que a home: sem fundo de doodles; identidade = glyph já no estado ativo (estático,
   a continuação da escolha feita na home) + tipografia. O conteúdo é um índice editorial: assunto
   (título, contagem, PDF) e mapas numerados. Rosa só no glyph e no toque/hover. */
.back{display:inline-flex;align-items:center;gap:var(--sp1);min-height:44px;margin-left:-6px;padding:0 6px;color:var(--text-2);text-decoration:none;font-weight:600;font-size:.9375rem;border-radius:var(--r)}
.back .i{width:18px;height:18px}
@media (hover:hover){.back:hover{color:var(--text)}}
.d-hero .wrap{padding-bottom:var(--sp6)}
/* glyph + título + contagem = um bloco editorial; o glyph alinha opticamente com o título (o desenho
   tem respiro interno) e, só aqui, os acentos do estado ativo ficam um pouco maiores — sem animar */
.d-glyph{display:block;width:76px;height:76px;margin:var(--sp5) 0 0 -8px}
.d-glyph .glyph{width:76px;height:76px;color:#bfc2c8}
.d-glyph .glyph .h{fill:var(--bg)}
.d-glyph .glyph .h-line{stroke:var(--bg)}
.d-glyph .g-core,.d-glyph .g-pawl,.d-glyph .g-bolt{transform-box:fill-box;transform-origin:center}
.d-glyph .g-core{scale:1.35}
.d-glyph .g-pawl{scale:1.5}
.d-glyph .g-bolt{scale:1.35}
.d-glyph .g-muzzle{stroke-width:1.7}
.d-glyph .g-print{stroke-width:1.1}
.d-glyph .g-mark path:first-child{fill-opacity:.28}
.d-title{margin-top:10px;font-size:2rem;font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.d-count{margin-top:6px;color:var(--text-2);font-size:.9375rem;font-variant-numeric:tabular-nums}
.d-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4);margin-top:20px}
.btn-dl{min-height:50px;padding:0 22px 0 18px;border-radius:var(--r-l);border-color:var(--line-2);background:var(--s3);color:#fff;font-size:.9375rem;font-weight:700}
.btn-dl .i{color:var(--text)}
.btn-dl:active{background:#2c333b}
.d-pdf{color:#9a9ea6;font-size:.8125rem;font-variant-numeric:tabular-nums}
@media (hover:hover){.btn-dl:hover{background:#2c333b;border-color:var(--line-3)}}
@media (min-width:720px){
  .d-glyph{margin-top:var(--sp6)}
  .d-title{font-size:2.75rem}
}
/* barra compacta: aparece quando o topo sai da tela (static/discipline.js); invisível = fora do foco.
   Entrada quase imperceptível: opacidade + 6 px. */
.d-bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:var(--sp2);height:calc(52px + var(--safe-t));padding:var(--safe-t) var(--edge-r) 0 calc(var(--edge-l) - 10px);background:rgba(12,14,17,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-6px);opacity:0;visibility:hidden;transition:transform .18s var(--ease),opacity .18s var(--ease),visibility 0s linear .18s}
.d-bar.is-on{transform:none;opacity:1;visibility:visible;transition:transform .18s var(--ease),opacity .18s var(--ease),visibility 0s}
.d-bar-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r);color:var(--text-2)}
.d-bar-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:800;font-size:.9375rem;letter-spacing:-.005em}
/* "PDF": visual pequeno, alvo de toque folgado (56 × 48) */
.d-bar-dl,.topic-dl{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;min-height:48px;padding:0 var(--sp3);border-radius:var(--r);color:#d3d5da;font-size:.8125rem;font-weight:700;letter-spacing:.03em;text-decoration:none;transition:color .12s,background-color .12s}
.d-bar-dl .i,.topic-dl .i{width:17px;height:17px;stroke-width:2.2;transition:color .12s}
.d-bar-dl{margin-right:calc(-1 * var(--sp3))}
.d-bar-back:active,.d-bar-dl:active,.topic-dl:active{background:var(--s2)}
@media (hover:hover){
  .d-bar-back:hover{color:var(--text)}
  .d-bar-dl:hover,.topic-dl:hover{color:var(--text);background:var(--s1)}
  .d-bar-dl:hover .i,.topic-dl:hover .i{color:var(--pink)}
}
/* assunto: seção do índice — título (forte; duas linhas deliberadas), contagem e PDF; mapas numerados
   abaixo, em peso regular: o assunto manda, o mapa é item */
.topic+.topic{margin-top:var(--sp7)}
.topic-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp3);padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.topic-head h2{font-size:1.1875rem;font-weight:800;line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
.topic-count{display:block;margin-top:4px;color:var(--text-3);font-size:.8125rem;font-variant-numeric:tabular-nums}
.topic-dl{margin-right:calc(-1 * var(--sp3));margin-bottom:-10px}
.discipline-page .rows li{border-bottom-color:rgba(255,255,255,.05)}
.discipline-page .row{min-height:54px}
.discipline-page .row-pos{width:1.9em;font-size:.8125rem;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;transition:color .12s}
.discipline-page .row-text{font-size:1rem;font-weight:400;color:#e6e4df}
.discipline-page .row>.i{width:18px;height:18px;color:#4a4f57;transition:color .12s}
.discipline-page .row:active .row-pos{color:var(--pink)}
.discipline-page .row:active>.i{color:var(--text-3)}
/* formatos do mapa (áudio, vídeo): metadata à direita do título, antes do chevron; sem fundo nem borda,
   abaixo do número e acima do chevron. Acendem em rosa só junto da linha (hover/toque); não são ação */
.row-media{flex:none;display:flex;align-items:center;gap:6px;margin:0 -10px 0 -4px}
.mi{display:block;width:15px;height:15px;overflow:visible}
.mi-a .mw{fill:none;stroke:#5d636c;stroke-width:2.5;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:stroke .12s,scale .22s var(--ease)}
.mi-v .mv-c{fill:none;stroke:#5d636c;stroke-width:1.75;transition:stroke .12s}
.mi-v .mv-t{fill:#5d636c;stroke:#5d636c;stroke-width:1.5;stroke-linejoin:round;transition:fill .12s,stroke .12s}
.discipline-page .row:active .mw,.discipline-page .row:active .mv-t{stroke:var(--pink);fill:var(--pink)}
.discipline-page .row:active .mw{fill:none}
.discipline-page .row:active .mv-c{stroke:var(--text-3)}
@media (hover:hover){
  .discipline-page .row:hover .row-pos{color:var(--pink)}
  .discipline-page .row:hover>.i{transform:none;color:var(--text-3)}
  .discipline-page .row:hover .mw{stroke:var(--pink)}
  .discipline-page .row:hover .mw1{scale:1 1.2}
  .discipline-page .row:hover .mw3{scale:1 1.15;transition-delay:0s,.04s}
  .discipline-page .row:hover .mv-c{stroke:var(--text-3)}
  .discipline-page .row:hover .mv-t{fill:var(--pink);stroke:var(--pink)}
}

/* ================= página do mapa: o mapa é o filme ================= */
/* a tela mais silenciosa: sem decoração nem identidade extra (o mapa já tem a dele). Cabeçalho
   compacto; mapa de ponta a ponta no celular, sem moldura, raio nem sombra; o próprio mapa abre o
   estudo, sem botão (DEC-046); Baixar PDF secundário; anterior/próximo como continuidade. Rosa só na posição e no toque. */
.map-page main{padding-top:0}
.map-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3)}
.pos{flex:none;font-size:.8125rem;color:var(--text-3);letter-spacing:.04em}
.pos b{font-weight:600;color:var(--pink)}
.map-head .label{margin-top:2px}
.map-head .page-title{margin:2px 0 var(--sp3);font-size:1.375rem;line-height:1.15;text-wrap:balance}
.viewer{position:relative;margin:0 calc(-1 * var(--edge-r)) 0 calc(-1 * var(--edge-l))}
.stage{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--ar,1.4142);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:zoom-in;background:#fff}
/* carregando (operação real): fio rosa no topo da folha até a imagem chegar */
.stage::after{content:"";position:absolute;left:0;top:0;z-index:1;width:30%;height:2px;background:var(--pink);animation:loading 1s var(--ease) infinite}
.viewer.ready .stage::after{display:none}
@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.stage img.map{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;transform-origin:0 0;-webkit-user-drag:none}
.stage img.peer{position:absolute;top:0;max-width:none;display:none;-webkit-user-drag:none}
.study-bar,.nav-arrow,.tools{display:none}
.map-actions{display:grid;gap:var(--sp1);margin:var(--sp4) 0 var(--sp4)}
/* Baixar PDF: ação secundária — sem superfície própria, alvo de toque confortável */
.btn-pdf{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);min-height:48px;padding:0 var(--sp4);border-radius:var(--r);color:var(--text-2);font-size:.9375rem;font-weight:600;text-decoration:none;transition:color .12s,background-color .12s}
.btn-pdf .i{width:18px;height:18px}
.btn-pdf:active{background:var(--s1);color:var(--text)}
/* V1.2 Salvar: par discreto do Baixar PDF; salvo = coração cheio no rosa. No celular os dois dividem a linha */
.map-btns{display:flex;align-items:center;gap:var(--sp1)}
.map-btns>*{flex:1 1 0}
.map-btns form{display:flex}
.btn-save{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:var(--sp2);min-height:48px;padding:0 var(--sp4);border:0;border-radius:var(--r);background:none;font:inherit;font-size:.9375rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:color .12s,background-color .12s}
.btn-save .i{width:18px;height:18px}
.btn-save:active{background:var(--s1);color:var(--text)}
.btn-save.is-saved{color:var(--text)}
.btn-save.is-saved .heart{fill:var(--pink);stroke:var(--pink)}
/* anterior/próximo: uma faixa de continuidade (fio em cima, fio entre os dois), não dois cartões;
   o próximo pesa um pouco mais — a revisão avança */
.pager{display:grid;grid-template-columns:1fr 1fr;margin:0 0 var(--sp5);border-top:1px solid var(--line)}
.pager>*+*{border-left:1px solid var(--line)}
.pager a,.pager-end{display:flex;align-items:center;gap:var(--sp2);min-height:72px;padding:var(--sp3) var(--sp2);min-width:0}
.pager a{text-decoration:none;transition:background-color .12s}
.pager a>span{flex:1;min-width:0}
.pager .label{display:block;margin-bottom:3px;transition:color .12s}
.pager-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.9375rem;line-height:1.3}
.pager-prev{padding-left:0}
.pager-prev .pager-t{color:var(--text-2);font-weight:500}
.pager-next{justify-content:flex-end;text-align:right;padding-right:0}
.pager-next .pager-t{color:var(--text);font-weight:700}
.pager-next .label{color:var(--text-2)}
.pager a .i{flex:none;color:var(--text-3);transition:translate .16s var(--ease),color .12s}
.pager a:active{background:var(--s1)}
.pager-next:active .i{translate:3px 0;color:var(--pink)}
.pager-prev:active .i{translate:-3px 0;color:var(--pink)}
.pager-end{flex-direction:column;align-items:flex-start;justify-content:center;color:var(--text-3)}
.pager-end .pager-t{color:var(--text-3);font-size:.875rem}
.pager-end:last-child{align-items:flex-end;text-align:right}
@media (hover:hover){
  .btn-pdf:hover{color:var(--text);background:var(--s1)}
  .btn-save:hover{color:var(--text);background:var(--s1)}
  .pager a:hover{background:var(--s1)}
  .pager-next:hover .i{translate:3px 0;color:var(--pink)}
  .pager-prev:hover .i{translate:-3px 0;color:var(--pink)}
  .pager-next:hover .label{color:var(--pink)}
}
/* Ouvir explicação: o mesmo conteúdo do mapa em áudio (Resumo da Tropa) — segunda forma de consumo,
   logo depois do mapa e antes de Baixar PDF (sem superfície): superfície escura com fio. O player
   do Spotify abre dentro do próprio componente; o mapa e o áudio convivem na página. Glyph próprio
   (fone + onda): repouso cinza; uma vez, depois que a página assenta, a onda sobe em rosa e volta;
   hover/toque/aberto = onda ativa, rosa, sustentada (sem loop). */
.listen{margin:0 0 var(--sp2);border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--s1);overflow:hidden}
.listen-cta{display:flex;align-items:center;gap:var(--sp3);width:100%;min-height:60px;padding:var(--sp2) var(--sp4) var(--sp2) var(--sp2);border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s}
.listen-g{flex:none;width:44px;height:44px;padding:6px;border-radius:var(--r);background:var(--s2);overflow:visible;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.listen-g .lg-band,.listen-g .lg-cup{stroke:var(--text-2);transition:stroke .2s}
.listen-g .lg-w{stroke:var(--text-2);transform-box:fill-box;transform-origin:center;transition:scale .3s cubic-bezier(.22,.8,.24,1),stroke .2s}
.listen-text{flex:1;display:grid;min-width:0;line-height:1.2}
.listen-t{font-size:1rem;font-weight:650}
.listen-text small{margin-top:3px;font-size:.75rem;color:var(--text-3);letter-spacing:.02em}
.listen-cta>.i{flex:none;width:18px;height:18px;color:var(--text-3);rotate:90deg;transition:rotate .26s var(--ease),color .12s}
.listen.open .listen-cta>.i{rotate:-90deg}
.listen-cta:active{background:var(--s2)}
.listen-cta.press .lg-band,.listen-cta.press .lg-cup,.listen.open .lg-band,.listen.open .lg-cup{stroke:var(--text)}
.listen-cta.press .lg-w,.listen.open .lg-w{stroke:var(--pink)}
.listen-cta.press .lg-w1,.listen.open .lg-w1{scale:1 1.8}
.listen-cta.press .lg-w2,.listen.open .lg-w2{scale:1 1.25}
.listen-cta.press .lg-w3,.listen.open .lg-w3{scale:1 1.5}
/* descoberta: uma única vez (viewer da página, não no estudo) */
.listen.hello .lg-w{animation:lw-hello .7s cubic-bezier(.3,.7,.3,1) both}
.listen.hello .lg-w2{animation-delay:.07s}
.listen.hello .lg-w3{animation-delay:.14s}
@keyframes lw-hello{0%{scale:1;stroke:var(--text-2)}25%{stroke:var(--pink)}45%{scale:1 2.1}75%{scale:1 .85;stroke:var(--pink)}100%{scale:1;stroke:var(--text-2)}}
/* player: expande no lugar (altura animada), Spotify intacto dentro */
.listen-player{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.listen.open .listen-player{grid-template-rows:1fr}
.listen-slot{min-height:0;overflow:hidden}
.listen-slot>div{padding:0 var(--sp2) var(--sp2)}
.listen-slot iframe{display:block;width:100%;border:0;border-radius:var(--r-l)}
@media (hover:hover){
  .listen-cta:hover{background:var(--s2)}
  .listen-cta:hover>.i{color:var(--text-2)}
  .listen-cta:hover .lg-band,.listen-cta:hover .lg-cup{stroke:var(--text)}
  .listen-cta:hover .lg-w{stroke:var(--pink)}
  .listen-cta:hover .lg-w1{scale:1 1.8}
  .listen-cta:hover .lg-w2{scale:1 1.25}
  .listen-cta:hover .lg-w3{scale:1 1.5}
}
@media (min-width:720px){
  .viewer{margin:0}
  .map-actions{justify-items:start;gap:var(--sp2)}
  .map-btns>*{flex:none}
  .map-head .page-title{font-size:2rem}
  /* com áudio: a explicação em áudio e, logo abaixo, Baixar PDF */
  .has-listen .map-actions .listen{width:min(100%,28rem);margin:0}
}
/* desktop: um palco centralizado — a coluna inteira (cabeçalho, mapa, ações, navegação) tem a largura
   do mapa, e o mapa inteiro cabe na altura da tela (acervo todo em A4 paisagem, 1,4142) */
@media (min-width:900px) and (min-height:500px){
  .map-page{--w:min(1280px,calc(max(640px,(100vh - 240px) * 1.4142) + 32px))}
  .map-page main{display:grid;grid-template-columns:1fr auto;column-gap:var(--sp5);align-items:end}
  .map-head,.viewer,.pager{grid-column:1 / -1}
  .map-head{grid-column:1}
  .map-top{justify-content:flex-start;gap:var(--sp5)}
  .map-actions{grid-column:2;grid-row:1;margin:0 0 var(--sp3)}
  .pager{margin-top:var(--sp4)}
  /* com áudio: Baixar PDF segue à direita do título; "Ouvir explicação" logo abaixo do título, antes
     do mapa (o player abre ali e empurra o mapa para baixo, sem rolar a página) */
  .has-listen .map-actions{display:contents}
  .has-listen .map-actions .map-btns{grid-column:2;grid-row:1;margin:0 0 var(--sp3)}
  .has-listen .map-actions .listen{grid-column:1 / -1;grid-row:2;align-self:start;margin:0 0 var(--sp3)}
  /* compacto aqui: o mapa continua inteiro na altura da tela */
  .has-listen .listen-cta{min-height:48px;padding-top:var(--sp1);padding-bottom:var(--sp1)}
  .has-listen .listen-g{width:36px;height:36px;padding:4px}
}
/* celular deitado: cabeçalho compacto para a folha caber inteira */
@media (orientation:landscape) and (max-height:500px){
  .top{min-height:44px}
  .map-head .label{display:none}
  .map-head .page-title{margin:0 0 var(--sp2);font-size:1.125rem}
  .map-top .back{min-height:36px}
  .stage{max-width:calc((100vh - 140px) * var(--ar,1.4142));margin:0 auto}
}

/* ================= MODO DE ESTUDO: camada própria (sem Fullscreen API); o mapa é tudo ================= */
html.studying,html.studying body{overflow:hidden;height:100%}
html.studying .viewer{position:fixed;inset:0;z-index:50;margin:0;background:var(--study);display:flex;flex-direction:column}
/* entrada: o mapa cresce do lugar dele (viewer.js, Web Animations); os controles chegam junto */
html.studying:not(.booted) .study-bar,html.studying:not(.booted) .nav-arrow,html.studying:not(.booted) .tools{animation:study-ui .3s var(--ease)}
@keyframes study-ui{0%,40%{opacity:0}}
/* antes do encaixe por JS (mapa aberto já no estudo), a imagem já aparece inteira e centralizada */
html.studying .stage img.map{object-fit:contain}
html.studying .stage{flex:1;aspect-ratio:auto;max-width:none;margin:0;border-radius:0;box-shadow:none;touch-action:none;cursor:grab;background:transparent}
/* controles = vidro escuro: legíveis sobre o fundo e sobre a arte clara ampliada */
html.studying .study-bar{display:flex;align-items:center;gap:var(--sp2);position:absolute;left:0;right:0;top:0;z-index:2;padding:calc(var(--sp2) + var(--safe-t)) max(var(--sp2),var(--safe-r)) var(--sp5) max(var(--sp2),var(--safe-l));background:linear-gradient(rgba(8,9,11,.92),rgba(8,9,11,.55) 60%,rgba(8,9,11,0));color:#fff;transition:opacity .2s}
.study-title{flex:1;min-width:0;line-height:1.25;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.study-title strong{display:block;font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.study-title span{display:inline-block;margin-top:3px;padding:1px var(--sp2);border-radius:var(--r-pill);background:rgba(8,9,11,.72);font-size:.6875rem;letter-spacing:.06em;color:#e4e5ea;text-shadow:none}
.icon-btn,html.studying .nav-arrow,.tools{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:var(--r-pill);background:rgba(8,9,11,.62);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;color:#fff;cursor:pointer;transition:background-color .12s,transform .08s}
.icon-btn:active,.nav-arrow:active,.tools button:active{transform:scale(.94);background:rgba(8,9,11,.9)}
@media (hover:hover){.icon-btn:hover{background:rgba(8,9,11,.85)}.tools button:hover:not(:disabled){background:rgba(255,255,255,.2)}}
html.studying .nav-arrow{display:flex;position:absolute;top:50%;z-index:2;align-items:center;justify-content:center;width:44px;height:64px;margin-top:-32px;border:0;background:rgba(8,9,11,.42);color:rgba(255,255,255,.86);cursor:pointer;transition:opacity .16s,background-color .12s,color .12s}
html.studying .nav-arrow[hidden]{display:none}
.nav-arrow.prev{left:max(0px,var(--safe-l));border-radius:0 var(--r-l) var(--r-l) 0}
.nav-arrow.next{right:max(0px,var(--safe-r));border-radius:var(--r-l) 0 0 var(--r-l)}
@media (hover:hover){html.studying .nav-arrow:hover{background:rgba(8,9,11,.8);color:#fff}}
html.studying .tools{display:flex;position:absolute;left:50%;bottom:calc(var(--sp4) + var(--safe-b));z-index:2;transform:translateX(-50%);gap:var(--sp1);padding:var(--sp1);border-radius:var(--r-pill);background:rgba(8,9,11,.78);box-shadow:0 4px 16px rgba(0,0,0,.4);transition:opacity .2s}
html.studying .tools[hidden]{display:none}
.tools button{min-width:44px;min-height:44px;padding:0 var(--sp4);border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.tools button:disabled{opacity:.35;cursor:default}
.zoom-level{min-width:3.4em;align-self:center;text-align:center;color:#d6d7dd;font:600 .75rem var(--mono)}
html.studying :focus-visible{outline-color:#fff}
/* toque simples esconde/mostra os controles (como um visualizador de fotos) */
html.studying .viewer.calm .study-bar,html.studying .viewer.calm .nav-arrow,html.studying .viewer.calm .tools{opacity:0;pointer-events:none}
/* leitura: nada parado sobre o mapa — setas sempre, cabeçalho/ferramentas quando estão sobre a arte,
   saem da frente depois da entrada (viewer.js); voltam com o mouse ou um toque */
html.studying .viewer.rest .nav-arrow,html.studying .viewer.rest.over-top .study-bar,html.studying .viewer.rest.over-bot .tools{opacity:0;pointer-events:none;transition-duration:.28s}
/* touch: zoom é pinça; só "Ajustar" aparece quando ampliado. Mouse/teclado: − + Ajustar */
@media (pointer:coarse){
  .tools [data-zoom="in"],.tools [data-zoom="out"],.tools .zoom-level{display:none}
  /* no touch o deslize é o principal: setas vão para os cantos de baixo, fora do meio do mapa */
  html.studying .nav-arrow{top:auto;bottom:calc(var(--sp3) + var(--safe-b));margin:0;width:44px;height:44px;border-radius:var(--r-pill);background:rgba(8,9,11,.5);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
  .nav-arrow.prev{left:max(var(--sp3),var(--safe-l))}
  .nav-arrow.next{right:max(var(--sp3),var(--safe-r))}
}

/* ================= vazio / não encontrado ================= */
.empty-state{max-width:520px;padding:var(--sp6) 0;display:grid;gap:var(--sp3)}
.empty-state .btn{margin-top:var(--sp3)}

/* ================= Meu acesso (V1.1, DEC-069) ================= */
/* página de conta, não dashboard: quem está logado, o que comprou, até quando e quanto falta. A barra é o TEMPO do
   período de acesso (meter), nunca progresso de estudo. Humor fica na arte do avatar, não na interface. */
.account-page{--w:720px}
.acct-head{display:flex;align-items:center;gap:var(--sp4);margin:var(--sp3) 0 var(--sp4)}
.acct-who{min-width:0}
.acct-who .page-title{margin-top:var(--sp1);font-size:1.5rem;overflow-wrap:anywhere;text-wrap:balance}
.acct-data{display:grid;gap:0;margin:0 0 var(--sp6);border-top:1px solid var(--line)}
.acct-data>div{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp3);padding:var(--sp3) 0;border-bottom:1px solid var(--line)}
.acct-data dt{color:var(--text-3);font-size:.875rem}
.acct-data dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.acct-section+.acct-section{margin-top:var(--sp6)}
.access-card{display:grid;gap:var(--sp2);padding:var(--sp4);border-radius:var(--r-l);background:var(--s1)}
.access-card+.access-card{margin-top:var(--sp2)}
.access-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp2) var(--sp3)}
.access-until{color:var(--text-2);font-size:.9375rem}
.access-until b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--s3);color:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.02em}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill-breve{color:var(--warn)}
.pill-expirado,.pill-suspenso{color:var(--danger);background:var(--danger-bg)}
.pill-futuro{color:var(--text-2)}
.period{display:block;width:100%;height:8px;margin-top:var(--sp2);border:0;border-radius:var(--r-pill);background:var(--s3);-webkit-appearance:none;appearance:none}
.period::-webkit-meter-bar{height:8px;border:0;border-radius:var(--r-pill);background:var(--s3)}
.period{--bar:var(--bar-neutral)}
.tone-verde .period{--bar:var(--bar-ok)}.tone-ambar .period{--bar:var(--warn)}.tone-coral .period{--bar:var(--bar-short)}
.tone-vermelho .period{--bar:var(--bar-urgent)}.tone-encerrado .period{--bar:var(--bar-done)}
.period::-webkit-meter-optimum-value{border-radius:var(--r-pill);background:var(--bar)}
.period::-moz-meter-bar{border-radius:var(--r-pill);background:var(--bar)}
.is-expirado .period-dates,.is-expirado .access-includes{opacity:.75}
.period-dates{display:flex;justify-content:space-between;gap:var(--sp3);color:var(--text-3);font-size:.75rem}
.days{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.is-expirado .days,.is-suspenso .days{color:var(--text-2);font-weight:600}
.access-includes{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp1) var(--sp2);margin-top:var(--sp1);padding-top:var(--sp3);border-top:1px solid var(--line);font-size:.875rem;color:var(--text-2)}
.access-includes .meta{margin-right:var(--sp1)}
.inc:not(:last-child)::after{content:"·";margin-left:var(--sp2);color:var(--text-3)}
.inc small{color:var(--text-3)}
/* seletor de avatar: grade simples; o atual fica óbvio (anel claro + visto); um toque escolhe */
.avatar-picker summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--tap);padding:0 var(--sp4);border-radius:var(--r-l);background:var(--s1);font-weight:700;cursor:pointer;list-style:none}
.avatar-picker summary::-webkit-details-marker{display:none}
.avatar-picker summary .i{width:18px;height:18px;color:var(--text-3);rotate:90deg;transition:rotate .2s var(--ease)}
.avatar-picker[open] summary .i{rotate:-90deg}
.avatar-picker form{display:grid;gap:var(--sp3);padding-top:var(--sp3)}
.avatar-picker fieldset{margin:0;padding:0;border:0;min-width:0}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp2)}
.avatar-opt{position:relative;display:grid;justify-items:center;gap:6px;padding:var(--sp3) var(--sp1) var(--sp2);border-radius:var(--r-l);background:var(--s1);box-shadow:0 0 0 1.5px transparent inset;cursor:pointer;text-align:center;transition:background-color .12s,box-shadow .12s}
.avatar-opt input{position:absolute;opacity:0;pointer-events:none}
.avatar-pic{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--avatar-bg);box-shadow:0 0 0 1.5px var(--avatar-ring)}
.avatar-pic img{display:block;width:100%;height:100%}
.avatar-name{font-size:.75rem;line-height:1.25;color:var(--text-2)}
.avatar-opt:active{background:var(--s2)}
.avatar-opt:has(input:checked){background:var(--s2);box-shadow:0 0 0 2px var(--light) inset}
.avatar-opt:has(input:checked) .avatar-name{color:var(--text);font-weight:700}
.avatar-opt:has(input:checked)::after{content:"✓";position:absolute;top:6px;right:8px;font-weight:800;font-size:.875rem;color:var(--light)}
.avatar-opt:has(input:focus-visible){outline:2px solid var(--pink);outline-offset:2px}
.picker-legend{margin-bottom:var(--sp2);padding:0;font-size:.8125rem;font-weight:700;color:var(--text-2)}
/* cor do avatar: 8 amostras fechadas (4 por linha no celular), mesmo estado de seleção da grade de personagens */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp2)}
@media (min-width:640px){.swatches{grid-template-columns:repeat(8,minmax(0,1fr))}}
.swatch{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:var(--tap);padding:var(--sp2) 2px;border-radius:var(--r-l);background:var(--s1);box-shadow:0 0 0 1.5px transparent inset;cursor:pointer;text-align:center;transition:background-color .12s,box-shadow .12s}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch-dot{width:32px;height:32px;border-radius:50%;background:var(--avatar-bg);box-shadow:0 0 0 1.5px var(--avatar-ring)}
.swatch-name{font-size:.6875rem;line-height:1.2;color:var(--text-2)}
.swatch:active{background:var(--s2)}
.swatch:has(input:checked){background:var(--s2);box-shadow:0 0 0 2px var(--light) inset}
.swatch:has(input:checked) .swatch-name{color:var(--text);font-weight:700}
.swatch:has(input:checked)::after{content:"✓";position:absolute;top:4px;right:6px;font-weight:800;font-size:.75rem;color:var(--light)}
.swatch:has(input:focus-visible){outline:2px solid var(--pink);outline-offset:2px}
@media (hover:hover){.avatar-opt:hover,.swatch:hover{background:var(--s2)}.avatar-picker summary:hover .i{color:var(--text-2)}}
.placeholder-note{justify-self:start;padding:var(--sp1) var(--sp2);border:1px dashed var(--warn);border-radius:var(--r);color:var(--warn);font:600 .6875rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.avatar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3)}
.avatar-actions .btn[hidden]{display:none}
.avatar-actions .status{margin:0}
@media (min-width:720px){.acct-head .page-title{font-size:2rem}}

/* movimento reduzido: desliga transições e animações da interface — exceto os glyphs vivos, o ícone do
   Estudar, o modo de estudo e o componente de áudio, que são parte da experiência (DEC-040/041/043) */
@media (prefers-reduced-motion:reduce){:not(.glyph *,.viewer,.viewer *,.listen *),:not(.glyph *,.viewer,.viewer *,.listen *)::before,:not(.glyph *,.viewer,.viewer *,.listen *)::after{transition:none!important;animation:none!important}}