/* Destaques — calendário de posts (heatmap tipo GitHub) + outliers. Só
   tokens já existentes em style.css (--grid/--border/--text-2) — nenhuma
   cor nova, a intensidade das células vem de NETWORK_ACCENT (destaques.js),
   mesma paleta de identificação de rede já usada em badges/ícones. */

.ds-cal-scroll { overflow-x: auto; padding-bottom: 4px; }

.ds-cal-months {
  display: grid;
  grid-auto-flow: column;
  gap: 3px;
  margin-left: 0;
  margin-bottom: 4px;
}
.ds-cal-months span {
  font-size: 11px;
  color: var(--text-2);
}

.ds-cal-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  width: max-content;
}

.ds-cal-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

.ds-cal-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-2);
}
.ds-cal-legend .ds-cal-cell { border: 1px solid var(--border); }
.ds-cal-legend .ds-cal-cell[data-level="0"] { background: var(--grid); }
/* níveis 1-4: cor de fundo setada via JS (mesmo hexToRgba(NETWORK_ACCENT,
   intensidade) das células reais) — a legenda tem que combinar com a rede
   selecionada, não pode ser uma cor fixa no CSS. */

.ds-highlight-post {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.ds-highlight-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.ds-highlight-meta { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.ds-highlight-stats { font-size: 13px; color: var(--text-1); }