/* Tokens: politics-pipeline/docs/webapp/08_design_nyt.md §2–4; --ontem/--hoje são os dois "lados" da rede */
/* v3.9 — Fontes de reserva com as medidas das fontes do site (largura e altura medidas no Chromium): enquanto Newsreader e
   Libre Franklin chegam, Georgia e Arial ocupam o mesmo espaço, e a troca não empurra o texto. */
@font-face { font-family:"Newsreader fb"; src:local("Georgia"); font-weight:200 549; size-adjust:100.2%; ascent-override:73.9%; descent-override:25.9%; line-gap-override:0%; }
@font-face { font-family:"Newsreader fb"; src:local("Georgia Bold"), local("Georgia-Bold"); font-weight:550 900; size-adjust:91.7%; ascent-override:80.7%; descent-override:28.4%; line-gap-override:0%; }
@font-face { font-family:"Libre Franklin fb"; src:local("Arial"), local("ArialMT"); font-weight:100 549; size-adjust:102%; ascent-override:95.1%; descent-override:24.5%; line-gap-override:0%; }
@font-face { font-family:"Libre Franklin fb"; src:local("Arial Bold"), local("Arial-BoldMT"); font-weight:550 900; size-adjust:97.5%; ascent-override:99.5%; descent-override:25.6%; line-gap-override:0%; }
:root {
  --bg:#ffffff; --ink:#121212; --ink-2:#363636; --muted:#5a5a5a; --axis:#666666;
  --comp:#8b8b8b; --you:#6236c6; --grid:#e2e2e2; --rule:#cccccc; --zone:#f4f4f4;
  --ontem:#8a4b17; --hoje:#121212; --tec:#7a7a7a; --pil-apagada:#8a8a8a; --sombra:0 6px 28px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
  --sans:"Libre Franklin","Libre Franklin fb","Franklin Gothic Medium",Arial,sans-serif;
  --serif:"Newsreader","Newsreader fb",Georgia,"Times New Roman",serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#121212; --ink:#f0f0f0; --ink-2:#d6d6d6; --muted:#a8a8a8; --axis:#9a9a9a;
  --comp:#7a7a7a; --you:#b69cff; --grid:#2e2e2e; --rule:#3a3a3a; --zone:#1c1c1c;
  --ontem:#e0a46a; --hoje:#f0f0f0; --tec:#9a9a9a; --pil-apagada:#6b6b6b; --sombra:0 6px 28px rgba(0,0,0,.6), 0 0 0 1px #3a3a3a;
}}
:root[data-theme="dark"] {
  --bg:#121212; --ink:#f0f0f0; --ink-2:#d6d6d6; --muted:#a8a8a8; --axis:#9a9a9a;
  --comp:#7a7a7a; --you:#b69cff; --grid:#2e2e2e; --rule:#3a3a3a; --zone:#1c1c1c;
  --ontem:#e0a46a; --hoje:#f0f0f0; --tec:#9a9a9a; --pil-apagada:#6b6b6b; --sombra:0 6px 28px rgba(0,0,0,.6), 0 0 0 1px #3a3a3a;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink-2); font:400 18px/1.55 var(--serif); }
body.folha { overflow:hidden; }
button, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--you); outline-offset:2px; }
a { color:var(--ink); text-underline-offset:2px; text-decoration-color:var(--rule); }
a:hover { text-decoration-color:var(--ink); }
.pular { position:absolute; left:-9999px; }
.pular:focus { left:8px; top:8px; background:var(--bg); padding:var(--s2); z-index:30; }

/* v4.0 — Topo com ar: marca em versalete espaçado, 12 px até o título, 10 px até a linha de apoio */
.marca { font:800 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 var(--s3); }
.dek { font:400 16px/1.4 var(--sans); color:var(--ink-2); margin:10px 0 0; }
.topo-tit { min-width:0; }
.nav-ico, .topo-livros, .alca { display:none; }
.kicker { font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:0 0 var(--s2); }
.selo { display:inline-block; margin-left:var(--s2); color:var(--you); border:1px solid var(--you); padding:3px 6px; border-radius:2px; }
.fonte, .nota { font:400 13px/1.45 var(--sans); color:var(--muted); }
.botao { display:inline-block; background:var(--ink); color:var(--bg); border:0; border-radius:2px; padding:13px 18px; font:600 16px/1 var(--sans); min-height:44px; cursor:pointer; text-decoration:none; }
.botao-texto { background:none; border:0; padding:12px 4px; min-height:44px; font:600 15px/1 var(--sans); color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule); cursor:pointer; }
.botao-texto:hover { text-decoration-color:var(--ink); }
.botao-texto[disabled] { color:var(--rule); cursor:default; text-decoration:none; }

/* Topo */
.topo { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); padding:var(--s5) 32px 20px; border-bottom:1px solid var(--grid); }
.topo h1 { font:650 26px/1.08 var(--serif); font-variation-settings:"opsz" 72; letter-spacing:-.01em; color:var(--ink); margin:0; }
@media (min-width:760px) and (not ((pointer:coarse) and (max-height:500px))) { .topo h1 { font-size:34px; line-height:1.04; } }
.vistas { flex:none; display:flex; border:1px solid var(--rule); border-radius:2px; }
.topo-dir { flex:none; display:flex; align-items:center; gap:var(--s4); }
.vistas button { background:none; border:0; padding:8px 14px; min-height:44px; min-width:44px; font:600 14px/1 var(--sans); color:var(--muted); cursor:pointer; }
.vistas button + button { border-left:1px solid var(--rule); }
.vistas button[aria-selected="true"] { background:var(--ink); color:var(--bg); }
@media (hover:hover) { .vistas button[aria-selected="false"]:hover { color:var(--ink); background:var(--zone); } }
.topo-notas { font:600 14px/1 var(--sans); padding:15px 2px; white-space:nowrap; }

/* Palco: o mapa ocupa a tela; os painéis flutuam por cima */
.palco { position:relative; height:calc(100vh - 82px); height:calc(100dvh - 82px); min-height:560px; --il:0px; --ir:0px; overflow:hidden; }
.grafo-area { position:absolute; top:56px; bottom:56px; left:calc(var(--il) + 12px); right:calc(var(--ir) + 12px); overflow:auto; overscroll-behavior:contain; }
#svg { display:block; width:100%; overflow:visible; touch-action:manipulation; }
#svg text { font-family:var(--sans); fill:var(--ink); }
#svg .cab { font-size:12px; font-weight:700; letter-spacing:.06em; fill:var(--muted); }
/* v3.7 — O nó inteiro (alvo, ponto, nome, seta) é um link: mão em tudo, nada selecionável como texto; o alvo recebe o ponteiro mesmo transparente */
#svg .no, #svg .no * { cursor:pointer; -webkit-user-select:none; user-select:none; }
#svg .no { -webkit-tap-highlight-color:transparent; }
#svg .alvo { fill:transparent; pointer-events:all; }
#svg .no:focus { outline:none; }
#svg .no-pessoa .nome { font-size:14px; font-weight:700; }
#svg .no-pessoa .ini { font-size:14px; font-weight:800; letter-spacing:.02em; fill:var(--bg); pointer-events:none; }
#svg .sub { font-size:11px; font-weight:500; fill:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
/* v3.7 — Técnica = pílula sólida: fundo de tinta, nome na cor do fundo (≈18:1 nos dois temas), pictograma Lucide à esquerda;
   fica por cima das linhas, então nenhuma linha cruza o texto. */
