/* 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). */
/* Tokens da reforma (18/10/2026, Pervinca discreta + logo A Sinal): copiados de design/reforma/final/tokens.css (gerado por
   design/reforma/_gerador/gerar_final_tokens.py; contraste medido na seção 11 do design/reforma/final/ESPEC.md). Âmbar, laranja e
   vermelho (--f*, --sev*, --aten-tint) são ESTADO do painel, não marca. Os nomes antigos (--amber, --signal…) são aliases. */
:root {
  color-scheme: light;
  --bg: #fbfcff;
  --soft: #f1f3f8;
  --soft-2: #e4e8ef;
  --panel: #fbfcff;
  --line: #dfe3ea;
  --line-2: #b9bec8;
  --ctl: #626978;
  --ink: #13161d;
  --muted: #424853;
  --acento: #6d86ff;
  --acento-hover: #7b96ff;
  --acento-press: #6a82fb;
  --on-acento: #091123;
  --acento-texto: #4a4ed2;
  --tint: #e9eefe;
  --focus: #4a4ed2;
  --focus-faixa: #869efc;
  --agora: #6d86ff;
  --band: #161a29;
  --on-band: #ffffff;
  --band-muted: #cdd1db;
  --band-line: #8b92a5;
  --band-acento: #869efc;
  --ok: #1d6b44;
  --alert: #a8321f;
  --sim: #13161d;
  --nao: #424853;
  --logo-tile: #161a29;
  --logo-acento: #869efc;
  --logo-texto: #ffffff;
  --sombra: 0 1px 2px rgb(30 12 16 / .08), 0 4px 16px rgb(30 12 16 / .08);
  --veu: rgb(20 6 10 / .62);
  --sev5: #c62828;
  --sev4: #b4321a;
  --sev3: #8a5200;
  --f5: #f0625a;
  --f4: #ff8a5c;
  --f3: #ffb21e;
  --f2: #ffd166;
  --f1: #8fb0ff;
  --f0: #59db8f;
  --tint-crit: #fdecea;
  --aten-tint: #fff4dc;
  --cartao-escuro: #161a29;
  --cartao-claro: #fbfcff;
  --cartao-soft: #f1f3f8;
  --cartao-acento: #869efc;
  --cartao-ink: #13161d;
  --cartao-muted: #424853;
  --cartao-cinza: #cdd1db;
  --cartao-acento-texto: #4a4ed2;
  --cartao-tint: #e9eefe;
  --cartao-linha: #626978;
  --cartao-numero: #fbfcff;
  --cartao-sobre-acento: #0b0e1c;
  --cartao-agora: #869efc;
  /* ---- NOMES ANTIGOS do site/app.css, apontando para o token novo. Existem só para a troca não quebrar tudo de uma vez;
     apague cada linha quando o último uso sumir (ver ESPEC.md, "Tokens: nome antigo -> novo"). ---- */
  --amber: var(--acento);
  --amber-hover: var(--acento-hover);
  --amber-press: var(--acento-press);
  --on-amber: var(--on-acento);
  --amber-text: var(--acento-texto);
  --signal: var(--acento-texto);
  --info: var(--acento-texto);
  --dim: var(--muted);
  --panel-2: var(--soft);
  /* ---- tipografia: Atkinson no corrido (>= 16 px nas telas novas, nunca < 15), Archivo em título e marca, Plex Mono SÓ em número ---- */
  --display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Atkinson Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --fs-corpo: 16px; --fs-lide: 18px; --fs-meta: 14px; --fs-mini: 13px;   /* piso absoluto do site: 12 px */
  /* ---- espaço, forma, toque, movimento ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --alvo: 44px;          /* alvo de toque mínimo */
  --dur: 120ms;         /* feedback de toque; zerado por prefers-reduced-motion e por data-movimento="reduzido" */
  --r-btn: 6px; --r-card: 4px;
}

