/* FactRow (scripts/lib/components/fact-rows.mjs, factRows): label, answer and evidence mark,
   7px rows with hairline separators, dense on purpose. The change word (New in Forever,
   Changed) rides on the label line; the tier is an icon and the source sits in its tooltip,
   not under the fact. Wide rows read label | answer | icon, the icon column only as wide as
   the icon. Compact rows, and every row on a phone, put the label and the icon on one line
   and give the answer the full width under them. 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: 12rem minmax(0, 1fr) auto;
  grid-template-areas: "label value tier";
  gap: 2px 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
}
.wfg-fact:first-child { border-top: 0; }
.wfg-fact-label { grid-area: label; font: 400 .76rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfg-fact-value { grid-area: value; min-width: 0; color: var(--ink); }
.wfg-fact-value small:not(.wfg-cite-tip) { display: block; font: 400 .8rem/1.35 var(--font-ui); color: var(--ink-3); }
.wfg-fact-change { display: inline-flex; align-items: baseline; gap: 4px; margin-left: 6px; font: inherit; font-size: .92em; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.wfg-fact-change::before { content: ""; align-self: center; width: 6px; height: 6px; background: currentColor; }
.wfg-fact-change[data-change="new"] { color: var(--new); }
.wfg-fact-change[data-change="changed"] { color: var(--reworked); }
.wfg-fact-change[data-change="removed"], .wfg-fact-change[data-change="unchanged"] { color: var(--unchanged-text); }
.wfg-fact-value .wfg-fact-conflict { color: var(--ink-2); }
.wfg-fact-tier { grid-area: tier; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 8px; min-width: .95rem; }
.wfg-fact-untiered { font: 400 .78rem/1.3 var(--font-ui); color: var(--ink-3); }
.wfg-facts.is-compact .wfg-fact { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tier" "value value"; padding: 5px 0; }
@media (max-width: 40rem) {
  .wfg-fact { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label tier" "value value"; }
}
/* Under 20.5rem of page (320 at default size, phones at 200% text) a long path or slash list
   in an answer (the beta client's AddOns folder) breaks instead of running past the screen. */
@container page (width < 20.5rem) { .wfg-fact-value { overflow-wrap: break-word; } }

/* TL;DR rows (ops/design/tldr-accent-2026-09-30.md): run-in, so a fact costs about a line
   less. The label leads its answer on the same line, in the page accent and the UI face at
   sentence case (a third narrower than the uppercase label); a Classic or conflict note
   follows the answer after a middle dot, smaller and dimmer, instead of taking a line. The
   evidence icon sits at the top right, centered on the first line, over a float that keeps
   that line clear for it (the icon and a gap, 1.5rem), so reading order stays label, answer,
   mark. The row sets the type, so its line box is the answer's, not the body's 1.6. Phones
   step the type down once more. */
.wfg-panel[data-tldr] .wfg-facts .wfg-fact { position: relative; display: block; padding: 4px 0; font: 400 .9rem/1.38 var(--font-body); }
[data-tldr] .wfg-facts .wfg-fact::before { content: ""; float: right; width: 1.5rem; height: 1em; }
[data-tldr] .wfg-facts .wfg-fact:has(.wfg-fact-untiered)::before { width: 6.5rem; }
[data-tldr] .wfg-fact .wfg-fact-label { margin-right: .3em; font: 400 .88rem/1.38 var(--font-ui); letter-spacing: .01em; text-transform: none; color: var(--accent-text); }
[data-tldr] .wfg-fact .wfg-fact-change { margin-left: .4em; font-size: .72rem; }
[data-tldr] .wfg-fact .wfg-fact-value { display: inline; font-size: inherit; line-height: inherit; }
[data-tldr] .wfg-fact .wfg-fact-value small:not(.wfg-cite-tip) { display: inline; font-size: .76rem; line-height: 1.3; }
[data-tldr] .wfg-fact .wfg-fact-value small:not(.wfg-cite-tip)::before { content: " · "; color: var(--ink-3); }
[data-tldr] .wfg-fact .wfg-fact-tier { position: absolute; top: 6px; top: calc(4px + .5lh - .475rem); right: 0; }
@media (max-width: 40rem) {
  .wfg-panel[data-tldr] .wfg-facts .wfg-fact { font-size: .86rem; }
  [data-tldr] .wfg-fact .wfg-fact-label { font-size: .84rem; }
}