/* Layout: sala de monitoramento — barra de status, números com tendência, fluxo das etapas,
   lista principal e pauta, mapas de contexto. A proposta abre na página dela (/p/pec-221-2019).
   Ideologia é sempre POSIÇÃO numa régua, nunca cor; Sim e Não se distinguem por forma (cheio × vazado). */
:root {
  /* Paleta de 12/10/2026 (home, painel e /p/). Segue o tema do aparelho; a escolha no painel de Acessibilidade vale para o site
     inteiro (data-theme). Âmbar vivo (--amber) SÓ para preencher, com --on-amber em cima; texto âmbar é sempre --amber-text
     (= --signal: serve também a borda e o foco). Níveis dos ladrilhos e selos: --f5…--f0 com texto escuro (--on-amber). */
  --bg: #ffffff; --soft: #f4f6f8; --panel: #ffffff; --panel-2: #f4f6f8; --line: #e1e5ea; --line-2: #c9d0d9; --ctl: #6b7684;
  --ink: #0f141a; --muted: #4f5b6b; --dim: #4f5b6b;
  --signal: #8a5200; --focus: #8a5200;
  --amber: #ffb21e; --on-amber: #0f141a; --amber-text: #8a5200; --tint: #fff4dc; --tint-crit: #fdecea;
  --band: #0f141a; --on-band: #ffffff; --band-muted: #c9d0d9; --band-line: #8b95a1; --urg: #c93a16; --on-urg: #ffffff;
  --sev5: #c62828; --sev4: #b4321a; --sev3: #8a5200;   /* cor de TEXTO e de borda do nível; o preenchimento é --f5…--f1 */
  --f5: #f0625a; --f4: #ff8a5c; --f3: #ffb21e; --f2: #ffd166; --f1: #8fb0ff; --f0: #59db8f;
  --alert: #b3372a; --info: #2563c9; --ok: #1d7650; --sim: #0f141a; --nao: #4f5b6b;
  --display: "Archivo", "Archivo Fallback", Arial, sans-serif;
  /* Atkinson Hyperlegible: feita para leitura fácil por público amplo (Braille Institute). Os "Fallback" (fontes.css)
     são Arial com size-adjust: o Verdana era ~14% mais largo e, com a fonte chegando depois, o topo perdia uma linha (CLS) */
  --body: "Atkinson Hyperlegible", "Atkinson Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b0e12; --soft: #151b23; --panel: #11161c; --panel-2: #151b23; --line: #262f3b; --line-2: #34404e; --ctl: #7d8a9b;
  --ink: #eef2f6; --muted: #9aa7b8; --dim: #9aa7b8; --signal: #ffb21e; --focus: #ffb21e; --amber-text: #ffb21e; --tint: #241a08; --tint-crit: #2a1414;
  --band: #000000; --sev5: #ff6b6b; --sev4: #ff8a5c; --sev3: #ffb21e;
  --alert: #ef6b5b; --info: #6ea8fe; --ok: #4cc38a; --sim: #eef2f6; --nao: #9aa7b8; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0b0e12; --soft: #151b23; --panel: #11161c; --panel-2: #151b23; --line: #262f3b; --line-2: #34404e; --ctl: #7d8a9b;
  --ink: #eef2f6; --muted: #9aa7b8; --dim: #9aa7b8; --signal: #ffb21e; --focus: #ffb21e; --amber-text: #ffb21e; --tint: #241a08; --tint-crit: #2a1414;
  --band: #000000; --sev5: #ff6b6b; --sev4: #ff8a5c; --sev3: #ffb21e;
  --alert: #ef6b5b; --info: #6ea8fe; --ok: #4cc38a; --sim: #eef2f6; --nao: #9aa7b8; color-scheme: dark }
/* fim dos temas: o build copia o app.css até esta linha para o CSS das páginas /p/<chave> */
/* Acessibilidade */
.a11y { position: fixed; z-index: 35; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100% - 80px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / .45); display: grid; gap: 12px }
.a11y[hidden], .tip[hidden] { display: none }
.a11y-h { display: flex; justify-content: space-between; align-items: center }
.a11y-h h2 { font: 700 18px var(--body) }
.a11y .close, .a11y .more { min-height: 44px; margin: 0; border: 1px solid var(--ctl); background: var(--panel-2); border-radius: 4px; padding: 6px 14px; cursor: pointer; font: 600 15px var(--body) }
.a11y .note { margin: 0; font-size: 15px; color: var(--muted) }
.a11y-op { display: grid; gap: 6px }
.a11y-op > span { font-size: 15px; font-weight: 700 }
.seg2 { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; width: fit-content }
.seg2 button { border: 0; background: none; min-height: 44px; padding: 6px 14px; cursor: pointer; font: 400 15px var(--body); color: var(--ink) }
.seg2 button + button { border-left: 1px solid var(--line-2) }
.seg2 button[aria-pressed="true"] { background: var(--amber); color: var(--on-amber); font-weight: 700 }
:root[data-espaco="amplo"] body { letter-spacing: .03em; word-spacing: .1em; line-height: 1.8 }
:root[data-espaco="amplo"] p, :root[data-espaco="amplo"] li { line-height: 1.8 }
:root[data-links="sublinhado"] a { text-decoration: underline !important; text-underline-offset: 3px }
:root[data-movimento="reduzido"] *, :root[data-movimento="reduzido"] *::before { animation: none !important; transition: none !important }
/* Alto contraste: texto secundário quase igual ao principal, bordas fortes, fundo puro (depois da paleta, para vencer: mesmo peso, vale o último) */
:root[data-contraste="alto"] {
  --bg: #000; --soft: #0d0d0d; --panel: #000; --panel-2: #0d0d0d; --line: #6b7380; --line-2: #9aa3ae; --ctl: #c9d0d9;
  --ink: #fff; --muted: #e2e6ea; --dim: #d0d5db; --signal: #ffc04d; --focus: #ffc04d;
  --amber: #ffc04d; --on-amber: #000; --amber-text: #ffc04d; --tint: #000; --tint-crit: #000;
  --band: #000; --band-muted: #fff; --band-line: #fff; --urg: #8f1d10; --sev5: #ff8a7a; --sev4: #ffa07a; --sev3: #ffc04d;
  --info: #9cc3ff; --ok: #6fe0a6; --alert: #ff8a7a }
:root[data-contraste="alto"][data-tema-efetivo="claro"] {
  --bg: #fff; --soft: #f2f2f2; --panel: #fff; --panel-2: #f2f2f2; --line: #6b7380; --line-2: #3d4450; --ctl: #1f252c;
  --ink: #000; --muted: #1f252c; --dim: #2b323a; --signal: #7a4500; --focus: #000;
  --amber: #ffb21e; --on-amber: #000; --amber-text: #6b3b00; --tint: #fff; --tint-crit: #fff;
  --band: #000; --band-muted: #fff; --band-line: #fff; --urg: #8f1d10; --sev5: #8f1d10; --sev4: #7a2200; --sev3: #6b3b00;
  --info: #0b4bb0; --ok: #0d5c39; --alert: #8f1d10 }
:root[data-contraste="alto"] .panel, :root[data-contraste="alto"] .sobre { border-width: 2px }
/* fim da acessibilidade: o build copia de "Acessibilidade" até aqui para o CSS da página inicial */
/* Ponto de atualização: o mesmo na página inicial (o build copia este bloco até a marca de fim, logo abaixo) */
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--muted) }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent) }
@media (prefers-reduced-motion: no-preference) { .live i { animation: pulse 2.4s ease-in-out infinite } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent) } }
/* Atualização atrasada: o ponto para de pulsar e muda de cor (o texto também diz "atrasou") */
.live.atrasado i { background: var(--sev3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev3) 25%, transparent); animation: none }
/* fim do ponto de atualização */
/* Topo em faixa preta, rodapé preto e contêineres: o mesmo na página inicial, no painel e nas /p/ (marca, ← Início, lupa,
   Acessibilidade, menu). O build copia daqui até a marca de fim, logo abaixo, para o CSS das três páginas. */
