/* Contexta · estilo editorial: sem caixas, três fontes com papéis, cor com significado.
   Cores, fontes e medidas vêm de tokens.css. */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text); font: var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--smart-blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 2px solid var(--smart-blue); outline-offset: 3px; border-radius: 2px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--page-pad); }
.muted { color: var(--text-muted); }
.small { font: var(--ui-sm); }

/* Dados (datas, "há X", fontes, rótulos) sempre na monoespaçada. */
.label, .kicker, .tl-tag, .tl-date, .tl-meta, .result-count, .news-time, .person-count, .summary-note, .tl-gap, .case-link span {
  font-variant-numeric: tabular-nums;
}
.label, .kicker, .tl-tag, .tl-gap {
  margin: 0; font: var(--data-label); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.label { color: var(--text-muted); margin-bottom: var(--s4); }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--white) 80%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medium) var(--ease), box-shadow var(--medium) var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--deep-navy) 40%, transparent); }
/* Em todas as páginas: seções à esquerda, nome no centro (a 3ª coluna, vazia, equilibra o centro). */
.topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5); min-height: 64px; }
.topbar .topnav { grid-column: 1; grid-row: 1; }
.topnav { display: flex; align-items: center; gap: var(--s5); }
.topnav a, .nav-soon { color: var(--text-muted); font: 500 14px/1 var(--sans); text-decoration: none; padding: var(--s2) 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.topnav a:hover { color: var(--deep-navy); }
.topnav a[aria-current="page"] { color: var(--deep-navy); border-bottom-color: var(--smart-blue); }
.nav-soon { opacity: 0.55; cursor: default; }
.logo { display: inline-flex; align-items: center; gap: var(--s2); color: var(--deep-navy); font: 600 17px/1 var(--sans); letter-spacing: -0.02em; text-decoration: none; }
.topbar .logo { grid-column: 2; grid-row: 1; justify-self: center; white-space: nowrap; color: var(--smart-blue); }  /* mesmo azul do quadrado do logo (5,1:1 no branco) */
.logo-mark { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--smart-blue), var(--accent)); }
.tagline { color: var(--text-muted); font: var(--data); letter-spacing: 0; }
/* Celular: nome centralizado numa linha e seções na de baixo. */
@media (max-width: 767px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: var(--s2); padding-bottom: var(--s1); }
  .topbar .logo { grid-column: 1; grid-row: 1; padding: var(--s1) 0 var(--s2); }
  .topbar .topnav { grid-row: 2; gap: var(--s4); width: 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar.hide-logo .logo { display: none; }
}

/* ---------- Faixa do caso: compacta, presa no topo; encolhe ao rolar (o foco é o feed) ----------
   Cores definidas pelo tema em tokens.css. */
.hero {
  position: sticky; top: var(--bar-h, 64px); z-index: 15; padding: var(--s5) 0;
  background: var(--hero-bg); border-bottom: 1px solid var(--hero-border); transition: padding var(--medium) var(--ease);
}
.hero-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); }
.hero-text { min-width: 0; }
.hero h1 { margin: 0; font: 600 44px/1.05 var(--sans); letter-spacing: -0.035em; color: var(--hero-title); text-wrap: balance; transition: font-size var(--medium) var(--ease); }
.kicker { margin: 0 0 var(--s2); color: var(--hero-kicker); }
.hero .meta { margin: var(--s2) 0 0; font: var(--data); font-size: 13px; color: var(--hero-meta); white-space: pre-wrap; }
.hero.compact { padding: var(--s3) 0; }
.hero.compact .hero-inner { align-items: center; }
.hero.compact .hero-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.hero.compact .kicker { display: none; }
.hero.compact h1 { font-size: 24px; }
.hero.compact .meta { margin: 0; }

/* Botões "Contexto" e "Conexões" e os menus que eles abrem. */
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.drop { position: relative; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 38px; padding: 0 var(--s4);
  border: 1px solid color-mix(in srgb, var(--hero-title) 30%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--hero-title) 6%, transparent); color: var(--hero-title);
  font: 500 14px/1 var(--sans); cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pill:hover, .pill[aria-expanded="true"] { background: color-mix(in srgb, var(--hero-title) 14%, transparent); border-color: var(--hero-title); }