/* explícito: força o claro mesmo com o aparelho no escuro (o :root acima já é claro; este bloco só garante a vitória sobre o @media) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfcff;
  --soft: #f1f3f8;
  --soft-2: #e4e8ef;
  --panel: #fbfcff;
  --line: #dfe3ea;
  --line-2: #b9bec8;
  --ctl: #626978;
  --ink: #13161d;
  --muted: #424853;
  --acento: #6d86ff;
  --acento-hover: #7b96ff;
  --acento-press: #6a82fb;
  --on-acento: #091123;
  --acento-texto: #4a4ed2;
  --tint: #e9eefe;
  --focus: #4a4ed2;
  --focus-faixa: #869efc;
  --agora: #6d86ff;
  --band: #161a29;
  --on-band: #ffffff;
  --band-muted: #cdd1db;
  --band-line: #8b92a5;
  --band-acento: #869efc;
  --ok: #1d6b44;
  --alert: #a8321f;
  --sim: #13161d;
  --nao: #424853;
  --logo-tile: #161a29;
  --logo-acento: #869efc;
  --logo-texto: #ffffff;
  --sombra: 0 1px 2px rgb(30 12 16 / .08), 0 4px 16px rgb(30 12 16 / .08);
  --veu: rgb(20 6 10 / .62);
  --sev5: #c62828;
  --sev4: #b4321a;
  --sev3: #8a5200;
  --f5: #f0625a;
  --f4: #ff8a5c;
  --f3: #ffb21e;
  --f2: #ffd166;
  --f1: #8fb0ff;
  --f0: #59db8f;
  --tint-crit: #fdecea;
  --aten-tint: #fff4dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #0d0f15;
  --soft: #171b22;
  --soft-2: #222630;
  --panel: #12151b;
  --line: #242932;
  --line-2: #39404d;
  --ctl: #838c9f;
  --ink: #eceef4;
  --muted: #abb1be;
  --acento: #869efc;
  --acento-hover: #95adff;
  --acento-press: #758be7;
  --on-acento: #0b0e1c;
  --acento-texto: #869efc;
  --tint: #1b2035;
  --focus: #869efc;
  --focus-faixa: #869efc;
  --agora: #869efc;
  --band: #05070f;
  --on-band: #ffffff;
  --band-muted: #cdd1db;
  --band-line: #8b92a5;
  --band-acento: #869efc;
  --ok: #4cc38a;
  --alert: #ef7a68;
  --sim: #eceef4;
  --nao: #abb1be;
  --logo-tile: #05070f;
  --logo-acento: #869efc;
  --logo-texto: #ffffff;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .4);
  --veu: rgb(10 2 4 / .7);
  --sev5: #ff6b6b;
  --sev4: #ff8a5c;
  --sev3: #ffb21e;
  --f5: #f0625a;
  --f4: #ff8a5c;
  --f3: #ffb21e;
  --f2: #ffd166;
  --f1: #8fb0ff;
  --f0: #59db8f;
  --tint-crit: #2a1414;
  --aten-tint: #241a08;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f15;
  --soft: #171b22;
  --soft-2: #222630;
  --panel: #12151b;
  --line: #242932;
  --line-2: #39404d;
  --ctl: #838c9f;
  --ink: #eceef4;
  --muted: #abb1be;
  --acento: #869efc;
  --acento-hover: #95adff;
  --acento-press: #758be7;
  --on-acento: #0b0e1c;
  --acento-texto: #869efc;
  --tint: #1b2035;
  --focus: #869efc;
  --focus-faixa: #869efc;
  --agora: #869efc;
  --band: #05070f;
  --on-band: #ffffff;
  --band-muted: #cdd1db;
  --band-line: #8b92a5;
  --band-acento: #869efc;
  --ok: #4cc38a;
  --alert: #ef7a68;
  --sim: #eceef4;
  --nao: #abb1be;
  --logo-tile: #05070f;
  --logo-acento: #869efc;
  --logo-texto: #ffffff;
  --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .4);
  --veu: rgb(10 2 4 / .7);
  --sev5: #ff6b6b;
  --sev4: #ff8a5c;
  --sev3: #ffb21e;
  --f5: #f0625a;
  --f4: #ff8a5c;
  --f3: #ffb21e;
  --f2: #ffd166;
  --f1: #8fb0ff;
  --f0: #59db8f;
  --tint-crit: #2a1414;
  --aten-tint: #241a08;
}

/* ---- ALTO CONTRASTE: o do aparelho (prefers-contrast: more) e o do painel de Acessibilidade (data-contraste="alto", como hoje). Texto >= 7:1. ---- */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"] {
    --bg: #ffffff;
    --soft: #f2f2f2;
    --soft-2: #e6e6e6;
    --panel: #ffffff;
    --line: #6b7380;
    --line-2: #3d4450;
    --ctl: #1f252c;
    --ink: #000000;
    --muted: #1f252c;
    --acento: #8ea1ff;
    --acento-hover: #a2b2ff;
    --acento-press: #8296f5;
    --on-acento: #000000;
    --acento-texto: #1f2370;
    --tint: #ffffff;
    --focus: #000000;
    --focus-faixa: #b4c2ff;
    --band: #000000;
    --on-band: #ffffff;
    --band-muted: #ffffff;
    --band-line: #ffffff;
    --band-acento: #b4c2ff;
    --ok: #0d5c39;
    --alert: #8f1d10;
    --sim: #000000;
    --nao: #000000;
    --sev5: #8f1d10;
    --sev4: #7a2200;
    --sev3: #6b3b00;
    --tint-crit: #ffffff;
    --aten-tint: #ffffff;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --soft: #0d0d0d;
    --soft-2: #1a1a1a;
    --panel: #000000;
    --line: #6b7380;
    --line-2: #9aa3ae;
    --ctl: #c9d0d9;
    --ink: #ffffff;
    --muted: #e2e6ea;
    --acento: #b4c2ff;
    --acento-hover: #c6d1ff;
    --acento-press: #a0b0f5;
    --on-acento: #000000;
    --acento-texto: #b4c2ff;
    --tint: #000000;
    --focus: #b4c2ff;
    --focus-faixa: #b4c2ff;
    --band: #000000;
    --on-band: #ffffff;
    --band-muted: #ffffff;
    --band-line: #ffffff;
    --band-acento: #b4c2ff;
    --ok: #6fe0a6;
    --alert: #ff8a7a;
    --sim: #ffffff;
    --nao: #ffffff;
    --sev5: #ff8a7a;
    --sev4: #ffa07a;
    --sev3: #ffc04d;
    --tint-crit: #000000;
    --aten-tint: #000000;
  }
}
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --bg: #000000;
    --soft: #0d0d0d;
    --soft-2: #1a1a1a;
    --panel: #000000;
    --line: #6b7380;
    --line-2: #9aa3ae;
    --ctl: #c9d0d9;
    --ink: #ffffff;
    --muted: #e2e6ea;
    --acento: #b4c2ff;
    --acento-hover: #c6d1ff;
    --acento-press: #a0b0f5;
    --on-acento: #000000;
    --acento-texto: #b4c2ff;
    --tint: #000000;
    --focus: #b4c2ff;
    --focus-faixa: #b4c2ff;
    --band: #000000;
    --on-band: #ffffff;
    --band-muted: #ffffff;
    --band-line: #ffffff;
    --band-acento: #b4c2ff;
    --ok: #6fe0a6;
    --alert: #ff8a7a;
    --sim: #ffffff;
    --nao: #ffffff;
    --sev5: #ff8a7a;
    --sev4: #ffa07a;
    --sev3: #ffc04d;
    --tint-crit: #000000;
    --aten-tint: #000000;
  }
}
:root[data-contraste="alto"] {
  --bg: #000000;
  --soft: #0d0d0d;
  --soft-2: #1a1a1a;
  --panel: #000000;
  --line: #6b7380;
  --line-2: #9aa3ae;
  --ctl: #c9d0d9;
  --ink: #ffffff;
  --muted: #e2e6ea;
  --acento: #b4c2ff;
  --acento-hover: #c6d1ff;
  --acento-press: #a0b0f5;
  --on-acento: #000000;
  --acento-texto: #b4c2ff;
  --tint: #000000;
  --focus: #b4c2ff;
  --focus-faixa: #b4c2ff;
  --band: #000000;
  --on-band: #ffffff;
  --band-muted: #ffffff;
  --band-line: #ffffff;
  --band-acento: #b4c2ff;
  --ok: #6fe0a6;
  --alert: #ff8a7a;
  --sim: #ffffff;
  --nao: #ffffff;
  --sev5: #ff8a7a;
  --sev4: #ffa07a;
  --sev3: #ffc04d;
  --tint-crit: #000000;
  --aten-tint: #000000;
}
:root[data-contraste="alto"][data-tema-efetivo="claro"] {
  --bg: #ffffff;
  --soft: #f2f2f2;
  --soft-2: #e6e6e6;
  --panel: #ffffff;
  --line: #6b7380;
  --line-2: #3d4450;
  --ctl: #1f252c;
  --ink: #000000;
  --muted: #1f252c;
  --acento: #8ea1ff;
  --acento-hover: #a2b2ff;
  --acento-press: #8296f5;
  --on-acento: #000000;
  --acento-texto: #1f2370;
  --tint: #ffffff;
  --focus: #000000;
  --focus-faixa: #b4c2ff;
  --band: #000000;
  --on-band: #ffffff;
  --band-muted: #ffffff;
  --band-line: #ffffff;
  --band-acento: #b4c2ff;
  --ok: #0d5c39;
  --alert: #8f1d10;
  --sim: #000000;
  --nao: #000000;
  --sev5: #8f1d10;
  --sev4: #7a2200;
  --sev3: #6b3b00;
  --tint-crit: #ffffff;
  --aten-tint: #ffffff;
}