.ini { zoom: var(--zoom, 1) }
.g { padding-inline: 16px }
.in { max-width: 1120px; margin: 0 auto }
.top { background: var(--band); color: var(--on-band) }
.top .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-block: 10px 2px }  /* com o texto ampliado (A++) os ícones descem para a linha de baixo em vez de estourar a largura */
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; color: var(--on-band); text-decoration: none; font: 800 15px/1 var(--display); font-stretch: 125%; letter-spacing: .02em }
.brand svg { flex: none }
.top .ic { margin-left: auto; display: flex; gap: 8px; align-items: center }
.top .ic button, .top .ic a.ico, .top .ic a.txt { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0; border: 1px solid var(--band-line); border-radius: 8px; background: none; color: var(--on-band); cursor: pointer; text-decoration: none; font: 700 15px/1 var(--body) }
.top .ic a.txt { display: inline-flex; align-items: center; gap: 5px; padding-inline: 12px; white-space: nowrap }
.top .ic button:hover, .top .ic button[aria-expanded="true"], .top .ic a.ico:hover, .top .ic a.txt:hover { border-color: var(--amber); color: var(--amber); background: none }
.top :focus-visible, .foot :focus-visible { outline-color: var(--amber) }
/* Celular estreito: a marca encolhe e o "← Início" vira só a seta (o menu logo abaixo já começa em "Início"; o nome acessível segue completo) */
@media (max-width: 480px) {
  .brand { font-size: 14px }
  .top .ic a.txt { min-width: 44px; padding-inline: 0; justify-content: center }
  .top .ic a.txt .rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}