#svg .pilula { fill:var(--ink); }
#svg .no-tecnica text { font-weight:600; fill:var(--bg); }
#svg .ico { fill:none; stroke:var(--bg); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#svg .anel-p { fill:none; stroke:var(--ink); stroke-width:2; opacity:0; }
/* O mesmo pictograma num círculo nos painéis (cabeça da técnica, pilares) e nos cartões */
.tec-ico { flex:none; display:inline-block; vertical-align:middle; }
.tec-ico circle { fill:var(--ink); }
.tec-ico path { fill:none; stroke:var(--bg); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tec-ico text { font:800 13px var(--sans); fill:var(--bg); }
.pilar-nome .tec-ico { vertical-align:-5px; margin-right:10px; }
#svg .no-pessoa .nome, #svg .sub { paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
#svg.colunas .no-pessoa .nome { font-size:15px; font-weight:600; }
.disco { fill:var(--hoje); }
.ontem .disco { fill:var(--ontem); }
#svg .foto { pointer-events:none; }
.anel { fill:none; stroke:none; }
.lig { fill:none; stroke-linecap:round; opacity:.22; pointer-events:none; }
.lig.lado-h { stroke:var(--ontem); } .lig.lado-b { stroke:var(--hoje); }
.lig-alvo { fill:none; stroke:transparent; stroke-width:9; pointer-events:stroke; cursor:pointer; }
#svg .apagado { opacity:.5; } /* esmaecido, mas o texto ainda passa de 3:1 (nomes) */
/* Pílula esmaecida: cor sólida mais clara (não transparente, para nenhuma linha aparecer por trás do texto); texto ≥ 3:1 */
#svg .no-tecnica.apagado { opacity:1; }
#svg .no-tecnica.apagado .pilula { fill:var(--pil-apagada); }
#svg .lig.apagado { opacity:.03; }
#svg .lig.aceso { opacity:.9; }
#svg .lig.eco { opacity:.4; }
@media (max-width:599px) { #svg .no-pessoa .nome { font-size:13px; } }

/* Dica: uma linha simples; ao passar o mouse, frase + exemplo real */
.dica { position:absolute; z-index:2; bottom:12px; left:calc(var(--il) + 16px); right:calc(var(--ir) + 16px); max-width:640px; margin:0 auto;
  font:500 14px/1.4 var(--sans); color:var(--muted); text-align:center; pointer-events:none; }
.dica.em-cima { top:64px; bottom:auto; }
.dica.cheia { background:var(--bg); box-shadow:var(--sombra); padding:var(--s3) var(--s4); color:var(--ink-2); text-align:left; }
.dica > span { display:block; }
.dica-frase { font:500 16px/1.4 var(--serif); color:var(--ink); margin-top:var(--s1); }
.dica-quem { display:inline; font:500 13px/1.4 var(--sans); color:var(--muted); white-space:nowrap; }
.dica-quem .rosto, .quem-curto .rosto, .legenda-exemplo .rosto, .lado-frase .rotulo .rosto { margin-top:-3px; }
.dica-acao { display:none !important; }
.dica.cheia .dica-acao { display:block !important; font:600 12px/1.3 var(--sans); color:var(--muted); margin-top:var(--s1); }

/* Abas que abrem os painéis */
.aba { position:absolute; z-index:3; top:12px; display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--rule); border-radius:2px;
  padding:9px 12px; min-height:40px; font:600 14px/1 var(--sans); color:var(--ink); cursor:pointer; box-shadow:var(--sombra); }
.aba-guia { left:16px; }
.abas-dir { position:absolute; z-index:3; top:12px; right:calc(var(--ir) + 16px); display:flex; gap:var(--s2); }
.abas-dir .aba { position:static; text-decoration:none; }
.g-livro { fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }

/* Painéis flutuantes */
.painel { position:absolute; z-index:5; background:var(--bg); box-shadow:var(--sombra); display:flex; flex-direction:column; }
.painel-barra { flex:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding:2px var(--s4) 2px var(--s5); border-bottom:1px solid var(--grid); }
.painel-barra-fim { justify-content:flex-end; }
.painel-barra h2 { font:700 13px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:0; }
.painel-barra h2:focus { outline:none; }
.painel-corpo { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s5) var(--s5) var(--s6); }
.guia { left:16px; top:12px; bottom:12px; width:380px; }
.legenda { right:calc(var(--ir) + 16px); top:62px; width:340px; max-height:calc(100% - 80px); }
.detalhe { right:16px; top:12px; bottom:12px; width:min(600px, 46vw); container-type:inline-size; }
@media (prefers-reduced-motion:no-preference) {
  .painel:not([hidden]) { animation:entra .18s ease-out; }
  @keyframes entra { from { opacity:0; transform:translateY(6px); } }
}

/* Como ler */
.pitch { font:400 18px/1.45 var(--serif); color:var(--ink); margin:0; }
.botoes { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center; margin:var(--s4) 0 0; }
.secao { font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:var(--s6) 0 var(--s2); }
.passos-guia { list-style:none; margin:0; padding:0; }
.passos-guia li { display:grid; grid-template-columns:96px 1fr; gap:var(--s4); align-items:center; padding:var(--s3) 0; border-top:1px solid var(--grid); }
.passos-guia li:first-child { border-top:0; }
.passos-guia svg { width:96px; height:56px; overflow:visible; }
.passos-guia p { margin:0; font:500 16px/1.35 var(--sans); color:var(--ink); }
.passos-guia b { font-weight:700; }
.cor-ontem { color:var(--ontem); }
.g-ontem { fill:var(--ontem); } .g-hoje { fill:var(--hoje); } .g-tec { fill:var(--tec); }
.g-pil { fill:var(--ink); } .g-ptxt { fill:var(--bg); font:600 9px var(--sans); } .g-plinha { stroke:var(--bg); stroke-width:2.5; stroke-linecap:round; }
.g-ini { fill:var(--bg); font:800 11px var(--sans); text-anchor:middle; }
.g-txt { fill:var(--ink-2); font:600 9.5px var(--sans); }
.g-lh { fill:none; stroke:var(--ontem); stroke-linecap:round; } .g-lb { fill:none; stroke:var(--hoje); stroke-linecap:round; }
.g-cursor { fill:var(--bg); stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }
.g-card { fill:var(--bg); stroke:var(--rule); }
.mais-usadas { list-style:none; margin:0; padding:0; font:400 15px/1.4 var(--sans); }
.mais-usadas li { padding:var(--s3) 0; border-top:1px solid var(--grid); }
.mais-usadas li > span { display:block; color:var(--ink-2); }
.quem-curto { font:500 13px/1.3 var(--sans); color:var(--muted); font-style:normal; }

/* Legenda */
.legenda-lista { list-style:none; margin:0; padding:0; font:400 15px/1.35 var(--sans); color:var(--ink-2); }
.legenda-lista li { display:grid; grid-template-columns:40px 1fr; gap:var(--s3); align-items:center; padding:var(--s2) 0; }
.legenda-lista b { color:var(--ink); }
.legenda-exemplo { margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--grid); font:400 15px/1.4 var(--sans); }
.legenda-exemplo p { margin:0 0 var(--s2); }