.menu {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 40; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px);
  overflow-y: auto; overscroll-behavior: contain; padding: var(--s4) var(--s5); background: var(--white); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 56px -24px color-mix(in srgb, var(--deep-navy) 50%, transparent);
  animation: fade-up var(--fast) var(--ease);
}
.menu .label { margin-bottom: var(--s2); }
.menu .search { position: sticky; top: calc(-1 * var(--s4)); z-index: 1; margin-bottom: var(--s2); background: var(--white); }
.menu-empty { padding: var(--s3) 0; }

/* ---------- Grade de 12 colunas, separada por espaço (sem caixas) ---------- */
.page { padding-top: var(--s6); padding-bottom: var(--s10); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8) var(--gutter); }
.col-left, .col-center { min-width: 0; }
.card { background: none; border: 0; padding: 0; }
.card + .card { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.section-title { margin: 0 0 var(--s4); font: var(--h3); letter-spacing: -0.015em; color: var(--deep-navy); }

/* ---------- Cabeçalho da linha do tempo e filtros recolhidos ---------- */
.tl-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s6); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.tl-head .section-title { margin: 0; white-space: nowrap; }
.tl-head .result-count { white-space: nowrap; }
.result-count { font: var(--data); color: var(--text-muted); }
.icon-btn {
  position: relative; display: grid; place-items: center; align-self: center; width: 32px; height: 32px; margin-left: auto;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--bg-light); color: var(--deep-navy); }
.icon-btn.active::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--smart-blue); }
.filters-panel { margin: calc(-1 * var(--s4)) 0 var(--s6); animation: fade-up var(--medium) var(--ease); }
.search, .filters select {
  width: 100%; min-height: 40px; padding: var(--s2) 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: none; font: var(--ui-sm); transition: border-color var(--fast) var(--ease);
}
.search:focus, .filters select:focus { outline: none; border-bottom-color: var(--smart-blue); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s2); }

/* ---------- Linha do tempo: data · notícia · "há X · fonte" ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--tl-line); }
.tl-item { position: relative; padding: 0 0 var(--s5) var(--s6); }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-strong);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tl-item.has-date { margin-top: var(--s2); }
.tl-item.key::before { background: var(--key); border-color: var(--key); }
.tl-item.open::before { background: var(--smart-blue); border-color: var(--smart-blue); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--smart-blue); }
.tl-item:hover::before { border-color: var(--smart-blue); }
/* Cada dia tem a própria bolinha (cheia, em azul-marinho); a da notícia desce para o título. */
.tl-date { position: relative; display: block; margin-bottom: var(--s2); font: 600 13px/18px var(--mono); letter-spacing: 0.01em; color: var(--deep-navy); }
.tl-date::before { content: ""; position: absolute; left: calc(-1 * var(--s6) - 1px); top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--deep-navy); box-shadow: 0 0 0 3px var(--page); }
.tl-item.has-date::before { top: calc(18px + var(--s2) + 6px); }
.tl-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.tl-tag { display: inline-block; margin-bottom: var(--s2); padding: 2px var(--s2); border-radius: 3px; background: var(--key-soft); color: var(--text); }
.tl-title { display: block; font: var(--ui); color: var(--text); transition: color var(--fast) var(--ease); }
.tl-btn:hover .tl-title { color: var(--smart-blue); }
.tl-meta { display: block; margin-top: var(--s1); font: var(--data); color: var(--text-muted); }
.tl-item.key .tl-title { font-weight: 600; }
.tl-item.open .tl-title { font-weight: 600; color: var(--deep-navy); }
/* Dica: o cartão sob o mouse acende a notícia na linha do tempo. */
.tl-item.hint::before { border-color: var(--smart-blue); background: color-mix(in srgb, var(--smart-blue) 25%, var(--white)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--smart-blue) 15%, transparent); }
.tl-item.hint .tl-title { color: var(--smart-blue); }
.tl-item.hint .tl-btn { animation: hint-in var(--medium) var(--ease); }
@keyframes hint-in { from { transform: translateX(-4px); opacity: .6; } to { transform: none; opacity: 1; } }
.tl-gap { position: relative; padding: var(--s2) 0 var(--s6) var(--s6); color: var(--text-muted); }
.tl-empty { padding: var(--s4) 0; color: var(--text-muted); font: var(--ui-sm); }

