/* 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;
  --danger:#ff8d8d;--danger-bg:rgba(255,99,99,.12);
  --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}
.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)}

/* 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)}
}
/* 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)}
/* 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)}
  .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-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 .btn-pdf{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)}

/* 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}}