/* Painel de detalhe */
.painel-corpo h1 { font:700 32px/1.08 var(--serif); font-variation-settings:"opsz" 72; letter-spacing:-.01em; color:var(--ink); margin:0 0 var(--s3); }
.painel-corpo h1:focus { outline:none; }
.painel-corpo h2 { font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:var(--s7) 0 var(--s3); padding-top:var(--s3); border-top:1px solid var(--rule); }
.rotulo-leve { display:block; font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 var(--s1); }
.lead { font:500 21px/1.35 var(--serif); color:var(--ink); margin:0 0 var(--s3); }
.meta { font:500 15px/1.4 var(--sans); color:var(--muted); margin:0; }
.texto { margin:var(--s3) 0; }
.explica { font:400 15px/1.45 var(--sans); color:var(--ink-2); margin:0 0 var(--s4); }
.vazio { font:500 16px/1.45 var(--sans); color:var(--ink-2); }
.sem-hist { font:italic 400 14px/1.45 var(--sans); color:var(--muted); margin:var(--s2) 0 0; }
.revisao { display:block; font:italic 400 14px/1.4 var(--sans); color:var(--muted); margin:var(--s1) 0 0; }
.cabeca { display:flex; gap:var(--s4); align-items:center; margin-bottom:var(--s4); }
.cabeca h1 { margin-bottom:var(--s1); }
/* Rosto: foto redonda (preto e branco, mesmo recorte para todos) com anel fino da cor do lado. Sem foto: monograma. */
.rosto { flex:none; box-sizing:border-box; width:32px; height:32px; border-radius:50%; object-fit:cover; vertical-align:middle;
  border:2px solid var(--hoje); padding:1.5px; background:var(--bg); }
.rosto.ontem { border-color:var(--ontem); }
.rosto.g { width:72px; height:72px; border-width:3px; padding:2px; }
.rosto.m { width:40px; height:40px; }
.rosto.pp { width:22px; height:22px; border-width:1.5px; padding:1px; margin-right:5px; }
.rosto.mono { display:inline-grid; place-items:center; padding:0; font:800 11px/1 var(--sans); background:var(--hoje); color:var(--bg); }
.rosto.mono.ontem { background:var(--ontem); }
.rosto.mono.g { font-size:22px; } .rosto.mono.m { font-size:13px; } .rosto.mono.pp { font-size:8px; }
.destaque { font:500 16px/1.5 var(--sans); color:var(--ink); border-left:3px solid var(--rule); padding-left:var(--s3); }

/* Abas da técnica */
.abas { display:flex; gap:0; margin:var(--s5) 0 var(--s4); border-bottom:1px solid var(--rule); overflow-x:auto; scrollbar-width:none; }
.abas button { flex:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; padding:12px 14px 10px; min-height:44px;
  font:600 16px/1 var(--sans); color:var(--muted); cursor:pointer; white-space:nowrap; }
.abas button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.abas button:first-child { padding-left:0; }