/* ---------- Resumo: 1º cartão do feed, em serifada, com a cor do tema na lateral ---------- */
.summary-card .label { color: var(--accent-ink); }
#summary-text { margin: 0; font: 400 19px/1.6 var(--serif); color: var(--text); letter-spacing: -0.005em; }
.summary-toggle { display: none; margin-top: var(--s3); padding: 0; border: 0; background: none; color: var(--smart-blue); font: 500 13px/1.4 var(--mono); cursor: pointer; }
.summary-note { margin: var(--s4) 0 0; font: var(--data); color: var(--text-muted); }

/* ---------- Notícia: fonte · título · autor · tempo ---------- */
.news { scroll-margin-top: 96px; }
.news-source { display: flex; align-items: center; gap: var(--s3); margin: 0; font: var(--data-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--deep-navy); }
.news-source .tl-tag { margin: 0; }
.news-title { margin: var(--s3) 0 var(--s2); font: var(--h2); letter-spacing: -0.025em; color: var(--deep-navy); }
.news-author { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--text); }
.news-time { margin: var(--s1) 0 0; font: var(--data); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.news-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: var(--s5); border-radius: var(--radius); background: var(--avatar); }
.news-summary { margin: var(--s5) 0; font: var(--read); color: var(--text); }

/* "Ler no site original": sempre link azul com o ícone de "abre em outro site" no fim (nunca botão). */
.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; }
.source-link {
  display: inline-block;
  font: 500 13px/1.4 var(--mono); color: var(--smart-blue); text-decoration: none;
}
/* O ícone fica colado à última palavra, mesmo quando o texto quebra de linha. */
.source-link .ext-icon { margin-left: 5px; vertical-align: -2px; }
.source-link .nowrap { white-space: nowrap; }
.source-link span:not(.nowrap) { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color var(--fast) var(--ease); }
.source-link:hover span:not(.nowrap) { text-decoration-color: currentColor; }
/* Aviso de assinatura: cadeado fechado = só assinantes; aberto = limite de notícias grátis. */
.paywall {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-light); color: var(--text-muted); cursor: help;
}
.paywall-assinantes { color: var(--deep-navy); }
.lock-icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-cover .paywall { background: color-mix(in srgb, var(--white) 16%, transparent); color: var(--white); }
.ext-icon { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Voltar ao caso: no topo da notícia aberta. */
.back-link {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s2) var(--s4) var(--s2) var(--s3);
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--deep-navy);
  font: 500 14px/1.2 var(--sans); cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.back-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { border-color: var(--smart-blue); color: var(--smart-blue); }

