/* ========================================================================== .tp-count-summary — P1.F2.T3 (added Wave 1b, orchestrator-assigned) ©2026 Vexstorm Studios – All Rights Reserved A derived unique-user total AND the confidence composition it is made of. ══════════════════════════════════════════════════════════════════════════ FEAT-019 / §8.4 IS THE ENTIRE REASON THIS COMPONENT EXISTS, AND IT IS A STYLING REQUIREMENT, NOT ONLY A TEMPLATE ONE. "About 20 people" must never read like 20 individually verified users. The template already guarantees the composition is present — it is the same include as the total, so one cannot be rendered without the other. What CSS can still get wrong is making the composition SUBORDINATE ENOUGH TO SKIP: a 6px grey line under a 36px number is present, unreadable, and effectively a bare total. So the composition is deliberately NOT minimised. It sits beside the total at full body-text legibility, each level carries its own label and count in text, and each level is separated by a visible boundary. A reader who takes in only the large number still cannot avoid seeing that it is made of parts. ══════════════════════════════════════════════════════════════════════════ Variants --compact (inside an explorer card, where the total is one fact among several rather than the subject of the page) Elements __total __value __unit __composition __level __level-label __level-count __meta Hook [data-confidence] on __level, set by the template from common.choices.CountConfidence: VERIFIED · LIKELY · ESTIMATE · UNKNOWN ACC-004: every level renders its LABEL and its NUMBER as text. The colour on the level's rail is reinforcement and carries nothing on its own — strip all colour and the composition still reads correctly. Consumed by observations/_count_summary.html, which is rendered on observations/detail.html and, compact, in every explorer card. ========================================================================== */ .tp-count-summary { display: flex; flex-direction: column; gap: var(--tp-space-3); min-width: 0; } /* -------------------------------------------------------------------------- The total -------------------------------------------------------------------------- */ .tp-count-summary__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tp-space-2); min-width: 0; } .tp-count-summary__value { color: var(--tp-color-text-primary); font-size: var(--tp-text-3xl); font-weight: var(--tp-weight-bold); line-height: var(--tp-leading-tight); font-variant-numeric: tabular-nums; } /* A figure is never rendered without the unit it counts. */ .tp-count-summary__unit { color: var(--tp-color-text-secondary); font-size: var(--tp-text-base); } /* -------------------------------------------------------------------------- The composition — the half that makes the total honest -------------------------------------------------------------------------- */ .tp-count-summary__composition { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); min-width: 0; list-style: none; margin: 0; padding: 0; } /* Body-size text, not fine print. Every level is shown even at zero, so that "5 verified · 0 likely · 5 estimate" and "10 verified · 0 likely · 0 estimate" are visibly different rather than both reading as "10". */ .tp-count-summary__level { display: inline-flex; align-items: baseline; gap: var(--tp-space-2); padding: var(--tp-space-1) var(--tp-space-3); border: var(--tp-border-width-hairline) solid var(--tp-color-border-subtle); border-inline-start: var(--tp-border-width-thick) solid var(--tp-color-border-strong); border-radius: var(--tp-radius-sm); background-color: var(--tp-color-surface-sunken); font-size: var(--tp-text-sm); } .tp-count-summary__level-label { color: var(--tp-color-text-secondary); } .tp-count-summary__level-count { color: var(--tp-color-text-primary); font-weight: var(--tp-weight-bold); font-variant-numeric: tabular-nums; } /* Confidence rails. The label beside each one already names the level, so this is a second signal rather than the signal (ACC-004). Ordered from most to least certain: success, info, warning, neutral. */ .tp-count-summary__level[data-confidence="VERIFIED"] { border-inline-start-color: var(--tp-color-state-success); } .tp-count-summary__level[data-confidence="LIKELY"] { border-inline-start-color: var(--tp-color-state-info); } .tp-count-summary__level[data-confidence="ESTIMATE"] { border-inline-start-color: var(--tp-color-state-warning); } /* UNKNOWN contributes zero to the total and is surfaced separately (CS-D10). A neutral rail, because it is not a weaker count — it is not a count. */ .tp-count-summary__level[data-confidence="UNKNOWN"] { border-inline-start-color: var(--tp-color-border-strong); } /* -------------------------------------------------------------------------- Provenance -------------------------------------------------------------------------- */ /* How many contributions the total was derived from, and any uncounted mentions. Muted, because it is provenance rather than the figure itself — but present on every render, because a derived number without its derivation is an assertion. */ .tp-count-summary__meta { color: var(--tp-color-text-muted); font-size: var(--tp-text-sm); line-height: var(--tp-leading-normal); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Compact — an explorer card, where this is one fact among several -------------------------------------------------------------------------- */ .tp-count-summary--compact { gap: var(--tp-space-2); } /* The total drops to a heading size rather than a display size. The COMPOSITION DOES NOT SHRINK WITH IT: at card density the temptation is to reduce the breakdown to a hairline, and that is precisely the failure §8.4 forbids. */ .tp-count-summary--compact .tp-count-summary__value { font-size: var(--tp-text-xl); } .tp-count-summary--compact .tp-count-summary__unit { font-size: var(--tp-text-sm); } .tp-count-summary--compact .tp-count-summary__level { padding: 0 var(--tp-space-2); }