.menu { display: flex; gap: 0 22px; overflow-x: auto; scrollbar-width: none; font: 700 16px/1 var(--body); white-space: nowrap }
.menu::-webkit-scrollbar { display: none }
.menu.corta { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent) }
.menu a { display: inline-flex; align-items: center; min-height: 44px; flex: none; color: var(--band-muted); text-decoration: none; border-bottom: 3px solid transparent; padding-top: 3px }
.menu a:hover { color: var(--on-band) }
.menu a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--amber) }
.menu a:focus-visible { outline-offset: -4px }
.data-l { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-block: 12px 0; font: 500 13px/1.3 var(--mono); color: var(--muted) }
.data-l .live { font: inherit; color: inherit }
.data-l .live.atrasado { color: var(--ink); font-weight: 600 }
.foot { background: var(--band); color: var(--band-muted); font-size: 15px }
.foot a { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px }
/* fim do topo */
/* Página inicial (/), formato de portal de notícias (aprovado em 12/10/2026). O build publica assets/inicio.<hash>.css =
   temas e paleta do app.css (até "fim dos temas": a MESMA paleta do painel e das /p/ desde 12/10/2026) + os blocos de
   Acessibilidade, ponto de atualização e topo/rodapé em faixa preta do app.css + este arquivo + compartilhar.css.
   Regras: corpo em Atkinson ≥ 15 px, rótulo em caixa alta ≥ 13 px, piso de 12 px, alvos de 44 px, nada pisca, estado
   nunca só por cor. Âmbar vivo (--amber) SÓ para preencher, com --on-amber em cima; texto âmbar é sempre --amber-text. */

/* ---------- base ---------- */
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body) }
img { max-width: 100% }
[hidden] { display: none !important }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance }
p { margin: 0; text-wrap: pretty }
a { color: inherit; text-underline-offset: 3px }
button, input { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.urg :focus-visible { outline-color: var(--on-urg) }
main:focus { outline: none }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.pular { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--amber); color: var(--on-amber); padding: 10px 14px; border-radius: 4px; font-weight: 700; text-decoration: none }
.pular:focus { top: 8px }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.mono { font-family: var(--mono) }
.live i { animation: none !important }  /* nada pulsa na home (o ponto fica parado) */
/* ---------- faixa de urgência (só quando a manchete é pauta de plenário em até 7 dias; não pisca) ---------- */
.urg { background: var(--urg); color: var(--on-urg) }
.urg .in { display: flex; gap: 10px; align-items: center; padding-block: 4px }
.urg .tag { flex: none; font: 600 13px/1 var(--mono); letter-spacing: .06em; background: var(--on-urg); color: var(--urg); padding: 4px 6px; border-radius: 3px }
.urg a { display: block; padding-block: 8px; font: 700 15px/1.3 var(--body); text-decoration: underline }

