/* ===========================================================================
   recommendation-view.css — o ESTILO ÚNICO de uma Recommendation
   (CARD-ARCH-001)
   ===========================================================================

   🎯 Par do `recommendation-view.js`. Sem ele a unificação seria parcial:
   os dois documentos desenhariam a mesma árvore e ainda assim
   apresentariam a recomendação diferente, que é a mesma duplicação com
   outro nome.

   ⚖️ CORES POR `currentColor`, e não valores fixos. O Portal segue o
   tema do sistema e o documento do GFT é escuro — um `rgba(255,255,255)`
   funcionaria só no segundo, e um `#333` só no primeiro. Derivar da cor
   do texto é o que faz o MESMO arquivo servir aos dois.

   ⚠️ A borda é LATERAL, não caixa fechada: a lista costuma trazer várias
   frases curtas, e caixas empilhadas dobrariam a altura sem acrescentar
   informação.

   📌 `--informacao` é a base, e o seletor sem tipo repete o mesmo valor:
   um `tipo` que o interpretador invente amanhã continua legível, com a
   borda neutra, em vez de aparecer sem estilo nenhum. */

.gft-recomendacoes {
  margin: 0 0 0.75rem;
}

.gft-recomendacoes__titulo {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.gft-recomendacoes__lista {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.gft-rec {
  padding: 0.45rem 0.7rem;
  border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  border-radius: 0 0.25rem 0.25rem 0;
}

.gft-rec--atencao {
  border-left-color: color-mix(in srgb, #d9a441 80%, currentColor);
  background: color-mix(in srgb, #d9a441 10%, transparent);
}

.gft-rec--acao {
  border-left-color: color-mix(in srgb, #4c9aff 80%, currentColor);
  background: color-mix(in srgb, #4c9aff 10%, transparent);
}

.gft-rec__cabecalho {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.gft-rec__tipo {
  flex: none;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.gft-rec__titulo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

/* 🎯 Quando o título É a ação, ele carrega o peso: é a linha que o
   jogador precisa ler primeiro (CARD-RC3-001). */
.gft-rec__titulo--acao {
  font-weight: 700;
}

/* O contexto explica o que aconteceu — importa, mas depois. */
.gft-rec__contexto {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* 💡 O motivo é argumento para agir, não rodapé de auditoria — por isso
   não usa o cinza da evidência. */
.gft-rec__motivo {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.9;
}

.gft-rec__descricao {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ⚠️ Campos que este componente ainda não conhece. Discretos de
   propósito: eles existem para não serem PERDIDOS, não para competir com
   o texto da recomendação. */
.gft-rec__extras {
  margin: 0.25rem 0 0;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  opacity: 0.6;
}