/* facts.css — the fact review drawer (lane V8, facts-review.js).
   Tokens only; no literal colours, sizes off the ladder, or radii. The drawer
   frame itself (width, header, close) is shell.css. */

.fr { display: flex; flex-direction: column; gap: 12px; }

/* The claim is the subject: the largest line in the drawer, quoted by weight
   rather than by quotation marks. */
.fr-claim { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink); font-weight: 600; }

.fr-meta { font-size: var(--text-xs); color: var(--muted); }
.fr-standing[data-standing="conflict"] { color: var(--danger); font-weight: 600; }
.fr-risk[data-risk="high"] { color: var(--ink); font-weight: 600; }

/* Label and value in two columns, so the eye runs down the values. */
.fr-row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline; font-size: var(--text-xs); }
/* Fact coverage (WHY P8): comparison rows down, products across, one mark per cell. */
.fr-cov-wrap { overflow-x: auto; }
.fr-cov-grid { border-collapse: collapse; font-size: var(--text-xs); }
.fr-cov-grid th { font-weight: 500; color: var(--muted); text-align: left; padding: 4px 10px 4px 0; white-space: nowrap; }
/* A product's name wraps at the column's width, never cut: the head names the column. */
.fr-cov-grid thead th { max-width: 140px; white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; }
/* The tally is words, not an identifier: the sans face, as the Brief's tallies are. */
.v2-ct-sechead .tally.fr-cov-tally { font-family: var(--sans); font-size: var(--text-xs); }
.fr-cov-grid tbody th { color: var(--body); }
.fr-cov-cell { padding: 4px 10px 4px 0; text-align: left; }
.fr-cov-mark { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.fr-cov-fact { background: var(--ok); }
.fr-cov-due { background: transparent; border: 2px solid var(--warn); }
.fr-cov-gap { background: transparent; border: 1.5px dashed var(--faint); }
.fr-cov-key { display: flex; gap: var(--sp-6); margin-top: var(--sp-2); font-size: var(--text-2xs); color: var(--muted); }
.fr-cov-key span { display: inline-flex; align-items: center; gap: 6px; }
/* Facts heard per reading (WHY P8): one stacked bar per reading, on one scale. */
.fr-hs { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin-top: var(--sp-2); }
.fr-hs-bar { flex: 1 1 0; max-width: 18px; height: 100%; display: flex; align-items: flex-end; }
.fr-hs-fill { width: 100%; display: flex; flex-direction: column; border-radius: 2px; overflow: hidden; min-height: 2px; }
.fr-hs-seg { display: block; min-height: 1px; }
.fr-hs-match { background: var(--ok); }
.fr-hs-contradicted { background: var(--danger); }
.fr-hs-unsupported { background: var(--faint); }
.fr-hs-sum { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Owned pages that disagree (WHY P8): each page's value, and the sentence under it. */
.fr-pass { display: block; margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
.fr-contra-item { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: 1px solid var(--line-light); }
.fr-contra-item:first-of-type { border-top: 0; }
.fr-contra .fr-lbl { overflow-wrap: anywhere; }
.fr-lbl { color: var(--faint); font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: .02em; }
.fr-val { color: var(--ink); overflow-wrap: anywhere; }

.fr-acts, .fr-reasons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.fr-reasons { border-top: 1px solid var(--line); padding-top: 12px; }
.fr-reasons .fr-lbl { flex-basis: 100%; }
.fr-note { margin: 0; font-size: var(--text-xs); color: var(--muted); }
/* `hidden` must win over the flex rows above (the reason row opens on Reject). */
.fr-acts[hidden], .fr-reasons[hidden], .fr-note[hidden] { display: none; }
.fr-row > .v2-btn { justify-self: start; }
/* Grouped review in the centred dialog: every fact the group takes, by source. */
.fr-groups { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow: auto; margin: 10px 0 12px; }
.fr-group { display: flex; flex-direction: column; gap: 4px; }
.fr-group-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-xs); color: var(--ink); }
.fr-group-row .sc { flex: none; color: var(--muted); }
/* Where it is true: "Every market" or the markets picked, pressed state by weight. */
.fr-where { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fr-by .sb-inp { max-width: 180px; }
.fr-hint { font-size: var(--text-xs); color: var(--faint); }
.fr-where .v2-btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.fr-row[hidden] { display: none; }
.fr-bfs { display: flex; flex-direction: column; gap: 14px; }
.fr-bf-group { display: flex; flex-direction: column; gap: 6px; }
.fr-bf { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-light); }
.fr-bf-text { font-size: var(--text-sm); color: var(--ink); }
.fr-bf-meta { grid-column: 1; font-size: var(--text-xs); color: var(--faint); }
.fr-bf-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-self: center; }
.fr-bf.editing { grid-template-columns: 1fr 150px 150px auto; align-items: center; }
.fr-bf.editing .fr-bf-acts { grid-column: 4; grid-row: 1; }