/* Par de frases: HOJE em cima, ONTEM embaixo, depois "por que se parecem" e "o que é diferente" com o mesmo peso */
.par-tecnica { font:700 15px/1.3 var(--sans); margin:0 0 var(--s3); }
.cartao { margin:0 0 var(--s3); padding:var(--s4) var(--s4) var(--s3) var(--s5); background:var(--zone); border-left:6px solid var(--hoje); }
.cartao.ontem { border-left-color:var(--ontem); }
.rotulo { font:800 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 var(--s2); }
.cartao .quem { display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s3); font:400 16px/1.25 var(--sans); }
.cartao .quem .rotulo { display:block; margin:0 0 4px; }
.cartao .quem b { color:var(--ink); font-weight:700; }
.cartao.ontem .rotulo { color:var(--ontem); }
.cartao blockquote { margin:0; font:500 21px/1.35 var(--serif); color:var(--ink); }
.cartao figcaption { font:400 14px/1.5 var(--sans); color:var(--muted); margin-top:var(--s3); }
.traducao { font-style:italic; }
.dirigida { display:inline-block; font:italic 400 12px/1.3 var(--sans); color:var(--muted); text-decoration:underline dotted var(--rule); text-underline-offset:3px; cursor:help; }
/* v4.0 — Navegação dos pares à vista desde o começo: "Par 1 de 5" + ← → em cima, fichas com rosto (quem fala hoje) */
.car-topo { margin:0 0 var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--grid); }
.passos.passos-topo { justify-content:flex-start; gap:var(--s2); margin:0 0 var(--s2); padding:0; border-top:0; }
.car-n { margin-right:auto; font:800 12px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.car-seta { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--rule); border-radius:2px; background:var(--bg);
  font:600 20px/1 var(--sans); color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { .car-seta:not([disabled]):hover { border-color:var(--ink); background:var(--zone); } }
.car-seta:not([disabled]):active { background:var(--grid); }
.car-seta[disabled] { color:var(--rule); border-color:var(--grid); cursor:default; }
.car-fichas { position:relative; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.car-fichas.rola { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:6px; scrollbar-width:thin; }
.car-fichas li { flex:none; }
.car-ficha { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 14px 4px 6px; border:1px solid var(--rule); border-radius:22px; background:var(--bg);
  font:600 14px/1.2 var(--sans); color:var(--ink); white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.car-ficha .rosto.pp { width:30px; height:30px; margin:0; }
@media (hover:hover) { .car-ficha:not([aria-current]):hover { border-color:var(--ink); background:var(--zone); } }
.car-ficha:active { background:var(--grid); }
.car-ficha[aria-current] { background:var(--ink); border-color:var(--ink); color:var(--bg); cursor:default; }
.car-ficha[aria-current] .rosto { border-color:var(--bg); }
/* v4.0 — Quem usa (cabeçalho da técnica): Ontem / Hoje em fileiras de fichas que abrem a pessoa nesta técnica */
.quem-usa { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s2); margin:var(--s3) 0 var(--s4); }
.quem-fila { display:flex; align-items:center; gap:var(--s3); }
.quem-fila > .rotulo { flex:none; width:54px; margin:0; }
.quem-fila.ontem > .rotulo { color:var(--ontem); }
.quem-fila ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.quem-chip { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:5px 13px 5px 5px; border:1px solid var(--rule); border-radius:24px; background:var(--bg);
  font:600 14px/1.2 var(--sans); color:var(--ink); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { .quem-chip:hover { border-color:var(--ink); background:var(--zone); } }
.quem-chip:active { background:var(--grid); }
.quem-nada { font:italic 400 14px/1.4 var(--sans); color:var(--muted); }
.analise { display:grid; gap:var(--s3); margin-top:var(--s4); }
@container (min-width:460px) { .analise { grid-template-columns:1fr 1fr; } }
.analise > div { border-top:3px solid var(--ink); padding-top:var(--s2); }
.analise h3 { font:700 15px/1.3 var(--sans); color:var(--ink); margin:0 0 var(--s1); }
.analise p { font:400 16px/1.45 var(--serif); margin:0; }
.passos { display:flex; align-items:center; justify-content:center; gap:var(--s3); margin-top:var(--s3); font:600 15px/1 var(--sans); color:var(--ink); border-top:1px solid var(--grid); }

/* Linhas expansíveis: nome + frase real visíveis; números e fontes ao abrir */
.linha { border-top:1px solid var(--grid); }
.linha > summary { list-style:none; cursor:pointer; padding:var(--s3) 0; display:block; }
.linha > summary::-webkit-details-marker { display:none; }
.linha-topo { display:flex; align-items:center; gap:var(--s2); font:400 16px/1.3 var(--sans); color:var(--ink); }
.linha-topo b { font-weight:700; }
.linha-resumo { display:block; font:400 14px/1.4 var(--sans); color:var(--muted); margin-top:2px; }
.linha-frase { display:block; font:500 16px/1.4 var(--serif); color:var(--ink); margin-top:var(--s1); }
.mais { display:inline-block; font:600 13px/1 var(--sans); color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; margin-top:var(--s2); }
.mais::after { content:" ↓"; }
.linha[open] > summary .mais::after { content:" ↑"; }
.linha[open] > summary .mais { font-size:0; }
.linha[open] > summary .mais::before { content:"Ver menos"; font-size:13px; }
.linha-corpo { padding:0 0 var(--s4) var(--s3); border-left:2px solid var(--grid); margin-bottom:var(--s3); font:400 15px/1.5 var(--sans); }
.linha-corpo h4 { font:700 13px/1.3 var(--sans); color:var(--ink); margin:var(--s3) 0 var(--s2); }
.linha-corpo p { margin:0 0 var(--s2); }
.linha-corpo .par { margin-bottom:var(--s4); }
.grupo { font:700 13px/1.3 var(--sans); color:var(--ink); text-transform:uppercase; letter-spacing:.05em; margin:var(--s5) 0 var(--s2); }
.nao { margin-top:var(--s4); }
.outras > summary { font:600 15px/1 var(--sans); color:var(--ink); cursor:pointer; padding:var(--s3) 0; min-height:44px; border-top:1px solid var(--grid); }

/* Frase real solta */
.cit { margin:0 0 var(--s3); padding-left:var(--s3); border-left:3px solid var(--hoje); display:grid; grid-template-columns:32px 1fr; column-gap:var(--s3); align-items:start; }
.cit > .rosto { grid-row:span 2; margin-top:2px; }
.cit.ontem { border-left-color:var(--ontem); }
.cit blockquote { margin:0; font:500 17px/1.4 var(--serif); color:var(--ink); }
.cit figcaption { font:400 13px/1.45 var(--sans); color:var(--muted); margin-top:var(--s1); }
.cit figcaption b { color:var(--ink); }

/* O que é */
.checklist { list-style:none; padding:0; margin:0; font:400 16px/1.4 var(--sans); }
.checklist li { position:relative; padding:var(--s2) 0 var(--s2) 30px; border-top:1px solid var(--grid); }
.checklist li::before { content:"✓"; position:absolute; left:4px; top:var(--s2); font-weight:800; color:var(--ink); }

/* Livros: blocos tipográficos com lombada */
.livro { margin:0 0 var(--s4); padding:var(--s4); background:var(--zone); }
.livro-titulo { font:700 italic 18px/1.25 var(--serif); color:var(--ink); margin:0; }
.livro-autor { font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:var(--s1) 0 var(--s3); }
.livro-ideia { font:400 16px/1.45 var(--serif); margin:0; }
.livro-aqui { font:400 14px/1.45 var(--sans); margin:var(--s3) 0 0; }
.livro-aqui .botao-texto { padding:4px 0; min-height:0; font-size:14px; }

/* Capas: imagem do Open Library ou capa tipográfica nossa, sempre em 2:3 */
.capa { display:block; width:100%; aspect-ratio:2/3; object-fit:contain; background:var(--zone); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.capa-tipo { display:flex; flex-direction:column; justify-content:space-between; padding:12px 10px; background:var(--ink); color:var(--bg); border-top:6px solid var(--ontem); overflow:hidden; }
.capa-tipo b { font:700 italic 14px/1.15 var(--serif); hyphens:auto; overflow-wrap:break-word; }
.capa-tipo i { font:700 9px/1.25 var(--sans); font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.capa.mini { width:64px; flex:none; }
.capa.mini.capa-tipo { padding:6px 5px; } .capa.mini.capa-tipo b { font-size:10px; } .capa.mini.capa-tipo i { display:none; }
.capa.grande { width:112px; flex:none; }
.capa.grande.capa-tipo b { font-size:15px; } .capa.grande.capa-tipo i { font-size:9px; }
.livro-card { display:flex; gap:var(--s4); align-items:flex-start; text-decoration:none; color:inherit; margin:0 0 var(--s3); }
.livro-card > span > span { display:block; }
.livro-card:hover .livro-titulo { text-decoration:underline; text-decoration-color:var(--rule); }
.livro-frase { font:400 14px/1.4 var(--sans); color:var(--ink-2); }
.livro .livro-autor { margin-bottom:var(--s2); }
.livros-grade { list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:var(--s5) var(--s4); }
.guia .livros-grade { grid-template-columns:repeat(4, 1fr); gap:var(--s4) var(--s3); }
.livros-grade a { display:block; text-decoration:none; color:var(--ink); }
.livros-grade a:hover .lg-titulo { text-decoration:underline; text-decoration-color:var(--rule); }
.lg-titulo { display:block; font:600 14px/1.25 var(--serif); margin-top:var(--s2); }
.lg-autor { display:block; font:500 11px/1.3 var(--sans); color:var(--muted); margin-top:2px; }
.guia .lg-titulo { font-size:12px; } .guia .lg-autor { display:none; }
.explica-guia { font:400 15px/1.4 var(--sans); color:var(--ink-2); margin:0; }
.livro-cabeca { display:flex; gap:var(--s5); align-items:flex-end; margin-bottom:var(--s4); }
.livro-cabeca h1 { font-size:28px; }
.livro-cabeca .livro-autor { margin:0 0 var(--s1); }
.livro-cabeca i { font-style:italic; }
.ideias { margin:0; padding-left:1.4em; font:400 17px/1.45 var(--serif); color:var(--ink); }
.ideias li { padding:var(--s1) 0; }
/* Pilares do livro: acordeão nativo (<details>); o nome da técnica lidera */
.pilares { list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule); }
.pilar { border-top:1px solid var(--rule); }
.pilar > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:28px 1fr 32px; gap:var(--s2) var(--s3); align-items:start; padding:var(--s4) 0; min-height:44px; }
.pilar > summary::-webkit-details-marker { display:none; }
.pilar-n { font:600 22px/1.15 var(--serif); font-variant-numeric:lining-nums tabular-nums; color:var(--ontem); }
.pilar-cab { display:block; }
.pilar-nome { display:block; font:700 24px/1.15 var(--serif); font-variation-settings:"opsz" 48; letter-spacing:-.01em; color:var(--ink); }
.pilar-resumo { display:block; font:400 15px/1.4 var(--sans); color:var(--ink-2); margin-top:var(--s1); }
.pilar > summary:hover .pilar-nome { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--rule); }
.pilar-seta { width:32px; height:32px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; margin-top:-2px; }
.pilar-seta::before { content:""; width:8px; height:8px; border:solid var(--ink); border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.pilar[open] .pilar-seta::before { transform:translateY(2px) rotate(-135deg); }
.pilar > summary:hover .pilar-seta { border-color:var(--ink); }
@media (prefers-reduced-motion:no-preference) { .pilar-seta::before { transition:transform .18s ease-out; } }
.pilar-corpo { margin:0 0 var(--s5) calc(28px + var(--s3)); }
.pilar-corpo .rotulo-leve { margin-top:var(--s2); }
.pilar-corpo .livro-ideia { font-size:17px; margin:0 0 var(--s4); color:var(--ink); }
.pilar-frases { background:var(--zone); padding:var(--s4); margin-bottom:var(--s3); }
.pilar-frases .cit:last-child { margin-bottom:0; }
.pilar-link { margin:0; font:600 15px/1.3 var(--sans); }
.pilar-link a { display:inline-block; padding:var(--s2) 0; text-decoration-color:var(--ink); }
/* "Sobre esta técnica" na aba Os livros: mesmo ritmo do corpo do pilar */
.livro > .livro-ideia { padding-left:var(--s3); border-left:2px solid var(--ontem); color:var(--ink); }
.livro > .livro-ideia .rotulo-leve { color:var(--ink); }
a.chip { display:inline-block; text-decoration:none; line-height:1.2; }
.leituras { margin:0; padding-left:1.1em; font:400 15px/1.45 var(--sans); }
.leituras li { margin-bottom:var(--s2); }
.leituras cite { font-style:normal; color:var(--muted); font-size:13px; }
.leituras cite::before { content:"— "; }

/* Pessoa / conexão */
.proximos { list-style:none; padding:0; margin:0; font:400 15px/1.4 var(--sans); }
.creditos { list-style:none; padding:0; margin:var(--s3) 0 0; font:400 14px/1.45 var(--sans); }
.creditos li { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0; border-top:1px solid var(--grid); }
.g-anel { fill:var(--zone); stroke-width:2.5; } .g-anel-ontem { stroke:var(--ontem); } .g-anel-hoje { stroke:var(--hoje); }
.g-rostos { display:flex; gap:6px; align-items:center; justify-content:center; height:56px; }
.proximos li { display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0; border-top:1px solid var(--grid); }
.dupla { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; font:600 15px/1 var(--sans); margin:0 0 var(--s4); }
.chips { list-style:none; display:flex; flex-wrap:wrap; gap:var(--s2); padding:0; margin:var(--s3) 0 0; }
.chip { background:var(--bg); border:1px solid var(--rule); border-radius:14px; padding:6px 10px; min-height:32px; font:600 13px/1 var(--sans); color:var(--ink); cursor:pointer; }
.duas { display:grid; gap:var(--s2); margin-top:var(--s2); }
@container (min-width:460px) { .duas { grid-template-columns:1fr 1fr; } }
.lado-frase { padding-left:var(--s2); border-left:3px solid var(--hoje); }
.lado-frase.ontem { border-left-color:var(--ontem); }
.lado-frase .rotulo { font-size:11px; margin-bottom:2px; }
.lado-frase .linha-frase { font-size:15px; margin:0; }

.painel-corpo .aviso { margin-top:var(--s7); font:600 13px/1.45 var(--sans); color:var(--muted); border-top:1px solid var(--grid); padding-top:var(--s4); }

/* Notas e método: painel como o de detalhe (#notas, #creditos) */
.notas .painel-corpo { font:400 16px/1.5 var(--sans); }
.notas .lead { font-size:19px; }
.aviso { font:600 15px/1.45 var(--sans); color:var(--ink); }
.caixa > summary { font:600 15px/1.3 var(--sans); color:var(--ink); cursor:pointer; padding:12px 0; min-height:44px; }
.erro { font:600 16px/1.4 var(--sans); color:var(--ink); padding:var(--s5) 20px; }

/* Celular: o mapa rola com a página; painéis viram folhas de baixo */
@media (max-width:759px), (pointer:coarse) and (max-height:500px) {
  .topo { padding:var(--s3) 16px var(--s2); align-items:flex-start; flex-direction:column; gap:var(--s2); }
  .topo h1 { font-size:24px; }
  .palco { height:auto; min-height:0; overflow:visible; }
  .grafo-area { position:static; padding:60px 8px 8px; overflow:visible; }
  .dica { position:static; margin:0 16px var(--s4); text-align:left; }
  .aba-guia { left:12px; } .abas-dir { right:12px; }
  .painel.guia, .painel.detalhe, .painel.legenda { position:fixed; left:0; right:0; bottom:0; top:calc(env(safe-area-inset-top) + 8px); width:auto; max-height:none; z-index:20; border-radius:12px 12px 0 0; }
  .painel-corpo { padding:var(--s4) 16px calc(var(--s7) + env(safe-area-inset-bottom)); }
  .painel-corpo h1 { font-size:28px; }
  .pilar-nome { font-size:22px; } .pilar > summary { grid-template-columns:22px 1fr 32px; gap:var(--s2); } .pilar-corpo { margin-left:0; }
  .livro-cabeca { gap:var(--s4); } .livro-cabeca h1 { font-size:24px; } .capa.grande { width:92px; } .capa.grande.capa-tipo b { font-size:13px; }
  .guia .livros-grade { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); }
  .lg-titulo { overflow-wrap:break-word; hyphens:auto; }
  .abas button { font-size:15px; padding:12px 9px 10px; }
  .cartao blockquote { font-size:19px; }
}
@media (max-width:759px), (pointer:coarse) and (max-height:500px) and (prefers-reduced-motion:no-preference), (pointer:coarse) and (max-height:500px) and (prefers-reduced-motion:no-preference) {
  .painel.guia:not([hidden]), .painel.detalhe:not([hidden]), .painel.legenda:not([hidden]) { animation:sobe .22s ease-out; }
  .painel { transition:transform .28s cubic-bezier(.2, .8, .2, 1); }
  .painel.arrastando { transition:none; }
  @keyframes sobe { from { transform:translateY(40px); opacity:0; } }
}

/* Caso descrito no livro: resumo nosso, nunca citação (sem aspas, sem rosto); o sépia liga o cartão aos livros */
.casos { display:grid; gap:var(--s3); margin:0 0 var(--s3); }
.caso { background:var(--zone); padding:var(--s4); border-top:3px solid var(--ontem); }
.caso-titulo { font:700 19px/1.25 var(--serif); color:var(--ink); margin:0; }
.caso-quem { font:600 13px/1.4 var(--sans); color:var(--muted); margin:var(--s1) 0 var(--s2); }
.caso-texto { font:400 16px/1.5 var(--serif); color:var(--ink); margin:0 0 var(--s2); }
.caso-porque { font:400 14px/1.45 var(--sans); color:var(--ink-2); margin:0 0 var(--s3); }
.caso-porque b { color:var(--ink); }
.caso-pe { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s3); margin:0; padding-top:var(--s2); border-top:1px solid var(--rule); font:500 13px/1.35 var(--sans); color:var(--muted); }
.caso-livro { display:flex; align-items:center; gap:var(--s2); color:var(--ink); text-decoration-color:var(--rule); min-height:44px; }
.caso-nosso { font:italic 400 13px/1.3 var(--sans); }
.capa.micro { width:28px; flex:none; }
.capa.micro.capa-tipo { padding:0; border-top-width:3px; } .capa.micro.capa-tipo b, .capa.micro.capa-tipo i { display:none; }
.pilar-corpo .casos { margin:var(--s2) 0 var(--s3); }

/* Técnicas da pessoa e da vista Comparar: o mesmo acordeão de pilares do livro */
.painel-corpo h2.secao-grande { font:700 26px/1.15 var(--serif); font-variation-settings:"opsz" 48; letter-spacing:-.01em; text-transform:none; margin-bottom:var(--s2); }
.so-leitor { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tec-linhas .pilar-n { color:var(--ink); }
.tec-linhas .pilar-corpo > .rotulo-leve:first-child { margin-top:0; }
.tec-linhas .cit { margin-bottom:var(--s3); }
/* Par dentro da linha: a frase da pessoa e a do outro lado lado a lado (empilhadas no celular) */
.lado-a-lado { margin-bottom:var(--s4); }
@container (min-width:460px) {
  .lado-a-lado { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s2); }

  .lado-a-lado .cartao { padding:var(--s3) var(--s3) var(--s3) var(--s4); }
  .lado-a-lado .cartao blockquote { font-size:18px; }
}
.lado-a-lado.de-ontem .cartao.ontem { order:-1; }
.sem-frase { border-bottom:1px solid var(--grid); }
.sem-frase > summary { color:var(--ink-2); font-weight:500; }
.sem-frase .explica { margin:0 0 var(--s2); }
.sem-lista { list-style:none; margin:0 0 var(--s3); padding:0; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); font:500 15px/1.4 var(--sans); }
.sem-lista a { display:inline-block; padding:var(--s1) 0; color:var(--ink-2); }
@media (max-width:759px), (pointer:coarse) and (max-height:500px) { .painel-corpo h2.secao-grande { font-size:23px; } }