/* ---------- busca em camada (a lupa do topo) ---------- */
.busca-camada { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: 12px auto auto; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--ink); overflow: auto }
.busca-camada::backdrop { background: rgb(0 0 0 / .6) }
.busca { display: grid; gap: 8px }
.busca-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.busca label { font: 700 19px/1.3 var(--body) }
.busca-topo button { min-height: 44px; padding: 6px 14px; border: 1px solid var(--ctl); background: var(--soft); border-radius: 6px; cursor: pointer; font: 700 15px var(--body) }
.busca input { width: 100%; min-height: 56px; padding: 0 16px; background: var(--bg); border: 2px solid var(--ctl); border-radius: 8px; font-size: 19px }
.busca input::placeholder { color: var(--muted); opacity: 1 }
.busca input:focus-visible { border-color: var(--focus); outline-offset: 1px }
.busca .dica { font-size: 15px; color: var(--muted) }
.busca-res { background: var(--soft); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px }
.busca-res ul { list-style: none; margin: 0; padding: 0 }
.busca-res li + li { border-top: 1px solid var(--line) }
.busca-res li a { display: grid; gap: 2px; padding: 10px; min-height: 44px; border-radius: 4px; text-decoration: none; color: var(--ink) }
.busca-res li a:hover, .busca-res li a:focus-visible { background: var(--bg) }
.busca-res li a b { font: 700 17px/1.3 var(--body) }
.busca-res li a:hover b, .busca-res li a:focus-visible b { text-decoration: underline }
.busca-res .bn { font: 500 13px/1.4 var(--mono); color: var(--muted) }
.busca-res .be { font-size: 15px; line-height: 1.4; color: var(--muted) }
.busca-res > p { margin: 8px 10px; font-size: 16px }
.busca-res .more { margin: 0 10px 10px; min-height: 44px; border: 1px solid var(--ctl); background: var(--bg); border-radius: 4px; padding: 6px 14px; cursor: pointer }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 10px 10px }
.links a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--ctl); background: var(--bg); padding: 6px 12px; border-radius: 4px; text-decoration: none; font: 500 14px var(--mono) }

/* ---------- aviso de falha na coleta ---------- */
.falha { margin-top: 8px; padding: 8px 12px; border-left: 4px solid var(--sev3); background: var(--soft); font-size: 15px }

/* ---------- blocos ---------- */
.sec { display: grid; gap: 12px; align-content: start; min-width: 0; padding-block: 20px; border-bottom: 8px solid var(--soft); scroll-margin-top: 8px }
.sec > * { min-width: 0 }
.kick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 600 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-text) }
.chip { background: var(--amber); color: var(--on-amber); padding: 3px 7px; border-radius: 3px }
.h { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.h h2 { display: flex; align-items: center; gap: 8px; font: 800 18px/1.2 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: .01em }
.h h2::before { content: ""; width: 4px; height: 19px; flex: none; background: var(--amber); border-radius: 2px }
.lk { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 700 15px/1.2 var(--body); color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px }
.nota { font-size: 15px; color: var(--muted) }
.s { display: block; font-size: 15px; line-height: 1.35; color: var(--muted) }
.t { display: block; font: 700 16px/1.25 var(--display) }
.t .num { margin-left: 4px; font: 500 13px var(--mono); color: var(--muted) }
a:hover .t, a:hover > strong { text-decoration: underline }

/* Manchete */
.lead h1 { font-size: clamp(28px, 6.4vw, 44px); font-weight: 800; font-stretch: 96%; line-height: 1.12; letter-spacing: -.01em }
.fina { font-size: 18px; color: var(--muted); max-width: 62ch }
.meta { font: 500 13px/1.4 var(--mono); color: var(--muted) }
.trilho { list-style: none; margin: 0; padding: 12px 10px 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: var(--tint); border-radius: 8px }
.trilho li { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 13px; line-height: 1.2; color: var(--muted); hyphens: auto; overflow-wrap: anywhere }   /* "Promulgação" a 390 px: quebra com hífen, não no meio da sílaba */
.trilho i { display: block; height: 7px; width: 100%; border-radius: 4px; background: var(--line-2) }
.trilho .ok i { background: var(--muted) }
.trilho .now { color: var(--ink); font-weight: 700 }
.trilho .now i { height: 11px; background: var(--amber); box-shadow: 0 0 0 2px var(--ink) }   /* a etapa atual é mais alta e contornada, não só amarela */
.dias { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap }
.dias li { flex: 1 1 150px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px }
.dias b { font: 600 15px/1.2 var(--mono) }
.dias li > span:last-child { font-size: 15px; line-height: 1.3; color: var(--muted) }
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 16px; border-radius: 8px; background: var(--amber); color: var(--on-amber); font: 700 17px/1.2 var(--body); text-decoration: none; text-align: center }
.btn:hover { text-decoration: underline }
.porque { font-size: 15px; color: var(--muted) }