/* 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 (o do painel de Acessibilidade e o do aparelho, prefers-contrast: more): os valores moram nos tokens, no topo
   do arquivo (bloco dos temas), para valerem também na home e nas /p/. Aqui só o que não é cor. */
: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 }
/* logo A Sinal (svg inline, nome em contorno): a altura manda, a largura segue o viewBox 541 x 72,6 */
.brand .lg { display: block; height: 28px; width: auto }
.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(--band-acento); color: var(--band-acento); background: none }
.top :focus-visible, .foot :focus-visible { outline-color: var(--focus-faixa) }
/* 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 }
  .brand .lg { height: 24px }
  .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(--band-acento); border-bottom-color: var(--band-acento) }
.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 */
/* Componentes da reforma (18/10/2026, design/reforma/final/componentes.css + telas.css), comuns à página inicial (/), a "Esta semana"
   (/semana) e às /p/. O build junta este arquivo aos dois pacotes (assets/inicio.<hash>.css e assets/pagina.<hash>.css), depois dos
   tokens do app.css e antes do CSS de cada página. O painel (/painel) NÃO o carrega.
   Regras: cor só por token; Atkinson no corrido (>= 16 px nas telas novas), Plex Mono só em número (.n), piso de 12 px, alvo >= 44 px,
   sem opacity em texto, nada pisca (só o feedback de toque de 120 ms, desligado por prefers-reduced-motion e "Movimento: reduzido"). */

