/* FactRow (scripts/lib/components/fact-rows.mjs, factRows): label, answer, evidence tag and
   source, 7px rows with hairline separators, dense on purpose. The compact mode stacks the
   label above the answer and tightens the rows. The quick facts v2 answer box keeps its own
   styles in styles.css. */

.wfg-facts { margin: 0; padding: 0; list-style: none; }
.wfg-fact { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--hairline); }
.wfg-fact:first-child { border-top: 0; }
.wfg-fact-label { font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-fact-value { min-width: 0; color: var(--ink); }
.wfg-fact-value small { display: block; font: 400 .8rem/1.35 var(--font-ui); color: var(--ink-3); }
.wfg-fact-value .wfg-fact-change[data-change="new"] { color: var(--new); }
.wfg-fact-value .wfg-fact-change[data-change="changed"] { color: var(--reworked); }
.wfg-fact-value .wfg-fact-conflict { color: var(--ink-2); }
.wfg-fact-tier { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.wfg-fact-untiered { font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); }
.wfg-fact-source { min-height: 1.75rem; display: inline-flex; align-items: center; font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); text-decoration-color: var(--line-control); }
.wfg-fact-source:hover { color: var(--ink); }
.wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr) auto; padding: 5px 0; }
.wfg-facts.is-compact .wfg-fact-label { grid-column: 1 / -1; }
/* Phones stack label, answer and tier so the answer keeps the full width. */
@media (max-width: 40rem) {
  .wfg-fact, .wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr); }
  .wfg-fact-tier { justify-content: flex-start; }
}