/* ---------- Feed único (meio + direita) ----------
   Grade de 3 colunas; cada coisa ocupa um cartão: resumo, notícias, perguntas do contexto e casos
   relacionados. Cartões grandes ocupam 2 colunas; numa mesma linha, todos ficam da mesma altura. */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  scroll-margin-top: calc(var(--head-h, 150px) + var(--s4));
  transition: border-color var(--fast) var(--ease), box-shadow var(--medium) var(--ease);
}
.tile:hover { border-color: var(--line-strong); box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--deep-navy) 45%, transparent); }
.tile.news { cursor: pointer; }
.tile-open { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
.tile.news:hover .tile-open { color: var(--smart-blue); }
.span2 { grid-column: span 2; }
.tile-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.tile .news-img { flex: none; aspect-ratio: 16 / 10; margin: 0 0 var(--s4); border-radius: var(--radius-sm); }
.tile:not(.span2) .news-img { flex: 1 0 170px; aspect-ratio: auto; min-height: 170px; max-height: 340px; }
.tile .news-title { margin: var(--s2) 0 0; font: 600 19px/1.3 var(--sans); letter-spacing: -0.015em; text-wrap: balance; }
.tile .news-summary { margin: var(--s3) 0 0; font: 400 15px/1.55 var(--serif); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tile:not(.span2):not(.no-img) .news-summary { display: none; }
.tile .news-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin: auto 0 0; padding-top: var(--s4); }
.tile .news-author { min-width: 0; font: var(--data); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.tile .news-time { margin: 0; }
.span2 .news-title { font: 600 30px/1.15 var(--sans); letter-spacing: -0.025em; }
.span2 .news-summary { font-size: 17px; -webkit-line-clamp: 5; }
.span2 .source-line { margin-top: var(--s4); }

/* Notícia grande com imagem: a imagem ocupa o cartão e o texto fica por cima, embaixo. */
.tile-cover { justify-content: flex-end; min-height: 460px; border: 0; background: var(--deep-navy); }
.tile-cover .news-img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }
.tile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--bg-dark) 55%, transparent) 50%, color-mix(in srgb, var(--bg-dark) 94%, transparent) 100%); }
.tile-cover .tile-body { position: relative; z-index: 1; flex: none; max-width: 62ch; }
.tile-cover .news-source, .tile-cover .news-title { color: var(--white); }
.tile-cover .news-summary { color: color-mix(in srgb, var(--white) 88%, transparent); }
.tile-cover .news-author, .tile-cover .news-time { color: color-mix(in srgb, var(--white) 78%, transparent); }
.tile-cover .news-byline { justify-content: flex-start; }
.tile-cover.news:hover .tile-open { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tile-cover .source-link { color: var(--white); }

/* Resumo: 1º cartão. */
.tile-summary { padding-left: calc(var(--s5) * 2); }
.tile-summary::before { content: ""; position: absolute; left: var(--s5); top: var(--s5); bottom: var(--s5); width: 3px; border-radius: 2px; background: var(--accent-bar); }

/* Biografia (página de pessoa/instituição): cartão de largura inteira, antes do resto do feed.
   Selo de fonte oficial em azul com ✓; outras fontes em cinza. Nada de texto gerado por IA. */
.tile-bio { grid-column: 1 / -1; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.tile-bio.no-photo { grid-template-columns: minmax(0, 1fr); }
.tile-bio:hover { border-color: var(--line); box-shadow: none; }
.tile-bio .label { margin-bottom: var(--s2); color: var(--accent-ink); }
.bio-photo { margin: 0; }
.bio-photo img { display: block; width: 148px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--radius-sm); background: var(--avatar); }
.bio-logo img { aspect-ratio: auto; max-height: 148px; object-fit: contain; object-position: left top; background: none; }
.bio-photo figcaption { margin-top: var(--s2); font: var(--data); font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.bio-photo figcaption a { color: inherit; }
.bio-body { min-width: 0; max-width: var(--measure); }
.bio-role { margin: 0 0 var(--s2); font: 600 17px/1.4 var(--sans); color: var(--deep-navy); }
.bio-desc { margin: 0 0 var(--s3); font: var(--ui); color: var(--text-muted); }
.bio-text p { margin: 0 0 var(--s3); font: 400 17px/1.6 var(--serif); color: var(--text); }
.bio-text.clamped { max-height: calc(17px * 1.6 * 7); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.bio-toggle { display: inline-block; margin: 0 0 var(--s3); }
.bio-empty { margin: 0 0 var(--s3); font: italic 400 17px/1.6 var(--serif); color: var(--text-muted); }
.bio-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: var(--s2) 0 var(--s4); font: var(--ui-sm); }
.bio-facts dt { font: var(--data-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.bio-facts dd { margin: 0; color: var(--text); }
.bio-sources { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); list-style: none; }
.bio-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.bio-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 500 12px/1.5 var(--sans); color: var(--text); text-decoration: none; }
.bio-badge:hover { border-color: var(--smart-blue); color: var(--smart-blue); }
.bio-badge.official { border-color: var(--smart-blue); background: var(--blue-soft); color: var(--deep-navy); }
.bio-badge .badge-icon, .bio-badge .ext-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bio-badge.official .badge-icon { color: var(--smart-blue); stroke-width: 2.6; }
.bio-badge-meta { font: var(--data); color: var(--text-muted); }
.bio-credit { margin: var(--s3) 0 0; font: var(--data); color: var(--text-muted); }
.bio-credit a { color: var(--smart-blue); }
body.by-author .tile-bio { display: none; }
@media (max-width: 599px) {
  .tile-bio { grid-template-columns: 1fr; }
  .bio-photo img { width: 112px; }
}

/* Perguntas do contexto e casos relacionados: cartões de apoio, em fundo suave. */
.tile-question, .tile-related { background: var(--bg-light); border-color: transparent; }
.tile-question .label, .tile-related .label { margin-bottom: var(--s2); color: var(--accent-ink); }
.tile-title { margin: 0 0 var(--s3); font: 600 22px/1.25 var(--sans); letter-spacing: -0.02em; color: var(--deep-navy); text-wrap: balance; }
.tile-answer p { margin: 0 0 var(--s3); font: 400 16px/1.6 var(--serif); color: var(--text); }
.tile-answer a { color: var(--smart-blue); text-decoration: none; }
.tile-answer a:hover { text-decoration: underline; }
.tile-answer .soon { color: var(--text-muted); font-style: italic; }

.news.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 30% { border-color: var(--smart-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--smart-blue) 18%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }
.feed-sentinel, .feed-end { margin-top: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--line); font: var(--data); color: var(--text-muted); text-align: center; }

/* ---------- Notícia aberta (leitura): texto à esquerda, conexões à direita ---------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); margin-top: var(--s5); }
.reader-main { min-width: 0; max-width: 68ch; }
.reader .news-title { margin: var(--s3) 0 var(--s3); font: 600 34px/1.15 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.reader .news-summary { font-size: 19px; }
.reader .source-line { margin-top: 0; }
.reader .source-link { font-size: 14px; }
.reader .ext-icon { width: 15px; height: 15px; }
.reader-connections { min-width: 0; }
.reader-connections > .label { margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); color: var(--accent-ink); }
.conn-group + .conn-group { margin-top: var(--s5); }
.conn-title { margin: 0 0 var(--s1); font: 600 14px/1.4 var(--sans); color: var(--deep-navy); }
.reader-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.reader-step { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s3) 0; color: var(--text); text-decoration: none; }
.reader-step.older { text-align: right; }
.reader-step .label { margin: 0; }
.reader-step-title { font: 500 15px/1.4 var(--sans); transition: color var(--fast) var(--ease); }
.reader-step:hover .reader-step-title { color: var(--smart-blue); }
.reader-step.newer .label::before { content: "← "; }
.reader-step.older .label::after { content: " →"; }

/* Autor clicável na notícia aberta e faixa "Matérias de …" no topo do feed. */
.author-btn { padding: 0; border: 0; background: none; color: var(--smart-blue); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.author-btn:hover { text-decoration-color: currentColor; }
.author-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s5); padding: var(--s4) var(--s5); border-radius: var(--radius); background: var(--bg-light); }
.author-bar .label { margin: 0; color: var(--accent-ink); }
.author-name { margin: var(--s1) 0; font: 600 24px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--deep-navy); }
.author-bar p { margin: 0; }
body.by-author .tile-summary { display: none; }
body.reading .author-bar, .author-bar[hidden] { display: none; }
button.person { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
button.person:hover .avatar { background: var(--deep-navy); color: var(--white); }
button.person:hover > span:nth-child(2) { color: var(--smart-blue); }
button.person.current > span:nth-child(2) { font-weight: 600; color: var(--deep-navy); }

/* ---------- Pessoas: lista compacta ---------- */
.people { list-style: none; margin: 0; padding: 0; }
.people > li + li { border-top: 1px solid var(--line); }
.person { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; font: var(--ui-sm); color: var(--text); text-decoration: none; }
.avatar {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--avatar); color: var(--deep-navy); font: 500 10px/1 var(--mono);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.person.institution .avatar, .person.company .avatar, .person.party .avatar { border-radius: var(--radius-sm); }
.person-count { margin-left: auto; color: var(--text-muted); font: var(--data); white-space: nowrap; }
a.person:hover .avatar { background: var(--deep-navy); color: var(--white); }
a.person:hover > span:nth-child(2) { color: var(--smart-blue); }
/* Na notícia aberta, as pessoas ficam em linha (chips), não em lista. */

/* ---------- Contexto ---------- */
.card-dashed { border-style: solid; }
.question { border-top: 1px solid var(--line); }
.question:first-of-type { border-top: 0; }
.question summary {
  display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; cursor: pointer; list-style: none;
  font: 500 14px/1.45 var(--sans); color: var(--deep-navy); transition: color var(--fast) var(--ease);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; font: 400 16px/1 var(--mono); color: var(--text-muted); transition: transform var(--medium) var(--ease); }
.question[open] summary::after { transform: rotate(45deg); }
.question summary:hover { color: var(--smart-blue); }
.question p { margin: 0; padding: 0 0 var(--s4); font: 400 15px/1.6 var(--serif); color: var(--text); }
.question .soon { color: var(--text-muted); font-style: italic; }
.question a { color: var(--smart-blue); text-decoration: none; }
.question a:hover { text-decoration: underline; }
.question div > p { padding-bottom: var(--s3); }
.key-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.key-list button { display: block; width: 100%; padding: var(--s2) 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: var(--ui-sm); color: var(--text); cursor: pointer; }
.key-list button:hover { color: var(--smart-blue); }
.key-date { display: block; font: var(--data); color: var(--text-muted); }
.case-link { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding var(--fast) var(--ease); }
.case-link strong { display: block; color: var(--deep-navy); font: 600 18px/1.4 var(--sans); }
.case-link span { font: var(--data); color: var(--text-muted); }
.case-link:hover { padding-left: var(--s2); }
.case-link:hover strong { color: var(--smart-blue); }
.aliases { margin: var(--s4) 0 0; font: var(--read); font-size: 16px; color: var(--text-muted); }

/* ---------- Rodapé ---------- */
.footer { background: var(--bg-dark); color: var(--on-dark-muted); padding: var(--s8) 0; font: var(--data); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.footer .logo { color: var(--white); }

/* ---------- Movimento: blocos sobem suavemente ao aparecer ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js [data-reveal].in-view { opacity: 1; transform: none; }
.js .col-center[data-reveal] { transition-delay: 80ms; }

/* =====================================================================
   Celular e tablet em pé (até 899px): uma coluna; o resumo no topo, a linha do
   tempo é a lista principal e a notícia abre por cima (os outros cartões ficam escondidos).
   ===================================================================== */
.col-center { order: -1; }
.article-view { display: none; outline: none; scroll-margin-top: calc(var(--head-h, 150px) + var(--s4)); }
body.reading .article-view { display: block; animation: fade-up var(--medium) var(--ease); }
@media (max-width: 899px) {
  body.reading { overflow: hidden; }
  /* A animação de entrada (transform) prenderia a notícia dentro da coluna em vez da tela. */
  body.reading .col-center { transform: none; transition: none; }
  body.reading .article-view { position: fixed; inset: 0; z-index: 30; padding: 0 0 var(--s8); overflow-y: auto; background: var(--white); }
  body.reading .back-link { position: sticky; top: var(--s3); z-index: 1; margin: var(--s3) var(--page-pad) 0; }
  body.reading .article-view .reader { padding: 0 var(--page-pad); }
  .reader .news-title { font-size: 28px; }
  .reader .news-summary { font-size: 18px; }
  .mosaic { display: block; }
  .mosaic > .tile:not(.tile-summary):not(.tile-bio), #feed-foot { display: none; }
  .tile-bio { margin-bottom: var(--s5); }
  .summary-card:not(.expanded) #summary-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .summary-toggle { display: inline-block; }
  .layout { gap: var(--s7); }
  .menu { position: fixed; left: var(--s4); right: var(--s4); top: calc(var(--head-h, 150px) + var(--s2)); width: auto; }
}
@media (max-width: 767px) {
  .hero { padding: var(--s4) 0; }
  .hero h1 { font-size: 32px; }
  .hero.compact h1 { font-size: 20px; }
  .pill { min-height: 34px; padding: 0 var(--s3); font-size: 13px; }
  .page { padding-top: var(--s6); }
}

/* Tablet deitado (900px+): linha do tempo (284 px, rola sozinha) · feed em 2 colunas. */
@media (min-width: 900px) {
  .layout { grid-template-columns: 284px minmax(0, 1fr); gap: var(--s8) 40px; align-items: start; }
  .filters { grid-template-columns: 1fr; }
  .col-left {
    grid-column: 1; position: sticky; top: calc(var(--head-h, 150px) + var(--s4)); max-height: calc(100vh - var(--head-h, 150px) - var(--s6));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; padding: 0 var(--s3) 0 6px;
  }
  .tl-head { position: sticky; top: 0; z-index: 1; background: var(--page); }
  .col-center { grid-column: 2; order: 0; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  /* Notícia aberta ocupa o lugar do feed; a linha do tempo e a faixa do caso continuam. */
  body.reading .mosaic, body.reading #feed-foot { display: none; }
}

/* Computador (1200px+): linha do tempo · feed em 3 colunas (meio e direita juntos). */
@media (min-width: 1200px) {
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .reader { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s6) var(--s8); }
  .reader-connections { position: sticky; top: calc(var(--head-h, 150px) + var(--s4)); align-self: start; }
  .reader-nav { grid-column: 1 / -1; }
}