/* ----------------------------------------------------------------- facts
 * templates/ui/facts.html. Label-value rows under a head: the head in the
 * h3 role over a graphite rule, cloud hairlines between the rows, the last
 * row closed by ink (WEB-TAB-02, ENT-417). Labels graphite, values
 * ink; figures right-aligned in table numerals. The pair sits on the page's
 * two halves (WEB-LAY-11). The statistics tables of the
 * security pages (.hv-facts, tables with a caption) take the same look. */
@layer ui {
.facts-list { min-width: 0; }
.facts-list__head, .hv-facts__title { margin: 0; padding-bottom: var(--s-2); font-size: var(--t-h3); color: var(--text-primary);
  border-bottom: 1px solid var(--rule-medium); text-align: left; }
.facts-list__rows { margin: 0; }
.facts-list__row { display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 3fr); column-gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-faint); font-size: var(--t-small); }
.facts-list__row:last-child { border-bottom-color: var(--rule-strong); }
.facts-list__row dt { margin: 0; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; hyphens: manual; }
.facts-list__row dd { margin: 0; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.facts-list--num .facts-list__row dd { text-align: right; font-variant-numeric: tabular-nums; }
/* A negative change value keeps the sign colour (DAT-FSE-11,
   services/sign_color.py). */
.facts-list__row dd.is-down { color: var(--corum-dark); }

.facts-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--half-gap);
  row-gap: var(--gap-topic); align-items: start; margin: 0 0 var(--gap-topic); }

/* The caption of a statistics table: the same head as a facts list, a
   size smaller where four stand in a row. */
.hv-stats .hv-facts__title { font-size: var(--t-small); }

@media (max-width: 720px) {
  .facts-pair { grid-template-columns: minmax(0, 1fr); }
  .facts-list__row { grid-template-columns: 9rem minmax(0, 1fr); }
}
}  /* @layer ui */