/* ---------- base dos componentes ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.ico { display: block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums }
.cx { max-width: 1120px; margin: 0 auto; padding-inline: 16px }   /* contêiner das telas novas (o .g/.in do app.css segue no painel e nas páginas institucionais) */
@media (prefers-reduced-motion: reduce) { .btn, .chip, .cp-linha, .abas a, .abas button, .canal, .btn-busca, .btn-acess { transition: none !important } }

/* ---------- topo: faixa escura com o logo A Sinal; no computador, "Hoje / Esta semana / Mais" e Acessibilidade ---------- */
.topo { background: var(--band); color: var(--on-band) }
.topo .cx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 64px; padding-block: 4px }   /* texto ampliado (A++): o Buscar desce de linha em vez de estourar a largura */
.topo .marca { display: inline-flex; align-items: center; min-height: var(--alvo); margin-right: auto; color: var(--on-band); text-decoration: none }
.topo .lg { display: block; height: 28px; width: auto }
.topo :focus-visible { outline-color: var(--focus-faixa) }
.btn-busca { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 14px; border: 2px solid var(--band-line); border-radius: 999px; background: none;
  color: var(--on-band); font: 700 15px/1 var(--body); cursor: pointer; transition: border-color var(--dur), color var(--dur), transform var(--dur) }
