/* =========================================================
   Component — Fact rows

   The label/value block behind <x-legal.facts>. It lived inside
   pages/legal.css until «عن أثر» needed the same rows: the about
   page states who is responsible for Athar, and the only correct
   source for that is config/legal.php, so it prints the same
   component and had to be able to reach the same rules.

   Label and value in two columns on a wide screen, stacked on a
   phone. Values read as data, not as prose: the Latin figure face
   and a tighter line, so a register number and a date are legible
   at a glance in either language.
   ========================================================= */
.legal-facts {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.legal-facts__row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
}

.legal-facts__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.legal-facts__value {
  margin: 0;
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* An unresolved fact. Deliberately unlovely: dashed, muted, and set
   in the figure face so it never passes for a sentence somebody
   wrote. It is a hole in a legal document, and it should look like
   one until .env fills it. */
.legal-gap {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-block-end: 1px dashed var(--color-warning);
  padding-block-end: 2px;
}

@media (max-width: 640px) {
  .legal-facts__row {
    grid-template-columns: 1fr;
  }
}