/* monitor.css — KavMonitor sobre o design system do SÍTIO.

   Camadas que esta folha ASSUME já carregadas, NESTA ORDEM (ver
   templates/pagina.html — fora de ordem a cascata inverte, e nada avisa):

     /ds/sitio/tokens.css           tokens, fontes, modos
     /ds/sitio/sistema.css          terreno, vozes, .pinta/.imprime, .pisca
     /ds/sitio/elementos.css        primitivas genéricas
     /ds/sitio/elementos-sitio.css  as famílias do sítio: .cromo, .secao__*,
                                    .acao, .chip, .ficha, .medidor, .video,
                                    .tema__trilho/.tema__barra/.tema__ponto,
                                    .rodape, .sitio__miolo
     /css/sitio-web.css             a camada à mão (largura, escala de tela,
                                    contraste sobre papel, .acao--casa)
     esta folha                     só o que é do KavMonitor

   A página NÃO carrega mais /ds/ (sem sitio/), ds-web.css, registro.css nem
   chrome.css. Os dois pacotes declaram os MESMOS nomes de token com valores
   DIFERENTES (--mesa era #343434, agora é #04080c), então misturar os dois não
   dá erro nenhum: dá cor errada em silêncio. Ou um, ou outro.

   O QUE ESTA FOLHA NÃO FAZ: inventar componente. Cada bloco da página pousa
   numa família que o pacote entrega. Onde o pacote não tem a peça — a lista em
   acordeão do Feed, a régua de seções — a falta está DECLARADA no comentário
   do bloco, e o que entra é a mesma receita de superfície do `.prompt`
   (superfície + fio + raio + relevo + luz de bordo), nunca um visual novo.

   Terreno: `--sitio-fundo` no corpo, `.sitio__grade` de atmosfera atrás de
   tudo, superfícies em `--sitio-superficie` e o degrau de cima em
   `--sitio-superficie-alta`. Sinal âmbar SÓ na ação e no número da seção; a
   cor do termômetro de "Em alta" é matéria (um arco do anel de 12 matizes,
   pedida pela classe `grau-*` e nunca por hex), que é dado, não ação.
*/

/* ── Base do documento ──────────────────────────────────────────────────
   Isto vinha de ds-web.css, que esta página não carrega mais. São as quatro
   linhas que o pacote não tem porque é kit de peça de vídeo, não de documento. */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

/* O anel de foco global. `sitio-web.css` só o declara em dois controles da
   home (.prompt__entrada, .acao--casa) — o resto da home vive com o outline
   padrão do navegador. Aqui a página é uma pilha de cartões clicáveis, e o
   padrão do agente sobre fundo quase preto quase não aparece: o anel é o
   âmbar do sítio, o mesmo vocabulário de "isto tem foco" das outras duas. */
:focus-visible {
  outline: 2px solid var(--sitio-sinal);
  outline-offset: 3px;
  border-radius: var(--sitio-raio-miudo);
}

/* `.sitio a { color: var(--sitio-sinal) }` (elementos-sitio.css, 0,1,1) pinta
   TODO link de âmbar. Aqui quase todo link é um cartão inteiro, e cartão âmbar
   não é link: é aviso. Escopado com o elemento (0,2,1) pra vencer de verdade —
   a armadilha está documentada em sitio-web.css e já mordeu quatro vezes
   nesta base, sempre com classe única perdendo pra `.sitio a`. */
.sitio a.ficha,
.sitio a.video,
.sitio a.tema,
.sitio a.chip,
.sitio a.cromo__marca {
  color: var(--sitio-tinta-cheia);
  text-decoration: none;
}

/* A marca do rodapé pousa na faixa CLARA (--sitio-papel): tinta cheia ali é
   quase branco sobre quase branco. A cor certa é a do papel — que é o que o
   pacote já declara em `.rodape__marca`; o que falta é vencer `.sitio a`. */