.btn-busca:hover { border-color: var(--band-acento); color: var(--band-acento) }
.btn-busca:active { transform: scale(.97) }
.btn-busca .rot-lg { display: none }
.voltar { display: inline-flex; align-items: center; gap: 2px; min-height: var(--alvo); min-width: var(--alvo); margin-left: -10px; color: var(--on-band); text-decoration: none; font: 700 15px/1 var(--body) }
.voltar .rot { display: none }
.voltar:hover { color: var(--band-acento) }
.nav-topo, .btn-acess { display: none }
/* RA-02: na ficha o Buscar vira só ícone, mas o nome continua (aria-label) */
.topo-ficha .btn-busca { padding: 0; min-width: var(--alvo); justify-content: center }
.topo-ficha .btn-busca .rot { display: none }
@media (max-width: 399px) { .topo .lg { height: 24px } }
@media (min-width: 900px) {
  .topo .cx { gap: 24px; min-height: 72px }
  .topo .marca { margin-right: 0 }
  .topo .lg { height: 32px }
  .btn-acess { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 12px; border: 2px solid var(--band-line); border-radius: 8px; background: none;
    white-space: nowrap; color: var(--on-band); font: 700 15px/1 var(--body); cursor: pointer; transition: border-color var(--dur), color var(--dur), transform var(--dur) }
  .btn-acess:hover, .btn-acess[aria-expanded="true"] { border-color: var(--band-acento); color: var(--band-acento) }
  .btn-acess:active { transform: scale(.97) }
  .nav-topo { display: flex; align-items: center; gap: 4px; margin-right: auto }
  .nav-topo a, .nav-topo button { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 12px; border: 0; border-bottom: 3px solid transparent;
    background: none; color: var(--band-muted); text-decoration: none; font: 700 16px/1 var(--body); cursor: pointer }
  .nav-topo a:hover, .nav-topo button:hover { color: var(--on-band) }
  .nav-topo [aria-current="page"] { color: var(--band-acento); border-bottom-color: var(--band-acento) }
  .btn-busca .rot { display: none } .btn-busca .rot-lg { display: inline }
  .btn-busca { min-width: 300px; white-space: nowrap; border-radius: 8px; justify-content: flex-start }
  .topo-ficha .btn-busca { min-width: 0; padding: 0 14px } .topo-ficha .btn-busca .rot { display: inline } .topo-ficha .btn-busca .rot-lg { display: none }
  .voltar .rot { display: inline } .voltar { margin-left: -4px; margin-right: 8px }
}
/* 320 px (e 400% de zoom): o Buscar vira ícone, com o nome no .sr */
@media (max-width: 359px) {
  .btn-busca { padding: 0; min-width: var(--alvo); justify-content: center }
  .btn-busca .rot, .btn-busca .rot-lg { display: block !important; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .topo .lg { height: 22px }
}

/* ---------- botão ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alvo); padding: 8px 16px;
  border: 2px solid var(--ctl); border-radius: var(--r-btn); background: var(--bg); color: var(--ink);
  font: 700 16px/1.2 var(--body); text-decoration: none; text-align: center; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), transform var(--dur) }
.btn:hover { background: var(--soft-2); border-color: var(--ink) }
.btn:active { transform: scale(.98); background: var(--soft-2) }
.btn.pri { background: var(--acento); border-color: var(--acento); color: var(--on-acento) }
.btn.pri:hover { background: var(--acento-hover); border-color: var(--acento-hover) }
.btn.pri:active { background: var(--acento-press); border-color: var(--acento-press) }
.btn.so-icone { width: var(--alvo); padding: 0 }
.btn.ghost { border-color: transparent; background: none; color: var(--muted) }
.btn.ghost:hover { background: var(--soft-2); border-color: transparent; color: var(--ink) }
.btn.feito { border-color: var(--ok); color: var(--ok); background: var(--bg) }

/* ---------- chip (assunto, atalho) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); padding: 0 16px; border: 2px solid var(--ctl); border-radius: 999px;
  background: var(--bg); color: var(--ink); font: 700 15px/1 var(--body); text-decoration: none; white-space: nowrap; flex: none;
  transition: background var(--dur), border-color var(--dur), transform var(--dur) }
.chip:hover { border-color: var(--ink); background: var(--soft) }
.chip:active { transform: scale(.97); background: var(--soft-2) }
.chip[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.chip .n { font-size: 14px; font-weight: 500; color: var(--muted) }
.chip[aria-current] .n { color: var(--bg) }
.chip .ico { width: 18px; height: 18px }
/* RB-2: position relative, senão o .sr de dentro do chip vazava para a largura do documento e dava rolagem lateral a 360 px */
.chips { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px }
.chips::-webkit-scrollbar { display: none }

/* ---------- blocos e listas ---------- */
.bloco { margin-top: 28px; scroll-margin-top: 16px }
.bloco-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 4px solid var(--ink) }
.bloco-cab h2 { font: 800 22px/1.2 var(--display) }
.ver { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--alvo); margin-block: -10px; font: 700 15px/1 var(--body); color: var(--acento-texto); text-underline-offset: 3px }
.sub { margin: 2px 0 6px; font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 70ch }
.lista { display: grid }
.item { display: grid; grid-template-columns: minmax(0, 1fr) var(--alvo); align-items: center; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--line) }
.item.sem-acao { grid-template-columns: minmax(0, 1fr) }
.item-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-height: var(--alvo); color: var(--ink); text-decoration: none }   /* RA-07: 44 px também nas linhas só de texto */
.item-txt-only .item-link { grid-template-columns: 1fr; align-content: center }
.item-link:hover .item-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px }
.item-link:active { background: var(--soft) }
.item-txt { display: grid; gap: 2px; min-width: 0 }
.kicker-s { font: 700 14px/1.2 var(--body); color: var(--acento-texto) }
.item-t { font: 700 17px/1.25 var(--body) }
.item-m { font-size: 14px; line-height: 1.4; color: var(--muted) }
.item-m .n { color: var(--ink) }
/* ladrilho: o número que importa em 76 px. RA-11: cresce com o texto (espaçamento 1.4.12), não corta */
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; height: 76px; padding-inline: 6px; border-radius: 4px; text-align: center; line-height: 1 }
.tile b { font: 600 22px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap }
.tile i { font: 700 14px/1 var(--body); font-style: normal; margin-inline: 3px }
.tile .mini { font: 700 14px/1 var(--body); margin-bottom: 4px }
.tile .mini:last-child { margin: 4px 0 0 }
.t-placar { flex-direction: row; background: var(--tint); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink) }
.t-prazo { background: var(--acento); color: var(--on-acento); box-shadow: inset 0 0 0 2px var(--ink) }
.t-etapa { background: var(--soft); box-shadow: inset 0 0 0 2px var(--ctl); color: var(--ink) }
.nota { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--muted) }

/* detalhes (O que é MP?): setinha, alvo de 44 px */
.oque { margin-top: 4px }
.oque > summary { display: flex; align-items: center; gap: 8px; min-height: var(--alvo); cursor: pointer; list-style: none; font: 700 15px/1.2 var(--body); color: var(--acento-texto) }
.oque > summary::-webkit-details-marker { display: none }
.oque > summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); flex: none }
.oque[open] > summary::after { transform: rotate(-135deg) translateY(-2px) }
.oque p { padding: 0 0 8px; font-size: 15px; max-width: 62ch }

/* ---------- folha (popover nativo: Esc fecha, toque fora fecha; o comum.js deixa o resto da página inerte e devolve o foco) ---------- */
/* Sem suporte a popover (Safari < 17, Firefox < 125) a regra com :popover-open é descartada e a folha fica escondida: o comum.js leva ao destino do data-sem-popover */
.folha { display: none }
.folha:popover-open { display: block; position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 520px; max-height: 92dvh; overflow: auto;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; background: var(--bg); color: var(--ink);
  box-shadow: 0 -8px 40px rgb(0 0 0 / .35) }