/* Compartilhar: 4 botões de 60 px (compartilhar.js liga; Copiar link e "Instagram e outros" nascem escondidos) */
.cp-home { display: grid; gap: 8px }
.share { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px }
.cp-b { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; border: 1px solid var(--ctl); border-radius: 8px; background: var(--bg); color: var(--ink); font: 700 14px/1.2 var(--body); text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere }
.cp-b:hover { border-color: var(--ink) }
.cp-b svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.cp-b.feito { border-color: var(--ok); color: var(--ok) }

/* Perdem a validade: carrossel; o número de dias é o dado, a cor só reforça (≤ 7 vermelho, ≤ 15 laranja, senão âmbar escuro) */
.mps { list-style: none; margin: 0 -16px; padding: 2px 16px 8px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity }
.mps li { flex: 0 0 min(250px, 72%); scroll-snap-align: start }
.mp { display: grid; gap: 6px; align-content: start; height: 100%; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; text-decoration: none }
.mp .big { display: flex; align-items: baseline; font: 600 38px/1 var(--mono) }
.mp .big small { margin-left: 4px; font: 700 15px var(--body); color: var(--muted) }
.big.vermelho { color: var(--sev5) }
.big.laranja { color: var(--sev4) }
.big.ambar { color: var(--amber-text) }
.mp strong { font: 700 16px/1.2 var(--display) }
.mp-n { font: 500 13px/1.3 var(--mono); color: var(--muted) }
.mpq summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font: 600 14px/1.3 var(--mono); color: var(--amber-text); text-decoration: underline; text-underline-offset: 3px }
.mpq summary::-webkit-details-marker { display: none }
.mpq summary::after { content: "+" / ""; font-weight: 700 }
.mpq[open] summary::after { content: "−" / "" }
.mpq p { margin-top: 2px; font-size: 15px; color: var(--muted); max-width: 62ch }

/* Mais perto do voto (numerado) e Últimas */
.top5 { list-style: none; margin: 0; padding: 0; counter-reset: t }
.top5 li { counter-increment: t; border-bottom: 1px solid var(--line) }
.top5 li:last-child { border-bottom: 0 }
.top5 a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 44px; padding-block: 10px; text-decoration: none }
.top5 a::before { content: counter(t) / ""; font: 800 34px/1 var(--display); color: var(--amber-text) }
/* Aprovadas na semana: nome, número, Casa + data + placar (texto) e a etiqueta do próximo passo (borda e texto, sem cor de partido) */
.apr { list-style: none; margin: 0; padding: 0 }
.apr li { border-bottom: 1px solid var(--line) }
.apr li:last-child { border-bottom: 0 }
.apr a { display: block; min-height: 44px; padding-block: 10px; text-decoration: none }
.apr .s b { font: 600 14px var(--mono); color: var(--ink) }
.etq { display: inline-block; margin-top: 6px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 13px/1.4 var(--body); color: var(--ink) }
.placar { font-size: 16px } .placar b { font: 600 18px var(--mono) }
.ult { list-style: none; margin: 0; padding: 0 }
.ult li { border-bottom: 1px solid var(--line) }
.ult li:last-child { border-bottom: 0 }
.ult a { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; min-height: 44px; padding-block: 10px; text-decoration: none }
.ult time { font: 600 13px/1.5 var(--mono); color: var(--amber-text) }
.corpo { display: block; min-width: 0 }

