/* =============================================================================
   .fact — one label/value atom, replacing .kv, .stats/.stat and .d-box
   PR 3.  Ships with all three old selectors aliased, so existing markup keeps
   working and modules migrate one at a time.
   ========================================================================== */

/* ---------- the atom ---------- */

.fact            { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact > .k       { font-size: 9.5px; font-weight: 600; letter-spacing: .07em;
                   text-transform: uppercase; color: var(--ink-3); }
.fact > .v       { font-size: 12.5px; font-weight: 400; color: var(--ink);
                   line-height: 1.5; }

/* numbers, ids, money, timestamps — compared down a column */
.fact > .v.mono  { font-family: 'IBM Plex Mono', ui-monospace, monospace;
                   font-size: 12px; }

/* a value the user cannot change */
.fact.is-ro > .k::after { content: ' · read-only'; font-weight: 500;
                          letter-spacing: 0; text-transform: none; opacity: .75; }

/* spans the full width of its grid */
.fact.is-wide    { grid-column: 1 / -1; }

/* ---------- containers ---------- */

/* replaces .kv — the record field grid */
.facts           { display: grid; gap: 13px 16px;
                   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* replaces .stats — the headline figure row */
.fact-tiles      { display: grid; gap: 12px;
                   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fact-tiles .fact{ background: var(--surface); border: 1px solid var(--line);
                   border-radius: var(--r-sm); padding: 12px 13px; gap: 5px; }
.fact-tiles .fact > .v { font-family: 'Space Grotesk', Inter, sans-serif;
                         font-size: 22px; font-weight: 600; line-height: 1.1; }

/* a tile whose figure was computed, not typed. Recessed ground + dashed
   border + the ⌁ mark. See 05-decision-log.md §6. */
.fact-tiles .fact.is-derived { background: var(--bg);
                               border: 1px dashed var(--ink-3); }
.fact-tiles .fact.is-derived > .k::before { content: '⌁ '; color: var(--copper);
                               font-family: 'IBM Plex Mono', monospace; }

/* tone dot, for tiles that carry a health signal */
.fact-tiles .fact > .v::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: var(--r-pill); margin-right: 7px; vertical-align: middle;
  background: var(--tone, transparent);
}
.fact.tone-ok   { --tone: var(--green); }
.fact.tone-warn { --tone: var(--amber); }
.fact.tone-bad  { --tone: var(--red);   }

/* replaces .d-box — a boxed prose block inside a record panel */
.fact-box        { background: var(--bg); border: 1px solid var(--line);
                   border-radius: var(--r); padding: 14px 16px; }
.fact-box > .k   { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                   text-transform: uppercase; color: var(--ink-3);
                   margin: 0 0 9px; }
.fact-box > p    { margin: 0; font-size: 13px; line-height: 1.65; }

/* the buyer's own words — the single most valuable block on an inquiry */
.fact-box.is-quote { border-left: 2px solid var(--copper); }
.fact-box.is-quote > .k { color: var(--copper); }


/* =============================================================================
   ALIASES — delete each one only after its module has migrated.
   These make the old markup adopt the new look with zero edits, so PR 3 can
   ship before the module PRs and nothing regresses in between.
   ========================================================================== */

/* .kv → .facts + .fact */
.kv              { display: grid; gap: 13px 16px;
                   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kv div          { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv div > span   { display: block; font-size: 9.5px; font-weight: 600;
                   letter-spacing: .07em; text-transform: uppercase;
                   color: var(--ink-3); margin-bottom: 0; }
.kv div > strong { font-size: 12.5px; font-weight: 400; color: var(--ink);
                   line-height: 1.5; }

/* .stats/.stat → .fact-tiles + .fact
   The old .stat carried a 3px --primary left border on EVERY tile, which made
   a row of four read as four equally urgent things. The new tile uses a tone
   dot instead, so only the tiles that mean something are coloured. */
.stats           { display: grid; gap: 12px;
                   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                   margin-bottom: 18px; }
.stat            { background: var(--surface); border: 1px solid var(--line);
                   border-left-width: 1px;          /* was 3px --primary */
                   border-radius: var(--r-sm); padding: 12px 13px;
                   box-shadow: var(--e1); }

/* .d-box → .fact-box */
.d-box           { background: var(--bg); border: 1px solid var(--line);
                   border-radius: var(--r); padding: 14px 16px; }
.d-box h4        { margin: 0 0 9px; font-size: 10.5px; font-weight: 700;
                   letter-spacing: .09em; text-transform: uppercase;
                   color: var(--ink-3); }
.d-box p         { margin: 0; font-size: 13px; line-height: 1.65; }