/* v3.6 — Pilar: "Também usaram" com rostos pequenos em cinza, à direita; o nome lidera */
.pilar-quem { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--s1) 6px; margin-top:var(--s2); font:500 12px/1.2 var(--sans); color:var(--muted); }
.lad-rostos { display:inline-flex; }
.lad-rostos .rosto.pp { margin:0 0 0 -3px; filter:grayscale(1); border-color:var(--rule); opacity:.9; }
.lad-rostos .rosto.pp:first-child { margin-left:0; }
.lad-rostos .rosto.mono { background:var(--muted); }
.pilar-pe { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 var(--s4); border-top:1px solid var(--grid); margin-top:var(--s3); }

/* Compartilhar (v3.8): dois botões contornados com ícone (como os de "Download/Share" do OWID e da NYT: pequenos, cinza, sem
   cor de destaque): "Compartilhar" abre o menu (link; imagem feed/stories), "Copiar link" copia. Raio 2 px. Aviso no #toast. */
.comp { position:relative; flex:none; display:inline-flex; gap:8px; }
.comp details { display:flex; }
.comp-btn { list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:0 14px 0 11px;
  border:1px solid var(--rule); border-radius:2px; background:var(--bg); font:600 14px/1 var(--sans); color:var(--ink); cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.comp-btn::-webkit-details-marker { display:none; }
.comp-ico { flex:none; margin-top:-2px; }
@media (hover:hover) { .comp-btn:hover { border-color:var(--ink); background:var(--zone); } }
.comp-btn:active { background:var(--grid); }
.comp details[open] > .comp-btn { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.comp-menu { position:absolute; z-index:6; top:calc(100% + 6px); left:0; min-width:256px; display:grid; padding:4px;
  background:var(--bg); border:1px solid var(--rule); border-radius:2px; box-shadow:var(--sombra); }
.par-topo .comp-menu, .pilar-pe .comp-menu, .dupla .comp-menu { left:auto; right:0; }
.comp-menu button { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 12px; border:0; border-radius:2px; background:none;
  text-align:left; font:600 15px/1.2 var(--sans); color:var(--ink); cursor:pointer; }
.comp-menu button svg { flex:none; color:var(--muted); margin:0; }
.comp-grupo { display:grid; border-top:1px solid var(--grid); margin-top:4px; padding-top:4px; }
.comp-rot { margin:0; padding:8px 12px 2px; font:700 11px/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.comp-grupo button { padding-left:20px; }
.comp-menu small { display:block; font:400 12px/1.3 var(--sans); color:var(--muted); margin-top:2px; }
@media (hover:hover) { .comp-menu button:hover { background:var(--zone); } }
.comp-menu button:active { background:var(--grid); }
@media (prefers-reduced-motion:no-preference) {
  .comp-btn, .comp-menu button { transition:background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
  .comp details[open] .comp-menu { animation:menu .15s ease-out; }
  @keyframes menu { from { opacity:0; transform:translateY(-4px); } }
}
/* Onde fica: no topo à direita do par, no rodapé do pilar, no cabeçalho da técnica e da vista Comparar */
.par-topo { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin:0 0 var(--s3); }
.par-topo .par-tecnica { margin:0; }
.par-topo .comp { margin-left:auto; }
.lado-a-lado .par-topo { grid-column:1 / -1; order:-2; }
.lado-a-lado .par-topo:not(:has(.par-tecnica)) { margin-bottom:var(--s2); }
.painel-corpo > .comp { margin:var(--s3) 0 0; }
.dupla { align-items:center; }
.dupla .comp { margin-left:auto; }
.pilar-pe { padding-top:var(--s2); padding-bottom:var(--s1); }
@media (max-width:759px), (pointer:coarse) and (max-height:500px) {
  .pilar-pe .comp { flex:1 1 100%; margin:var(--s1) 0 var(--s2); }
  .pilar-pe .comp { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pilar-pe .comp-btn { width:100%; justify-content:center; }
  .pilar-pe .comp-menu { left:0; right:0; }
}
/* Aviso curto depois de compartilhar ou baixar (role=status, some sozinho) */
.toast { position:fixed; z-index:40; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); margin:0;
  padding:10px 16px; background:var(--ink); color:var(--bg); border-radius:2px; box-shadow:var(--sombra); font:600 14px/1.3 var(--sans);
  white-space:nowrap; pointer-events:none; }
.toast:empty { opacity:0; padding:0; }
@media (prefers-reduced-motion:no-preference) { .toast { transition:opacity .15s ease-out; } }

/* v3.7 — Estados dos nós do mapa (Rede e Colunas). O JS põe .foco no hover do mouse e no foco do teclado, e .sel no nó
   do painel aberto. Técnica: hover = anel de tinta em volta da pílula + sobe 1 px com sombra; foco do teclado = o mesmo +
   contorno --you no alvo de 44 px; pressionado = desce; selecionada = anel --you. Pessoa: chip --zone, nome sublinhado, anel.
   Ao passar o mouse, vizinhos e linhas acesos e o resto esmaecido (opacidade .5). */
#svg .alvo { stroke:transparent; stroke-width:1; }
#svg .pil, #svg .anel, #svg .disco { transform-box:fill-box; transform-origin:center; }
#svg .anel { fill:none; stroke:var(--ink); stroke-width:0; }
#svg .no-tecnica.foco .anel-p { opacity:1; }
#svg .no-tecnica.foco .pil { transform:translateY(-1px); filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
#svg .no-tecnica.sel .anel-p { opacity:1; stroke:var(--you); stroke-width:2.5; }
#svg .no-tecnica:active .pil { transform:translateY(0); filter:none; }
#svg .no-pessoa:is(.foco, .sel) .alvo { fill:var(--zone); stroke:var(--rule); }
#svg .no-pessoa:is(.foco, .sel) > text:not(.ini) { fill:var(--ink); stroke:var(--zone); }
#svg .no-pessoa:is(.foco, .sel) .nome { text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
#svg .no-pessoa:is(.foco, .sel) .anel { stroke-width:2; }

#svg .no-pessoa.sel .alvo { stroke:var(--ink); stroke-width:1.5; }
#svg .no-pessoa.sel .anel { stroke-width:3; }
#svg .no-pessoa:active .alvo { fill:var(--grid); stroke:var(--ink); }
#svg .no:focus-visible .alvo { stroke:var(--you); stroke-width:2; }
#svg .no:focus-visible { outline:none; }
@media (prefers-reduced-motion:no-preference) {
  #svg .no, #svg .lig { transition:opacity .15s ease-out; }
  #svg .alvo, #svg .pil, #svg .anel-p, #svg .anel, #svg .disco, #svg .no-pessoa text { transition:fill .15s ease-out, stroke .15s ease-out, stroke-width .15s ease-out, opacity .15s ease-out, transform .15s ease-out, filter .15s ease-out; }
}

/* Vista Comparar: no palco, no lugar do mapa */
.comparar-vista { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; z-index:1; background:var(--bg); padding:var(--s6) 32px var(--s8); }
.cmp-escolha > .explica { margin-bottom:var(--s3); max-width:62ch; }
.modo-comparar .grafo-area, .modo-comparar .dica, .modo-comparar .aba-guia, .modo-comparar .abas-dir { display:none; }
.cmp-escolha, .cmp-conteudo { max-width:880px; margin:0 auto; }
.cmp-conteudo { container-type:inline-size; }
.seletores { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin:var(--s2) 0 var(--s5); }
.seletor { background:var(--zone); padding:var(--s3) var(--s4) var(--s4); border-top:4px solid var(--hoje); }
.seletor.ontem { border-top-color:var(--ontem); }
.seletor.ontem .rotulo { color:var(--ontem); }
.fichas { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.ficha { display:flex; align-items:center; gap:var(--s2); min-height:52px; padding:5px 12px 5px 5px; border:1px solid var(--rule); border-radius:28px; background:var(--bg);
  font:600 15px/1.2 var(--sans); color:var(--ink); text-decoration:none; }
@media (hover:hover) { .ficha:hover { border-color:var(--ink); } }
.ficha.ativa { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.ficha.ativa .rosto { border-color:var(--bg); }
.cmp-conteudo .dupla { display:flex; gap:var(--s2); margin:0 0 var(--s3); }
.cmp-conteudo h1 { font:700 34px/1.1 var(--serif); font-variation-settings:"opsz" 72; letter-spacing:-.01em; color:var(--ink); margin:0 0 var(--s3); }
.cmp-conteudo h1:focus { outline:none; }
.cmp-conteudo h2 { font:700 12px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:var(--s6) 0 var(--s3); padding-top:var(--s3); border-top:1px solid var(--rule); }
.cmp-conteudo .aviso { margin-top:var(--s7); font:600 13px/1.45 var(--sans); color:var(--muted); border-top:1px solid var(--grid); padding-top:var(--s4); }

/* Rolagem: no computador a página não rola; só o painel aberto (ou a vista Comparar, ou as Colunas compridas) */
@media (min-width:760px) and (not ((pointer:coarse) and (max-height:500px))) {
  html, body { height:100%; overflow:hidden; }
  body { display:flex; flex-direction:column; }
  main { flex:1; min-height:0; }
  .palco { height:100%; min-height:0; }
}
@media (max-width:759px), (pointer:coarse) and (max-height:500px) {
  .topo-dir { width:100%; justify-content:space-between; }
  .comparar-vista { position:static; padding:var(--s4) 16px var(--s8); }
  .modo-comparar { height:auto; }
  .seletores { grid-template-columns:1fr; }
  .cmp-conteudo h1 { font-size:28px; }
  .fichas { display:grid; grid-template-columns:1fr 1fr; }
  .ficha { font-size:13px; padding-right:8px; }
}

/* ---------- v3.9 — celular (≤759 px ou celular deitado): topo compacto, barra de abas embaixo, folhas, leitura ---------- */
a, button, summary, label, input, #svg .no { touch-action:manipulation; } /* sem espera de toque duplo */
@media (max-width:759px), (pointer:coarse) and (max-height:500px) {
  /* Topo: só o título, em uma ou duas linhas; o resto da tela é do mapa */
  .topo { display:block; padding:calc(env(safe-area-inset-top) + 16px) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); }
  .marca { font-size:0; margin:0; } .marca .selo { font-size:11px; margin:0 0 6px; }
  .topo h1 { font-size:25px; line-height:1.1; text-wrap:balance; }
  .dek { display:none; }
  /* Barra de abas fixa embaixo, ao alcance do polegar: Rede, Colunas, Comparar, Livros, Notas */
  body { padding-bottom:calc(57px + env(safe-area-inset-bottom)); }
  .topo-dir { position:fixed; z-index:15; left:0; right:0; bottom:0; width:auto; display:flex; gap:0; justify-content:stretch; background:var(--bg);
    border-top:1px solid var(--rule); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .vistas { flex:3; border:0; border-radius:0; }
  .vistas button, .topo-livros, .topo-notas { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0;
    min-height:56px; padding:6px 2px 5px; border:0; background:none; font:600 12px/1.1 var(--sans); color:var(--muted); text-decoration:none; white-space:nowrap;
    -webkit-tap-highlight-color:transparent; }
  .vistas button + button { border-left:0; }
  .nav-ico { display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .so-largo { display:none; }
  .vistas button[aria-selected="true"], .topo-livros[aria-current], .topo-notas[aria-current] { background:none; color:var(--ink); box-shadow:inset 0 3px 0 var(--ink); }
  .vistas button:active, .topo-livros:active, .topo-notas:active { background:var(--zone); }
  #abrir-livros { display:none; } /* os livros estão na barra de baixo */
  .aba { min-height:44px; }
  .toast { bottom:calc(57px + 16px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); white-space:normal; text-align:center; }
  body.folha .toast { bottom:calc(24px + env(safe-area-inset-bottom)); }
  /* Folhas: alça no alto (botão de 72×44), sombra para cima */
  .painel.guia, .painel.detalhe, .painel.legenda { box-shadow:0 -2px 24px rgba(0,0,0,.2), 0 0 0 1px var(--grid); }
  .alca { display:block; position:absolute; z-index:2; top:0; left:50%; transform:translateX(-50%); width:72px; height:44px; padding:0; border:0; background:none; cursor:grab; touch-action:none; }
  .alca::before { content:""; display:block; width:40px; height:5px; margin:7px auto 0; border-radius:3px; background:var(--comp); } /* ≥ 3:1 nos dois temas */
  .alca:active::before { background:var(--muted); }
  .painel-barra { min-height:52px; padding-top:8px; touch-action:none; }
  /* Leitura: texto corrido ≥ 16 px; citações grandes; legendas e fontes ficam em 14 */
  .explica, .pilar-resumo, .linha-resumo, .mais-usadas, .legenda-lista, .legenda-exemplo, .livro-frase, .caso-porque, .leituras, .meta,
  .sem-lista, .proximos, .lado-frase .linha-frase, .livro-aqui, .explica-guia { font-size:16px; }
  .cit blockquote { font-size:18px; }
  .painel-corpo .aviso, .cmp-conteudo .aviso { font-size:15px; }
  .cartao figcaption, .cit figcaption, .caso-quem, .pilar-quem { font-size:14px; }
  /* Pilares: o cabeçalho inteiro é o alvo; seta de 40 px; toque escurece na hora */
  .pilar-seta { width:40px; height:40px; margin-top:-6px; }
  .pilar > summary { grid-template-columns:22px 1fr 40px; -webkit-tap-highlight-color:transparent; }
  .pilar > summary:active { background:var(--zone); }
  /* Pares: "anterior" e "próxima" viram botões contornados nas pontas (dá também para deslizar o par) */
  .passos { justify-content:space-between; gap:var(--s2); padding-top:var(--s3); }
  .passos .botao-texto { border:1px solid var(--rule); border-radius:2px; padding:0 16px; text-decoration:none; }
  .passos .botao-texto:not([disabled]):active { background:var(--zone); }
  .passos .botao-texto[disabled] { border-color:var(--grid); }
  .passos.passos-topo { justify-content:flex-start; padding-top:0; }
  /* Fichas dos pares: sempre uma fileira que rola para o lado, de borda a borda */
  .car-fichas { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; margin:0 -16px; padding:2px 16px 4px; scrollbar-width:none; scroll-padding-inline:16px; }
  .car-fichas::-webkit-scrollbar { display:none; }
  .car-ficha { font-size:15px; }
  /* Quem usa: rótulo em cima e uma fileira que rola para o lado (duas linhas no total, não quatro) */
  .quem-fila { display:block; } .quem-fila > .rotulo { display:block; width:auto; margin:0 0 4px; }
  .quem-fila ul { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; margin:0 -16px; padding:0 16px 2px; scrollbar-width:none; }
  .quem-fila ul::-webkit-scrollbar { display:none; }
  .quem-fila li { flex:none; }
  .quem-chip { font-size:15px; }
  /* Comparar: fichas com foto numa fileira que rola para o lado (uma de hoje, uma de ontem) */
  .seletores { grid-template-columns:minmax(0, 1fr); gap:var(--s3); margin:var(--s2) -16px var(--s4); }
  .seletor { padding:var(--s3) 0; }
  .seletor .rotulo { padding:0 16px; }
  .fichas { position:relative; display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    scroll-padding-inline:16px; padding:2px 16px 4px; scrollbar-width:none; }
  .fichas::-webkit-scrollbar { display:none; }
  .fichas li { flex:none; scroll-snap-align:start; }
  .ficha { font-size:15px; padding-right:14px; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .ficha:active { background:var(--zone); }
  .ficha.ativa:active { background:var(--ink-2); }
  .cmp-conteudo .dupla { flex-wrap:wrap; }
  .cmp-conteudo .dupla .rosto.g { width:64px; height:64px; }
  /* Compartilhar: os dois botões na largura toda (pilar, Comparar, técnica); o menu vira uma folha pequena com fundo escuro */
  .dupla .comp, .painel-corpo > .comp { flex:1 1 100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin:var(--s2) 0 0; }
  .dupla .comp-btn, .painel-corpo > .comp .comp-btn { width:100%; justify-content:center; }
  .comp-btn { min-height:48px; font-size:15px; }
  .comp details[open]::before { content:""; position:fixed; z-index:30; inset:0; background:rgba(0,0,0,.45); }
  .comp .comp-menu, .par-topo .comp-menu, .pilar-pe .comp-menu, .dupla .comp-menu { position:fixed; z-index:31; top:auto; left:0; right:0; bottom:0; min-width:0;
    padding:6px 8px calc(10px + env(safe-area-inset-bottom)); border:0; border-radius:12px 12px 0 0; }
  .comp-menu::before { content:""; justify-self:center; width:40px; height:5px; border-radius:3px; background:var(--comp); margin:2px 0 8px; }
  .comp-menu button { min-height:56px; font-size:16px; }
  .comp-menu small { font-size:13px; }
  /* Mapa: retorno do toque na hora (sem transição) */
  #svg .no-tecnica:active .pil { transform:scale(.96); transition-duration:0s; }
  #svg .no-tecnica:active .anel-p { opacity:1; stroke:var(--you); transition-duration:0s; }
  #svg .no-pessoa:active .alvo { transition-duration:0s; }
}
/* Tela muito estreita (zoom de 200% num celular = ~195 px): cabeçalhos empilham, palavras longas quebram, nada rola para o lado */
@media (max-width:340px) {
  .painel-corpo, .comparar-vista { overflow-wrap:anywhere; }
  .cabeca, .livro-cabeca { flex-wrap:wrap; }
  .passos-guia li { grid-template-columns:1fr; gap:var(--s2); }
  .pilar > summary { grid-template-columns:22px minmax(0, 1fr) 40px; }
  .cit { grid-template-columns:32px minmax(0, 1fr); }
  .passos { flex-wrap:wrap; justify-content:center; }
  .topo h1 { font-size:22px; }
  .abas-dir { top:64px; } .grafo-area { padding-top:116px; }
}
@media (max-width:300px) { /* só ícones na barra de baixo; o nome continua para o leitor de tela */
  .painel-barra { padding-top:22px; } .alca { height:24px; } .alca::before { margin-top:8px; } /* zoom de 200%: a alça sobe para não cobrir "Fechar" */
  .topo-dir :is(button, a) > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
/* Par em coluna estreita (painel no celular): o compartilhar do par desce para depois da análise, perto de "próxima" */
@container (max-width:459px) {
  .par { display:flex; flex-direction:column; }
  .par-topo { display:contents; }
  .par .par-tecnica { margin:0 0 var(--s3); }
  .par .comp { order:10; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin:var(--s3) 0 0; }
  .par .comp-btn { width:100%; justify-content:center; }
}
@media (max-width:759px) and (prefers-reduced-motion:no-preference), (pointer:coarse) and (max-height:500px) and (prefers-reduced-motion:no-preference) {
  .comp details[open] .comp-menu { animation:menu-sobe .2s ease-out; }
  @keyframes menu-sobe { from { transform:translateY(100%); } }
}

/* v3.9 — "Na vida real" na técnica (data/impacto.json): duas caixas curtas (como a análise do par), cartões de casos com a
   barra da cor do lado (marrom no passado, tinta hoje), fontes fechadas num <details> de 44 px */
.vida .vida-duas { margin:0 0 var(--s2); }
.vida-casos { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
/* v4.0 — cada caso fechado numa linha (quando · onde, título, um número); abre o texto e as fontes. 1ª frase + "continuar lendo". */
.vida-caso { background:var(--zone); border-left:6px solid var(--hoje); }
.vida-caso.ontem { border-left-color:var(--ontem); }
.vida-caso > summary { list-style:none; display:grid; grid-template-columns:minmax(0, 1fr) 32px; column-gap:var(--s3); align-items:center; min-height:44px;
  padding:var(--s3) var(--s3) var(--s3) var(--s4); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vida-caso > summary::-webkit-details-marker { display:none; }
.vida-caso > summary > :not(.vida-abre) { grid-column:1; display:block; }
.vida-quando { margin:0 0 2px; font:700 12px/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.vida-caso.ontem .vida-quando { color:var(--ontem); }
.vida-tit { font:700 18px/1.25 var(--serif); color:var(--ink); }
.vida-dado { margin-top:var(--s1); font:700 14px/1.3 var(--sans); color:var(--ink-2); font-variant-numeric:lining-nums tabular-nums; }
.vida-abre { grid-column:2; grid-row:1 / span 3; width:32px; height:32px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; }
.vida-abre::before { content:""; width:7px; height:7px; border:solid var(--ink); border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.vida-caso[open] .vida-abre::before { transform:translateY(2px) rotate(-135deg); }
@media (hover:hover) { .vida-caso > summary:hover .vida-tit { text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; } .vida-caso > summary:hover .vida-abre { border-color:var(--ink); } }
.vida-caso > summary:active { background:var(--grid); }
.vida-corpo { padding:0 var(--s4) var(--s1); }
.vida-corpo > p { margin:0; font:400 16px/1.5 var(--serif); color:var(--ink); }
.vida-mais { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; cursor:pointer; font:600 14px/1 var(--sans); color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }
.vida-mais::after { content:" ↓"; white-space:pre; }
.vida-mais[aria-expanded="true"]::after { content:" ↑"; }
.vida-duas p { margin:0; }
.vida-fontes { margin-top:var(--s1); }
.vida-fontes > summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font:600 14px/1 var(--sans); color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; -webkit-tap-highlight-color:transparent; }
.vida-fontes > summary { list-style:none; }
.vida-fontes > summary::-webkit-details-marker { display:none; }
.vida-fontes > summary::after { content:" ↓"; white-space:pre; }
.vida-fontes[open] > summary::after { content:" ↑"; }
.vida-fontes ul { margin:0 0 var(--s3); padding-left:1.1em; font:400 14px/1.45 var(--sans); }
.vida-fontes li { margin-bottom:var(--s1); }
.vida .leituras a, .vida-fontes a { overflow-wrap:anywhere; }