/* Editorias */
.eds { display: grid }
.ed .first { display: grid; gap: 4px; text-decoration: none }
.ed .first .t { font-size: 20px; font-weight: 800; line-height: 1.15 }
.ed .more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line) }
.ed .more a { display: block; min-height: 44px; text-decoration: none }
.ed .more .t { font-size: 15px }

/* Ritmo do Congresso: termômetro com o número */
.ritmo { background: var(--soft); padding-block: 18px }
.ritmo .in { display: grid; gap: 8px }
.ritmo-n { display: flex; align-items: baseline; gap: 8px; font-size: 16px }
.ritmo-n .n { font: 600 36px/1 var(--mono) }
.termo { position: relative; height: 9px; border-radius: 5px; background: var(--line-2) }
.termo i { display: block; height: 100%; border-radius: 5px; background: var(--amber) }
.termo u { position: absolute; top: -5px; width: 3px; height: 19px; border-radius: 2px; background: var(--ink); text-decoration: none }
.termo-l { font-size: 15px; color: var(--muted) }

/* Sobre esta página e rodapé preto */
.sobre { display: grid; gap: 8px; max-width: 70ch; padding-block: 24px; font-size: 15px; color: var(--muted) }
.sobre h2 { color: var(--ink); font: 800 18px/1.2 var(--display); font-stretch: 110%; text-transform: uppercase }
.foot .in { display: grid; gap: 4px; padding-block: 14px }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 20px }
.foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700 }
.foot p a { display: inline-block; padding-block: 10px; min-height: 0 }

:root[data-contraste="alto"] .mp, :root[data-contraste="alto"] .dias li, :root[data-contraste="alto"] .cp-b { border-width: 2px }

@media (min-width: 900px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 36px; align-items: start }
  .col-l, .col-r { display: grid; min-width: 0 }
  .eds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px }
  .mps { margin-inline: 0; padding-inline: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible }
  .mps li { flex: none }
}
@media (max-width: 480px) {
  .brand { font-size: 14px }
  .menu { gap: 0 18px }
}
/* Botão de compartilhar (ficha do painel e página /p/<chave>). Vem do designer (design/compartilhar.css). O build junta
   este arquivo ao app.css (assets/app.<hash>.css) e ao pagina.css (assets/pagina.<hash>.css). --amber e --on-amber ficam nos temas do app.css. */
.compartilhar { display: grid; gap: 10px }
.compartilhar .ph { margin-bottom: 0 }
.cp-acoes { display: flex; flex-wrap: wrap; gap: 8px }
.cp-redes { display: contents }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--muted); border-radius: 6px; background: var(--panel-2); color: var(--ink);
  font: 700 15px/1.2 var(--body); text-decoration: none; cursor: pointer }
.cp-btn[hidden] { display: none }
.cp-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.cp-btn:hover { border-color: var(--ink) }
.cp-btn.primario { background: var(--amber); border-color: var(--amber); color: var(--on-amber) }
.cp-btn.feito { border-color: var(--ok); color: var(--ok) }      /* o texto também muda para "Link copiado" e o ícone vira um visto */
.cp-end { display: grid; gap: 4px }
.cp-end input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: 13px/1.2 var(--mono) }
.cp-ok { margin: 0; font-weight: 700; color: var(--ok) }
.cp-ok:empty { height: 0 }   /* vazio ocupa 0, mas continua na tela: região anunciável (display:none não anunciaria) */
/* celular com folha nativa (12/10/2026): WhatsApp, Copiar link e "Facebook, Instagram e outros" (a folha); o resto, inclusive o
   link direto do Facebook (o app abre e ignora o endereço), fica dentro da folha */
.compartilhar.com-nativo .cp-redes { display: none }
@media (max-width: 640px) {
  .cp-acoes .cp-btn { flex: 1 1 calc(50% - 4px) }
  .compartilhar.com-nativo [data-cp="nativo"] { flex-basis: 100% }
}
/* Canal do WhatsApp (passo 16): bloco discreto na home e nas /p/. Texto em --ink (nunca opacity), link sublinhado; ícone em currentColor, sem a cor da marca */
.canal { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 0; color: var(--ink); font-size: 15px }
.canal svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round }
.canal a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px }