.sitio a.rodape__marca,
.sitio a.rodape__marca:hover {
  color: var(--sitio-papel-tinta);
  text-decoration: none;
}

/* Pictograma em <use>: existe na home (css/home.css) e não no pacote. Esta
   página não carrega a folha da home — declarado aqui, idêntico. */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ── Pular para o conteúdo ─────────────────────────────────────────────── */

.sitio__pular {
  position: absolute;
  left: -9999px;
}

.sitio__pular:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--sitio-raio-fino);
  background: var(--sitio-sinal);
  color: var(--sobre-sinal);
}

/* ── O menu compacto do cromo ──────────────────────────────────────────
   Mesmo contrato de comportamento do resto do site — os ganchos são
   data-menu-toggle / data-menu-painel e a classe is-open (js/home/menu.js),
   nunca as classes de estilo. O ícone de hambúrguer não existe no sprite
   (22 símbolos, nenhum "menu"), então são três traços em CSS puro. */

.cromo__compacto { display: none; }
.cromo__menu { display: contents; }

.cromo__compacto {
  width: 40px;
  height: 40px;
  border: 1px solid var(--sitio-traco-forte);
  border-radius: var(--sitio-raio-fino);
  background-color: var(--sitio-superficie);
  cursor: pointer;
  transition: border-color var(--t-toque) var(--e-entrada);
}

.cromo__compacto:hover { border-color: var(--sitio-tinta-fraca); }

.cromo__compacto-icone,
.cromo__compacto-icone::before,
.cromo__compacto-icone::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--sitio-tinta-cheia);
  transition: transform var(--t-toque) var(--e-entrada),
              opacity var(--t-toque) var(--e-entrada),
              top var(--t-toque) var(--e-entrada);
}

.cromo__compacto-icone { position: relative; }
.cromo__compacto-icone::before,
.cromo__compacto-icone::after { position: absolute; left: 0; }
.cromo__compacto-icone::before { top: -6px; }
.cromo__compacto-icone::after { top: 6px; }

.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone {
  background-color: transparent;
}
.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone::before {
  top: 0;
  transform: rotate(45deg);
}
.cromo__compacto[aria-expanded="true"] .cromo__compacto-icone::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Seção ──────────────────────────────────────────────────────────────
   A casca é do pacote (.secao, .secao__cabeca, .secao__marcador,
   .secao__titulo, .secao__deck). Aqui só a pilha do lado esquerdo, o corpo e
   o scroll-margin que compensa a régua grudada no topo. */

.secao__pilha {
  min-width: 0;
  max-width: 68ch;
}

.secao__cabeca {
  flex-wrap: wrap;
  row-gap: 12px;
}

.secao__deck {
  text-wrap: pretty;
}

/* A manchete da abertura fala no corpo de manchete do sítio (clamp de 34 a 64
   em sitio-web.css) — é a única voz alta da página. */
.secao__titulo {
  text-wrap: balance;
}

.secao--hoje .secao__titulo {
  font-size: var(--sitio-manchete-corpo);
  line-height: var(--sitio-manchete-entrelinha);
  font-weight: var(--sitio-manchete-peso);
  letter-spacing: -0.022em;
}

.secao__corpo {
  margin-top: 28px;
}

/* A régua grudada come o topo do alvo quando se salta por âncora. */
.secao {
  scroll-margin-top: 88px;
}

/* ── O carimbo da leitura ───────────────────────────────────────────────
   Um briefing é um artefato DATADO, e a data estava enterrada no meio de uma
   frase. Aqui ela vira o que é: a etiqueta da edição, na ponta oposta do
   título, na voz de sistema. */

.carimbo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--sitio-traco);
  border-radius: var(--sitio-raio-capsula);
  background-color: var(--sitio-superficie);
  box-shadow: var(--sitio-relevo-baixo), var(--sitio-luz-de-bordo);
  font-family: var(--voz-sistema);
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--sitio-tinta-secundaria);
}