.folha::backdrop { background: var(--veu) }
.folha::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--ctl) }
.folha-cab { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 4px; background: var(--bg) }   /* RA-15: Fechar sempre à vista */
.folha-cab h2 { font: 800 20px/1.2 var(--display) }
.folha-item { margin: 2px 0 12px; font-size: 15px; color: var(--muted) }
.folha-item b { color: var(--ink) }
.folha-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.cp-linha { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 6px 14px 6px 10px;
  border: 2px solid var(--ctl); border-radius: 12px; background: var(--bg); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), transform var(--dur) }
.cp-linha:hover { border-color: var(--ink); background: var(--soft) }
.cp-linha:active { transform: scale(.98); background: var(--soft-2) }
.cp-linha b { display: block; font: 700 17px/1.2 var(--body) }
.cp-linha small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--muted) }
.cp-linha .ico { width: 24px; height: 24px; margin-inline: auto }
.cp-linha .seta { width: 20px; height: 20px; color: var(--muted) }
.cp-linha.pri { background: var(--acento); border-color: var(--acento); color: var(--on-acento) }
.cp-linha.pri small, .cp-linha.pri .seta { color: var(--on-acento) }
.cp-linha.pri:hover { background: var(--acento-hover); border-color: var(--acento-hover) }
.cp-linha.pri:active { background: var(--acento-press); border-color: var(--acento-press) }
.cp-linha.feito { border-color: var(--ok) } .cp-linha.feito b { color: var(--ok) }
.cp-linha.carregando { cursor: progress; border-style: dashed; background: var(--soft) }
.cp-linha.desativado { cursor: not-allowed; border-style: dashed; background: var(--soft); transform: none }   /* <p>, sem aria-disabled (não tem efeito em parágrafo) */
.cp-linha:has(.mini-story) { min-height: 72px }
img.mini-story { display: block; width: 36px; height: 64px; margin: -6px auto; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px var(--ctl) }
.cp-aviso { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; margin: 10px 0 0; font-weight: 700; color: var(--ok) }
.cp-aviso.erro { color: var(--alert) }
.cp-aviso .ico { width: 22px; height: 22px; margin-top: 1px }
.cp-aviso:empty { min-height: 0; margin: 0 }   /* vazio ocupa 0, mas continua na árvore: região anunciável */
.folha-nota { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted) }
.msg { margin: 6px 0 0; padding: 10px 12px; border-left: 4px solid var(--ctl); background: var(--soft); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.4 }
.msg p { margin: 0 } .msg p + p { margin-top: 4px }
.msg-url { color: var(--acento-texto); overflow-wrap: anywhere }
.folha .cp-end { display: grid; gap: 4px; margin-top: 12px; font-size: 14px; color: var(--muted) }
.folha .cp-end input { width: 100%; min-height: var(--alvo); padding: 8px 10px; border: 2px solid var(--ctl); border-radius: 8px; background: var(--bg); color: var(--ink); font: 400 15px/1.2 var(--body) }
.mais-lista { display: grid; margin-top: 4px }
.mais-lista a, .mais-lista button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--ink); text-align: left; text-decoration: none; font: 700 17px/1.2 var(--body); cursor: pointer }
.mais-lista small { display: block; font: 400 14px/1.3 var(--body); color: var(--muted) }
.mais-lista a:hover b, .mais-lista button:hover b { text-decoration: underline }
.mais-lista a:active, .mais-lista button:active { background: var(--soft-2) }
:root[data-contraste="alto"] .btn, :root[data-contraste="alto"] .chip, :root[data-contraste="alto"] .cp-linha, :root[data-contraste="alto"] .canal { border-width: 3px }

/* ---------- barra de 4 abas (celular, até 899 px): Hoje, Esta semana, Buscar, Mais ---------- */
.abas { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line-2) }
.abas a, .abas button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 60px; padding: 6px 2px; border: 0; background: none;
  color: var(--muted); text-decoration: none; font: 700 14px/1.15 var(--body); cursor: pointer; transition: background var(--dur), transform var(--dur) }
.abas a:active, .abas button:active { background: var(--soft-2); transform: scale(.97) }
.abas a:focus-visible, .abas button:focus-visible { outline-offset: -4px }   /* RA-09: o anel ficava cortado na borda da tela */
.abas .ico { width: 24px; height: 24px }
.abas [aria-current="page"] { color: var(--ink) }
.abas [aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--acento-texto) }
.abas .selo-n { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 600 13px/20px var(--mono); text-align: center }
@media (min-width: 900px) { .abas, .pular-abas { display: none } }
/* M3 (QA): no celular a barra é o fim do DOM (70+ Tabs); este link, visível só no foco, leva direto a ela sem mudar a ordem visual */
.pular-abas { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--acento); color: var(--on-acento); padding: 10px 14px; border-radius: 6px; font-weight: 700; text-decoration: none }
.pular-abas:focus { top: 8px }
.abas:focus { outline: none }
/* RA-01: o foco não pode ficar sob a barra; a página ganha o espaço dela embaixo */
@media (max-width: 899px) {
  body.com-abas { padding-bottom: calc(68px + env(safe-area-inset-bottom)) }
  html:has(body.com-abas) { scroll-padding-bottom: calc(76px + 16px + env(safe-area-inset-bottom)) }
}
@media (max-height: 520px) { .abas { position: static } body.com-abas { padding-bottom: 0 } }   /* 400% de zoom: a barra deixa de ser fixa */

