/* Painel de OPEN SOURCE — redesign
 *
 * # O defeito, e a pista que estava no próprio texto
 *
 * O painel dizia, na abertura: "cada um resolve um problema que eu tinha de
 * verdade, e carrega O NÚMERO QUE ELE MEDE". E então mostrava cinco parágrafos
 * de oito linhas, com os números — 90,9%, US$ 0,001, 3 MB, 125 ms — enterrados
 * no meio de frases. A promessa estava escrita e não estava cumprida.
 *
 * O redesign inverte isso: o número vira o objeto principal do cartão, e o
 * texto passa a explicá-lo. Cada projeto ganha
 *
 *   MÉTRICA   o número, grande, em mono, contado na entrada
 *   legenda   o que ele mede
 *   gancho    uma frase — o que o projeto faz
 *   detalhe   o resto, recuado para tinta fraca
 *   tags      a stack
 *
 * # Por que contar o número em vez de só mostrá-lo
 *
 * O painel inteiro é uma metáfora de instrumento: LED que pisca, CRT com
 * scanline, cartucho. Um mostrador que assenta no valor pertence a esse mundo,
 * e é o único movimento que ACRESCENTA informação — o olho segue o número até
 * ele parar, que é exatamente onde se quer que ele pare.
 *
 * Anima `opacity` e `transform` apenas; o texto do número muda por
 * `textContent`, sem tocar em layout, porque a largura é reservada com
 * `tabular-nums` e `min-width` em `ch`. Sem isso o cartão treme a cada quadro.
 *
 * Fica em arquivo próprio, e não no `panel.css`: aquele é compartilhado com a
 * 2026.5, e um redesign da versão viva não pode reescrever uma congelada — o
 * dropdown de versões existe para elas continuarem como eram. */

.p-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  margin-top: 20px;
  align-items: start;
}

.p-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}

/* O cartão inteiro é um `<a>`, e `text-decoration` do ancestral PINTA os
   descendentes — um `text-decoration:none` no parágrafo filho não desfaz. No
   painel isso não aparecia porque o reset da 2026.5 exige um ancestral
   `.rp-body`; no fluxo o seletor deixou de casar e os dez cartões saíram com o
   texto todo sublinhado (medido em 01/09/2026). A regra tem de estar no PRÓPRIO
   link. */
a.p-card { text-decoration: none; }

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */
.p-card-h { padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
.p-card-h span { font-size: 14px; letter-spacing: .05em; }
.p-card-h em { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }

/* ── A métrica: o que o cartão passa a ser ────────────────────────────────── */
.p-metric {
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid rgba(111, 214, 255, .10);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(111, 214, 255, .06), transparent 62%);
}
.p-metric b {
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #9fd8ff;
  /* Reserva a largura ANTES de o contador rodar: sem isto o cartão inteiro
     encolhe e cresce a cada quadro, e o texto abaixo pula junto. */
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-shadow: 0 0 22px rgba(111, 214, 255, .28);
}
.p-metric b .u {                      /* unidade: menor e mais fria que o número */
  font-size: .48em;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(159, 216, 255, .72);
  margin-left: .12em;
}
.p-metric i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4d6da6;
}

/* ── Gancho: a frase que diz o que é ──────────────────────────────────────── */
.p-hook {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--fg, #e6edf6) !important;
  font-weight: 500;
  padding: 16px 18px 0 !important;
  margin: 0;
  max-width: 46ch;
}

/* ── Detalhe: recua, mas continua legível ─────────────────────────────────── */
.p-card p:not(.p-hook) {
  font-size: 13px;
  line-height: 1.66;
  padding: 10px 18px 14px;
  max-width: 52ch;
  flex: 1 1 auto;
}
.p-card p code {
  font-family: var(--font-mono);
  font-size: .9em;
  color: rgba(200, 232, 255, .9);
  background: rgba(111, 214, 255, .07);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.p-tags { padding: 0 18px 18px; gap: 6px; margin-top: auto; }

/* ── Entrada: os cartões ligam em sequência, como as estações ─────────────── */
@keyframes p-card-on {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.p-cards .p-card {
  animation: p-card-on .46s cubic-bezier(.22, .68, .36, 1) both;
}
.p-cards .p-card:nth-child(1) { animation-delay: .03s }
.p-cards .p-card:nth-child(2) { animation-delay: .10s }
.p-cards .p-card:nth-child(3) { animation-delay: .17s }
.p-cards .p-card:nth-child(4) { animation-delay: .23s }
.p-cards .p-card:nth-child(n+5) { animation-delay: .28s }

.p-card:hover { transform: translateY(-2px); }
.p-card:hover .p-metric b { text-shadow: 0 0 28px rgba(111, 214, 255, .45); }
.p-metric b { transition: text-shadow .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .p-cards .p-card { animation: none !important; opacity: 1; transform: none; }
  .p-card:hover { transform: none; }
  .p-metric b { transition: none; }
}

@media (max-width: 560px) {
  .p-cards { gap: 14px; }
  .p-metric { padding: 16px 15px 13px; }
  .p-hook { padding: 13px 15px 0 !important; }
  .p-card p:not(.p-hook) { padding: 9px 15px 12px; }
  .p-tags { padding: 0 15px 15px; }
}