.carimbo .ico { color: var(--sitio-sinal); font-size: 14px; }
.carimbo__data { color: var(--sitio-tinta-cheia); }
.carimbo__hora { color: var(--sitio-tinta-fraca); }

/* ── 01 · Hoje: o medidor ───────────────────────────────────────────────
   Família `.medidor` do pacote (a faixa de números do canal, na home). O valor
   é mono 22/28 e NÃO tem altura travada.

   Isto conserta um defeito de conteúdo que a página tinha: os números moravam
   num readout de 40px dentro de uma coluna de 132px com `overflow:hidden`, e
   "48.200 pontos" renderizava como "4". Medido no antes/depois desta
   conversão — quatro dos oito números de "Destaques" saíam cortados. */

.medidor {
  flex-wrap: wrap;
  row-gap: 20px;
}

.medidor__valor {
  font-variant-numeric: tabular-nums;
}

/* ── A bússola: a régua de seções ───────────────────────────────────────
   VAZIO DECLARADO: o pacote não tem família de navegação interna de página —
   `.cromo` é a faixa do site inteiro e não fala de conteúdo. O que entra aqui
   NÃO é um componente novo: é uma fileira de `.chip` do próprio pacote, sobre
   a mesma receita de superfície do `.prompt` (superfície, fio, raio, relevo).

   Ela gruda no topo porque a página tem quatro mil pixels: numa leitura dessas
   "onde eu estou" e "o que ainda vem" são metade da navegação. monitor.js
   marca `aria-current` na seção visível. Sem JS a régua continua sendo uma
   fileira de âncoras que funcionam — só não acompanha a rolagem. */

.bussola {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--sitio-traco);
  border-radius: var(--sitio-raio);
  /* Opaca, não translúcida: vidro fosco (`backdrop-filter`) está na no-fly
     list do sistema desde a versão de vídeo, e uma régua que deixa o conteúdo
     passar por trás é justamente o que atrapalha na hora de ler o que passa. */
  background-color: var(--sitio-cromo);
  box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo);
}

.bussola .chip {
  gap: 9px;
  transition: border-color var(--t-toque) var(--e-entrada),
              color var(--t-toque) var(--e-entrada);
}

.bussola .chip b {
  font-family: var(--voz-sistema);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--sitio-tinta-fraca);
}

.sitio a.chip:hover {
  color: var(--sitio-tinta-cheia);
  border-color: var(--sitio-traco-forte);
}

/* A seção em que se está: o mesmo vocabulário do chip pressionado do pacote
   (`[aria-pressed="true"]` — borda de sinal, tinta cheia). */
.sitio a.chip[aria-current] {
  border-color: var(--sitio-sinal);
  color: var(--sitio-tinta-cheia);
  background-color: color-mix(in srgb, var(--sitio-sinal) 12%, var(--sitio-superficie-alta));
}

.sitio a.chip[aria-current] b { color: var(--sitio-sinal); }

/* ── A caixa de imagem ──────────────────────────────────────────────────
   `.midia` NÃO desenha: quem dá proporção, fundo e canto é a família do pacote
   que vem junto na classe (`.ficha__cena`, `.video__quadro`, `.post__midia`).
   Aqui só o recorte, a cobertura e o rótulo de origem ATRÁS da imagem — URL de
   preview do Reddit expira, e quando cai é o domínio que aparece, não um
   retângulo mudo. */

.midia {
  position: relative;
  display: block;
  overflow: hidden;
}

.midia img,
.midia video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `.ficha__cena img` do pacote é `image-rendering: pixelated` — certo pra
     pixel art de projeto, errado pra foto de preview do Reddit, que sai
     serrilhada. A caixa aqui é a mesma; o conteúdo, não. */
  image-rendering: auto;
}

.midia video {
  object-fit: contain;
  background: var(--poco);
}

.midia__rotulo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 16px;
  font-family: var(--voz-sistema);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--sitio-tinta-secundaria);
  overflow: hidden;
}