/* ---------- rodapé (faixa escura) ---------- */
.rodape { margin-top: 32px; padding: 24px 0 16px; background: var(--band); color: var(--band-muted); font-size: 15px }
.rodape a { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px }
.rodape :focus-visible { outline-color: var(--focus-faixa) }
.rodape .indep { margin: 0 0 12px; color: var(--on-band); font-size: 16px }
.rodape ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none }
.rodape li a, .rodape li button { display: inline-flex; align-items: center; min-height: var(--alvo) }
.rodape li button { padding: 0; border: 0; background: none; color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer }
.rodape .peq { margin: 8px 0 0; font-size: 14px }
.rodape .peq a { display: inline-flex; align-items: center; min-height: var(--alvo) }   /* M1 (QA): 44 px também nos links do texto */

/* ---------- contraste forçado (Windows): marcas de dado que dependem de fundo ou sombra (RA-06) ---------- */
@media (forced-colors: active) {
  .tile { forced-color-adjust: none; background: CanvasText; color: Canvas }
  .tile.t-etapa { background: Canvas; color: CanvasText; border: 2px solid CanvasText }
  .btn.pri, .cp-linha.pri { border: 3px solid CanvasText }
}
/* Página inicial (/) "Hoje" e "Esta semana" (/semana), reforma de 18/10/2026 (design/reforma/final/home.html e esta-semana.html).
   O build publica assets/inicio.<hash>.css = tokens do app.css (até a marca do fim dos temas) + os blocos de Acessibilidade, ponto de
   atualização e topo/rodapé do app.css + componentes.css + este arquivo + compartilhar.css.
   Regras: corpo em Atkinson >= 16 px, Plex Mono só em número, piso de 12 px, alvos de 44 px, nada pisca, estado nunca só por cor,
   menos caixa alta e menos mono que antes. --acento SÓ preenche (com --on-acento em cima); texto na cor da marca é --acento-texto. */

/* ---------- base ---------- */
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px }
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, ul, ol { margin: 0 }
ul, ol { padding: 0; list-style: none }
a { color: var(--acento-texto); text-underline-offset: 3px }
button, input { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
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: -64px; z-index: 100; background: var(--acento); color: var(--on-acento); padding: 10px 14px; border-radius: 6px; font-weight: 700; text-decoration: none }
.pular:focus { top: 8px }
:root { padding-top: env(safe-area-inset-top, 0px) }
.live i { animation: none !important }  /* nada pulsa na home (o ponto fica parado) */
.live { font: inherit; color: inherit; gap: 6px }

/* ---------- busca em camada (o Buscar do topo e da barra de abas abre o <dialog>) ---------- */
.busca-camada { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: 12px auto auto; padding: 16px; border: 0; border-radius: 16px; background: var(--bg); color: var(--ink); overflow: auto; box-shadow: var(--sombra) }
.busca-camada::backdrop { background: var(--veu) }
.busca { display: grid; gap: 8px }
.busca-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.busca label { font: 800 20px/1.3 var(--display) }
.busca input { width: 100%; min-height: 52px; padding: 0 14px; background: var(--bg); border: 2px solid var(--ctl); border-radius: 10px; font-size: 18px }
.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 14px/1.4 var(--body); 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: 2px solid var(--ctl); background: var(--bg); border-radius: 6px; 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: 2px solid var(--ctl); background: var(--bg); padding: 6px 12px; border-radius: 6px; text-decoration: none; font: 700 15px var(--body); color: var(--ink) }

/* ---------- assuntos e linha da data ---------- */
.assuntos { border-bottom: 1px solid var(--line-2); background: var(--bg) }
.assuntos .chips { padding-block: 8px }
.dataln { display: grid; gap: 2px; padding-block: 12px; font-size: 14px; line-height: 1.35; color: var(--muted) }
.dataln .indep-l { color: var(--ink) }
.dataln .live.atrasado { color: var(--ink); font-weight: 700 }
.falha { margin-top: 8px; padding: 8px 12px; border-left: 4px solid var(--sev3); background: var(--soft); font-size: 15px }

