/* =========================================================================
   BALVOX — Página evergreen "Business Architecture Layer"
   Carrega DEPOIS de styles/legal.css e só define o que ela não cobre:
   link de volta, citação verbatim de norma, tabela, selo de grau de fonte
   e lista de referências. Estrutura, TOC e prosa vêm de legal.css.
   ========================================================================= */

/* ===== Colunas do grid =====
   Item de grid tem min-width:auto por padrão, ou seja, se recusa a encolher
   abaixo do min-content do conteúdo. Como .bal-table tem min-width:520px, isso
   empurrava a largura da PÁGINA para 587px e criava rolagem horizontal no
   mobile (o overflow-x:auto do .bal-tablewrap nunca chegava a agir).
   min-width:0 devolve o controle ao contêiner de rolagem. */
.bal__col { min-width: 0; }
.bal__col .legal-prose { min-width: 0; max-width: 100%; }

/* ===== Voltar ===== */
.bal__back {
  /* flex (não inline-flex): precisa ocupar a própria linha, senão o
     .legal__kicker seguinte sobe e colide com ele. width limita o hover. */
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cinza-bruma);
  transition: color 200ms var(--ease-out);
}
.bal__back:hover { color: var(--color-teal-abismo); }

/* ===== Citação verbatim de norma ===== */
.bal-quote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-teal);
  background: color-mix(in oklab, var(--color-teal) 5%, transparent);
}
.bal-quote p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-cinza-fumo);
  font-style: italic;
  text-wrap: pretty;
}
.bal-quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--color-cinza-bruma);
}
.bal-quote cite a {
  color: var(--color-teal-abismo);
  border-bottom: 1px solid color-mix(in oklab, var(--color-teal) 40%, transparent);
}

/* ===== Tabela — rola dentro de si, nunca faz o body rolar lateral ===== */
.bal-tablewrap {
  margin: var(--space-4) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(58, 63, 68, 0.14);
}
.bal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}
.bal-table th,
.bal-table td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(58, 63, 68, 0.12);
}
.bal-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cinza-bruma);
  background: color-mix(in oklab, var(--color-cinza-pedra) 8%, transparent);
  white-space: nowrap;
}
.bal-table td { color: var(--color-cinza-bruma); }
.bal-table tbody tr:last-child td { border-bottom: 0; }
.bal-table strong { color: var(--color-cinza-fumo); font-weight: 600; }
.bal-table a {
  color: var(--color-teal-abismo);
  border-bottom: 1px solid color-mix(in oklab, var(--color-teal) 45%, transparent);
}

/* ===== Selo de grau da fonte ===== */
.bal-grade {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
  border: 1px solid currentColor;
}
.bal-grade--norma  { color: var(--color-teal-abismo); }
.bal-grade--pares  { color: var(--color-cobre); }
.bal-grade--corpo  { color: var(--color-cinza-bruma); }
.bal-grade--vendor { color: var(--color-cinza-pedra); }

/* ===== Código inline (usado nas tabelas de consulta) ===== */
.legal-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1rem 0.3rem;
  background: color-mix(in oklab, var(--color-cinza-pedra) 12%, transparent);
  border-radius: 2px;
}

/* ===== Referências ===== */
.bal-refs__group {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-abismo) !important;
  margin: var(--space-5) 0 var(--space-2) !important;
}
.bal-refs {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.bal-refs li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-cinza-bruma);
  scroll-margin-top: 96px;
}
.bal-refs__n {
  flex: none;
  min-width: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-teal-abismo);
  padding-top: 0.15rem;
}
.bal-refs__t { min-width: 0; }
.bal-refs__t a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-teal-abismo);
  border-bottom: 1px solid color-mix(in oklab, var(--color-teal) 35%, transparent);
  word-break: break-all;
}
.bal-refs__t a:hover { color: var(--color-teal); }

/* ===== Tema escuro ===== */
[data-theme="dark"] .bal-tablewrap { border-color: var(--hair); }
[data-theme="dark"] .bal-table th,
[data-theme="dark"] .bal-table td { border-bottom-color: var(--hair); }
[data-theme="dark"] .bal-table th { background: color-mix(in oklab, var(--color-cinza-pedra) 14%, transparent); }
[data-theme="dark"] .bal-quote { background: color-mix(in oklab, var(--color-teal) 9%, transparent); }