/* ── 02 · Destaques: as fichas ──────────────────────────────────────────
   Família `.ficha` do pacote, a mesma dos cartões de projeto da home: cena,
   tarja, nome, deck, pé. Cada cartão declara `--ficha-tinta` inline (os quatro
   realces do sítio) — a cor distingue uma história da outra, e reaparece na
   tarja, no véu da cena e na borda do hover. */

.fichas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* `align-self:start` (pacote) só segura o eixo de bloco; num `.ficha__corpo`
   em grid o `justify-items` continua `stretch` e a tarja atravessa o cartão
   inteiro — deixa de ler como etiqueta e passa a ler como faixa de título. */
.ficha__tarja {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O nome da ficha é `--sitio-ficha-corpo` (clamp de 20 a 26px), calibrado pra
   quatro cartões de PROJETO, cujo nome tem duas ou três palavras. Aqui ele
   carrega manchete de IA — 80 e tantos caracteres numa coluna de 292px. A 26px
   isso dá cinco palavras por linha e sai reticenciado; a 17 cabe inteiro. */
.ficha__nome {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Quatro linhas pra manchete, três pro resumo: entre truncar o TÍTULO e
     truncar o resumo, quem tem que caber inteiro é o título — ele é a notícia;
     o resumo é o complemento, e o cartão inteiro leva ao post de qualquer
     jeito. Medido: com 3 linhas, duas das quatro manchetes de 85 caracteres
     saíam cortadas numa coluna de 260px. */
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.ficha__deck {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* O pé do pacote é `justify-content:flex-end` (a ficha de projeto só tem o "+"
   ali). Aqui ele carrega duas coisas — origem à esquerda, medidas à direita —
   e ganha o fio que separa o pé do corpo. */
/* `flex-wrap` porque o pé carrega três dados de largura imprevisível
   (`r/pcmasterrace` + "48.200 pontos" + "1.578 comentários" pedem 279px numa
   coluna de 260 a 1440px — medido). Sem a quebra o conteúdo transborda o
   cartão em silêncio: nada rola, nada avisa, e o número some pela direita. */
.ficha__pe {
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 16px;
  margin: 0 20px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--sitio-traco);
  font-family: var(--voz-sistema);
  font-size: 11px;
  line-height: 18px;
  color: var(--sitio-tinta-fraca);
}

.ficha__sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha__medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  white-space: nowrap;
}

.medida b {
  font-weight: 400;
  color: var(--sitio-tinta-cheia);
  font-variant-numeric: tabular-nums;
}

/* ── 03 · Em alta: as fichas com termômetro ─────────────────────────────
   A MESMA família `.ficha` dos destaques — foi o pedido do dono, e é o que
   traz de volta a imagem que faltava aqui. O que a seção ganha por cima do
   ranking com barra que existia:

   1. IMAGEM. Ela sempre esteve no monitor.json (7 dos 8 itens com fonte de
      1080px, medido em produção); a seção é que não a usava.

   2. A COR VIROU INFORMAÇÃO. Nos destaques `--ficha-tinta` só distingue uma
      história da outra. Aqui ela aponta pra `--materia`, que a classe `grau-*`
      declara no MESMO elemento — o cartão inteiro (tarja, véu da cena, borda
      do hover) herda a temperatura sem uma única cor nova entrar na folha.

   3. A BARRA MEDE OUTRA COISA. A de antes era proporcional a PONTOS, e o item
      mais discutido do briefing (5.943 comentários) é o de MENOS pontos da
      lista: ele saía com a barra mais curta de todas. O termômetro mede
      comentários POR ponto — a régua e o porquê estão em
      `monitor_site/termometro.py`. */

.fichas--alta .ficha__nome {
  /* Aqui não há deck: o pipeline não emite resumo pra esta seção. O título
     fica com todo o corpo do cartão, e três linhas cobrem as manchetes
     traduzidas sem cortar (medido no briefing de 14/08/2026). */
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* A tarja é o NOME do grau, e fala na tinta clara do anel (`--anel-texto`,
   que a mesma classe `grau-*` declara), não na matéria saturada: sobre o fundo
   de 14% da própria matéria, o tom cheio fica no limite da leitura — o irmão
   claro do anel existe exatamente pra texto sobre terreno escuro. */
.fichas--alta .ficha__tarja {
  color: var(--anel-texto);
}

/* A linha do termômetro: trilho na largura que sobra, ordinal na ponta.
   O trilho e a barra são `.tema__trilho`/`.tema__barra` DO PACOTE — as duas
   peças que a lista de ranking usava, reaproveitadas dentro do cartão. O que
   o pacote não tem é esta linha que junta as duas leituras, e é só isso que
   está declarado aqui. */
.termometro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 20px 4px;
}

/* Os dois nascem em <span> nesta página, e o pacote não declara `display` em
   nenhum dos dois (na home eram <div>). Largura em elemento inline é no-op:
   sem estas duas linhas TODAS as barras saem do tamanho do trilho, e o
   termômetro vira enfeite. O defeito já existiu — há teste contra navegador
   real medindo as larguras na tela. */
.termometro .tema__trilho,
.termometro .tema__barra {
  display: block;
}

.termometro .tema__barra {
  background-color: var(--materia);
}

.termometro__grau {
  font-family: var(--voz-sistema);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--sitio-tinta-secundaria);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A posição no ranking, no pé do cartão junto da origem. Ela não vira tarja
   sobre a imagem: a tarja do cartão já é o grau do termômetro, e duas
   etiquetas na mesma peça disputariam a mesma leitura. */
.fichas--alta .ficha__sub b {
  font-weight: 400;
  color: var(--sitio-tinta-cheia);
  font-variant-numeric: tabular-nums;
}

/* ── A legenda do termômetro ────────────────────────────────────────────
   VAZIO DECLARADO: o pacote não tem família de legenda de escala.
   `.escala-sitio` diz UMA coisa ("a barra mede X"), e aqui são cinco degraus
   nomeados. O que entra não é peça nova — é uma fileira de `.chip` do pacote,
   cada um com o `.tema__ponto` do pacote na cor do próprio grau.

   Ela existe por obrigação, não por enfeite: verde→vermelho sem legenda é
   decoração, e é o único jeito de o degradê querer dizer alguma coisa pra
   quem chega na página pela primeira vez. */

.termometro-escala {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--sitio-traco);
  border-radius: var(--sitio-raio);
  background-color: var(--sitio-superficie);
  box-shadow: var(--sitio-relevo-baixo), var(--sitio-luz-de-bordo);
}