/* ---------- manchete: o cartão gerado (JPG do build, decorativo) + título + apoio + compartilhar ---------- */
.manchete-img { display: block; margin-inline: -16px; background: var(--cartao-escuro) }
.manchete-img img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630 }
.manchete-txt { padding-top: 14px }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; font: 700 15px/1.2 var(--body); color: var(--acento-texto) }
.kicker::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--acento-texto) }
.kicker .n { font-weight: 500; font-size: 14px }
.manchete h1 { font: 800 27px/1.12 var(--display); letter-spacing: -.01em }
.manchete h1 a { color: var(--ink); text-decoration: none }
.manchete h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px }
.apoio { display: grid; gap: 8px; margin: 14px 0 0 }
.apoio li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.4 }
.apoio li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--acento-texto) }
.apoio .n { font-weight: 600 }
.acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-top: 16px }   /* 2 colunas; com o texto ampliado, uma */
.mais-l { margin-top: 4px }
.mais-l a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); font-weight: 700; color: var(--acento-texto) }
.mais-l .ico { width: 18px; height: 18px }
.porque { margin-top: 4px; font-size: 15px; color: var(--muted); max-width: 62ch }

/* ---------- ritmo, canal, Últimas, editorias, Sobre ---------- */
.ritmo { margin-top: 28px; padding: 14px 16px; border-left: 6px solid var(--ink); background: var(--soft); font-size: 15px; line-height: 1.45 }
.ritmo h2 { font: 700 16px/1.3 var(--body) }
.ritmo p + p { margin-top: 4px }
.termo { position: relative; height: 9px; margin: 10px 0 4px; border-radius: 5px; background: var(--line-2) }
.termo i { display: block; height: 100%; border-radius: 5px; background: var(--ink) }
.termo u { position: absolute; top: -5px; width: 3px; height: 19px; border-radius: 2px; background: var(--ink); text-decoration: none }
.termo-l { font-size: 14px; color: var(--muted) }
.canal-bloco { margin-top: 20px }
.ult time { display: block; font: 600 14px/1.5 var(--mono); color: var(--acento-texto) }
.ult .item-link { grid-template-columns: 52px minmax(0, 1fr) }
.ult-mais { margin-top: 8px }
.ed .vazio-ed { padding-block: 12px; font-size: 15px; color: var(--muted) }
.sobre { display: grid; gap: 8px; max-width: 70ch; margin-top: 28px; font-size: 15px; color: var(--muted) }
.sobre h2 { color: var(--ink); font: 800 20px/1.2 var(--display) }

/* ---------- Esta semana (/semana): coluna de leitura única ---------- */
.semana { max-width: 780px }
.h1-pagina { padding-top: 16px; font: 800 32px/1.08 var(--display); letter-spacing: -.015em }
.sub-semana { margin: 4px 0 0; font-size: 16px; color: var(--muted) }
.semana .dataln { padding-block: 6px 4px }
.vazio { display: grid; gap: 4px; margin-top: 10px; padding: 16px; border: 2px dashed var(--ctl); border-radius: 4px; background: var(--soft); color: var(--ink) }
.vazio b { font: 700 17px/1.3 var(--body) }

/* ---------- computador: duas colunas ---------- */
@media (min-width: 900px) {
  .assuntos .chips { margin-inline: 0; padding-inline: 0 }
  .grade { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: 40px; align-items: start;
    grid-template-areas: "data data" "falha falha" "manchete tambem" "prazos voto" "ultimas eds" "ritmo canal" "sobre sobre" }
  .grade > .dataln { grid-area: data; grid-auto-flow: column; justify-content: space-between; padding-block: 16px }
  .grade > .falha { grid-area: falha }
  .manchete { grid-area: manchete }
  .manchete-img { margin-inline: 0; border-radius: 4px; overflow: hidden }
  .manchete h1 { font-size: 42px; line-height: 1.07 }
  .apoio li { font-size: 19px }
  .acoes { grid-template-columns: auto auto; justify-content: start }
  .coluna-tambem { grid-area: tambem; margin-top: -28px }
  #prazos { grid-area: prazos } #voto { grid-area: voto } #ultimas { grid-area: ultimas } .eds { grid-area: eds }
  .ritmo { grid-area: ritmo; align-self: stretch } .canal-bloco { grid-area: canal; align-self: end }
  .sobre { grid-area: sobre }
}
/* Compartilhar e Canal do WhatsApp (home, "Esta semana" e /p/). A folha "Compartilhar" (.folha, .cp-linha…) mora em componentes.css;
   aqui fica o que é só deste assunto. O build junta este arquivo ao CSS da página inicial e ao das /p/. Cor só por token. */
/* Canal do WhatsApp (passo 16; reforma de 18/10/2026): bloco-link "Receba no WhatsApp". Texto em --ink (nunca opacity), contorno de
   controle --ctl (>= 3:1), ícone em currentColor, sem a cor da marca do WhatsApp */
.canal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--ctl); border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font: 400 16px/1.3 var(--body); transition: background var(--dur), border-color var(--dur), transform var(--dur) }
.canal b { text-decoration: underline; text-underline-offset: 3px }
.canal:hover { border-color: var(--ink); background: var(--soft) }
.canal:active { transform: scale(.99); background: var(--soft-2) }
.canal .ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round }