/* Chip de menção a regra e o cartão que ele abre. Compartilhado entre
   /social e /testes — o mesmo recurso não pode ter duas aparências. */
.rf-regra {
  display: inline; cursor: pointer; font-weight: 700;
  color: #00702B; background: #E9F7EE; border-radius: 6px;
  padding: 0 5px; text-decoration: none; white-space: nowrap;
}
.rf-regra:hover, .rf-regra:focus { background: #D6F0E0; outline: none; }
.rf-regra:focus-visible { box-shadow: 0 0 0 2px #009C3B; }

.rf-regra-card {
  position: absolute; z-index: 100200; width: 340px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--border, #E2DDD5); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18); font-family: var(--font);
  overflow: hidden;
}
.rf-regra-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: #F3F7F4;
  border-bottom: 1px solid var(--border, #E2DDD5);
  font-size: 12.5px; font-weight: 800; color: #16301C;
}
.rf-regra-link { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #009C3B; text-decoration: none; }
.rf-regra-link:hover { text-decoration: underline; }
/* Teto de altura: artigo do livro pode ser longo, e o cartão não deve virar
   uma página. Quem quiser o texto inteiro tem o link para o livro. */
.rf-regra-bd {
  padding: 12px 13px; font-size: 13px; line-height: 1.6;
  color: var(--t2, #4A5A50); max-height: 260px; overflow-y: auto;
}
.rf-regra-vazio { color: var(--t3, #7E8B84); font-style: italic; }