.termometro-escala__titulo {
  margin: 0;
  font-family: var(--voz-sistema);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sitio-tinta-fraca);
}

.termometro-escala__graus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* `.chip` do pacote nasce clicável (cursor:pointer). Aqui ele não é controle
   nenhum: é rótulo. */
.termometro-escala .chip {
  cursor: default;
  gap: 9px;
  font-size: 12.5px;
}

.termometro-escala .chip b {
  font-family: var(--voz-sistema);
  font-size: 11px;
  font-weight: 400;
  color: var(--anel-texto);
  font-variant-numeric: tabular-nums;
}

/* `.tema__ponto` do pacote traz só o véu (`--veu-materia`) e o fio escuro em
   volta — a cor de baixo é do consumidor, e é a matéria do próprio grau. */
.termometro-escala .tema__ponto {
  flex: none;
  background-color: var(--materia);
}

.termometro-escala__nota {
  max-width: 88ch;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--sitio-tinta-secundaria);
  text-wrap: pretty;
}

/* ── 04 · Da web: os cartões ────────────────────────────────────────────
   Família `.video` do pacote: cena 16:9, tarja no canto, corpo com nome e
   meta. A tarja de duração vira a HORA da publicação — é o mesmo papel
   (um dado curto sobre a imagem), e é o que faltava pra saber, de relance,
   se a matéria é de agora ou de ontem. */

.videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* O NOME DO VEÍCULO NA ÚLTIMA LINHA DO CARTÃO — pedido do dono, e a mesma
   correção que os cartões de vídeo da home receberam (ver o comentário "A meta
   … ancorada na ÚLTIMA linha do cartão" em `LandingPage/css/home.css`).

   Sem isto a fonte sobe grudada no título: manchete de duas linhas deixa
   "POLYGON" numa altura, manchete de três deixa noutra, e a linha fica
   desalinhada entre cartões vizinhos. O olho lê isso como cartão torto, não
   como texto de tamanho diferente — e não há nada de errado no HTML pra achar.

   São DUAS distribuições, e as duas precisam existir: o CARTÃO dá ao corpo
   toda a altura que sobra depois do quadro (`auto 1fr`), e o CORPO empurra a
   meta pro fim dessa altura. `.video__corpo` já é grid no pacote
   (`1fr auto`, com a meta em `grid-column:1/-1`); aqui só entra a régua de
   linhas e o `align-self` que vence o `align-items:start` do pacote.

   Os cartões dos destaques e de "Em alta" NÃO precisam disto: `.ficha` é
   coluna flex com `.ficha__corpo{flex:1}` no pacote, então o pé já pousa no
   fim. O teste `TestMetaNaUltimaLinha` mede as três famílias juntas, pra que
   a diferença de mecanismo não vire diferença de resultado sem ninguém ver. */
.videos > .video { display: grid; grid-template-rows: auto 1fr; }
.videos > .video > .video__corpo { grid-template-rows: auto 1fr; }
.videos .video__meta { align-self: end; }

.video__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.video__duracao {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.video__meta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── 05 · Feed ──────────────────────────────────────────────────────────
   VAZIO DECLARADO: o pacote não tem família de lista em acordeão. A superfície
   é a MESMA receita do `.prompt` (superfície, fio de traço, raio, relevo, luz
   de bordo) — nada de visual novo, só uma composição.

   O que mudou de conteúdo: a linha FECHADA agora mostra o título do post mais
   votado do subreddit. Antes eram doze linhas idênticas dizendo só "r/nome ·
   5 posts", e a única forma de saber o que tinha dentro era abrir — ninguém
   abre doze. */

.feed {
  border: 1px solid var(--sitio-traco);
  border-radius: var(--sitio-raio);
  background-color: var(--sitio-superficie);
  box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo);
  overflow: hidden;
}

.sub + .sub { border-top: 1px solid var(--sitio-traco); }

.sub__cabeca {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-toque) var(--e-entrada);
}

.sub__cabeca::-webkit-details-marker { display: none; }
.sub__cabeca:hover { background-color: var(--sitio-superficie-alta); }

.sub__nome {
  font-family: var(--voz-sistema);
  font-size: 13px;
  line-height: 20px;
  color: var(--sitio-tinta-cheia);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A prévia: o post mais votado do sub, em tinta secundária. É conteúdo, e é
   o que faz a linha fechada valer a leitura. */
.sub__previa {
  min-width: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--sitio-tinta-secundaria);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub__cabeca:hover .sub__previa { color: var(--sitio-tinta-cheia); }

.sub__total {
  height: 26px;
  padding: 0 10px;
  font-family: var(--voz-sistema);
  font-size: 11px;
  white-space: nowrap;
}

/* O sinal de abrir/fechar: dois traços de 1px, e o vertical some quando abre.
   Sem rotação sustentada, sem glifo — só transform, no tempo de toque. */
.sinal {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  color: var(--sitio-tinta-fraca);
}

.sinal::before,
.sinal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-toque) linear;
}

.sinal::after { transform: rotate(90deg); }

[open] > .sub__cabeca .sinal { color: var(--sitio-sinal); }
[open] > .sub__cabeca .sinal::after { transform: rotate(90deg) scaleX(0); }

.sub[open] > .sub__cabeca { background-color: var(--sitio-superficie-alta); }

.sub__posts {
  padding: 0 20px 8px;
  background-color: var(--sitio-rebaixo);
}

/* ── O post aberto ──────────────────────────────────────────────────────
   Mídia numa coluna de 384px, corpo no resto. Sem mídia, o corpo fica com a
   largura toda mas travado em 72ch — texto correndo a largura inteira do
   painel daria 140 caracteres por linha, o dobro de uma medida de leitura. */

.post {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  column-gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--sitio-traco);
}

.sub__posts > .post:first-child { border-top: 0; }
.post--sem-midia { grid-template-columns: minmax(0, 1fr); }

/* 384 × 216 é 16:9 exato — aqui o `cover` não descarta nada. */
.post__midia {
  align-self: start;
  height: 216px;
  border-radius: var(--sitio-raio-fino);
  background-color: var(--poco);
  box-shadow: var(--sitio-relevo-baixo);
}

.post__corpo {
  min-width: 0;
  max-width: 72ch;
}

.post__titulo {
  margin: 0;
  font-family: var(--voz-funcional);
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  color: var(--sitio-tinta-cheia);
  text-wrap: pretty;
}

.post__meta {
  margin: 6px 0 0;
  font-family: var(--voz-sistema);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.04em;
  color: var(--sitio-tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.post__texto {
  margin-top: 16px;
  font-size: 14px;
  line-height: 23px;
  color: var(--sitio-tinta-secundaria);
}

.post__texto p {
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}

.post__texto p:last-child { margin-bottom: 0; }

/* O comentário destacado: hierarquia por recuo, filete e voz — nunca por
   superfície nova. O filete é o mesmo traço de todo separador da página. */
.post__comentario {
  margin: 16px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--materia-217, var(--casa));
}

.post__credito {
  margin: 0;
  font-family: var(--voz-sistema);
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sitio-tinta-fraca);
}

.post__comentario p + p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 23px;
  color: var(--sitio-tinta-cheia);
  overflow-wrap: anywhere;
}

.post__saidas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Mesma armadilha do resto da folha: `.acao--fantasma` (0,1,0) perde de
   `.sitio a` (0,1,1) e o link do domínio saía âmbar. São até sessenta desses
   numa página — âmbar em todos brigaria com "Abrir no Reddit", que é a ação de
   verdade, e com os números de seção. Fantasma é fantasma. */
.sitio a.acao--fantasma { color: var(--sitio-tinta-secundaria); }
.sitio a.acao--fantasma:hover { color: var(--sitio-tinta-cheia); }

/* ── A página de indisponibilidade ──────────────────────────────────────── */

.vazio {
  display: grid;
  justify-items: start;
  gap: 20px;
  max-width: 60ch;
  padding: 28px;
  border: 1px solid var(--sitio-traco);
  border-radius: var(--sitio-raio);
  background-color: var(--sitio-superficie);
  box-shadow: var(--sitio-relevo), var(--sitio-luz-de-bordo);
}

.vazio__texto {
  margin: 0;
  color: var(--sitio-tinta-secundaria);
  text-wrap: pretty;
}

/* ── Rodapé ─────────────────────────────────────────────────────────────
   `.rodape` e `.rodape__marca` são do pacote; a distribuição em três blocos
   (marca · redes · legal) e a faixa clara de contraste vêm de sitio-web.css.
   Aqui só as duas navegações, que a home resolve na própria folha. */

/* A RAMPA. Na home a faixa clara do rodapé chega preparada: vem logo depois
   da seção `.papel`, que abre com um degradê de 144px subindo do poço até o
   papel. Aqui não existe seção clara nenhuma, e sem preparo o rodapé pousa
   como um corte de #04080c pra #ecece4 no meio da rolagem.

   O degradê abaixo é o do `.papel` VERBATIM (elementos-sitio.css), só que em
   96px em vez de 144 — a passagem é menor porque não abre seção, só fecha
   página. Nada de cor nova: as sete paradas são as mesmas. */
.rodape {
  margin-top: 72px;
  padding-top: 96px;
  border-top: 0;
  background-image: linear-gradient(180deg, #04080c 0%, #0b0c0d 16%, #211f1c 34%,
                                    #4d4842 52%, #8f8a80 70%, #c6c3ba 87%, #ecece4 100%);
  background-repeat: no-repeat;
  background-size: 100% 96px;
}

.rodape .sitio__miolo {
  flex-wrap: wrap;
  row-gap: 12px;
}

.rodape__redes,
.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 12.5px;
}

.rodape__redes a,
.rodape__legal a {
  color: var(--sitio-papel-realce);
  text-decoration: none;
}

.rodape__redes a:hover,
.rodape__legal a:hover {
  color: var(--sitio-papel-realce-forte);
  text-decoration: underline;
}

/* ── Responsivo ─────────────────────────────────────────────────────────
   Os mesmos três degraus da home: 1180 (o cromo colapsa), 680 e 390. */

@media (max-width: 1180px) {
  .cromo__compacto { display: grid; place-items: center; }

  .cromo__menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: var(--sitio-cromo-altura);
    padding: 16px var(--sitio-sangria) 24px;
    background: var(--sitio-cromo);
    border-block: 1px solid var(--sitio-traco);
    box-shadow: var(--sitio-relevo);
    z-index: 4;
  }

  .cromo__menu.is-open { display: grid; gap: 16px; }
  .cromo__nav { display: grid; gap: 4px; }

  .secao { padding-top: 48px; }

  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sub__cabeca { grid-template-columns: 140px minmax(0, 1fr) auto 20px; }

  /* A mídia do post deixa de ter coluna própria e vira faixa acima do corpo. */
  .post { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .post__midia { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  .secao { padding-top: 40px; }
  .secao__cabeca { align-items: flex-start; }

  .fichas { grid-template-columns: minmax(0, 1fr); }
  .videos { grid-template-columns: minmax(0, 1fr); }

  /* Em duas colunas o `border-left` do pacote (que separa item de item numa
     FILEIRA) recua o primeiro item da segunda linha e desalinha a coluna. Em
     grade quem separa é o vão. */
  .medidor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
  .medidor__item { padding-left: 0; border-left: 0; }

  /* O termômetro NÃO sai em tela estreita, ao contrário da barra de pontos
     que existia aqui. A diferença é o que cada uma media: aquela comparava um
     item com o VIZINHO, e num cartão por linha não há vizinho na tela; esta
     mede numa régua fixa, então ela continua dizendo a mesma coisa sozinha. */

  /* O sub vira duas linhas: nome + contagem em cima, prévia embaixo.
     A PRÉVIA PRECISA DA LINHA EXPLÍCITA. Ela vem antes do chip na marcação
     (é o que faz sentido pra leitor de tela), e `grid-column:1/-1` sozinho
     empurra chip e sinal pra uma TERCEIRA linha, deixando duas faixas com
     20px de largura — medido em `grid-template-columns` computado, que é o
     único lugar onde isso aparece. Com `grid-row:2` fixado, nome, chip e
     sinal preenchem a linha 1 na ordem em que nascem. */
  .sub__cabeca {
    grid-template-columns: minmax(0, 1fr) auto 20px;
    row-gap: 6px;
    gap: 12px;
  }
  .sub__previa {
    grid-row: 2;
    grid-column: 1 / -1;
    white-space: normal;
  }

  .sub__posts { padding-inline: 14px; }
  .bussola { padding: 8px; gap: 6px; }
}

@media (max-width: 390px) {
  .bussola .chip { padding: 0 10px; }
}

/* ── Movimento reduzido ─────────────────────────────────────────────────
   O pacote já zera duração e atraso de animação (sistema.css). O que falta é
   a rolagem suave, que não é animação de elemento e passa batido lá. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}