/*
 * HouseChalk — the money primitives.
 *
 * Load AFTER hc.css and role-colors.css.
 *
 * WHAT THIS IS FOR. Spec B says money is three LAYERS rather than one model —
 * variance (what moved against what was set aside), commitment (what is
 * promised) and cash (what has actually left) — plus a fourth number that is
 * not a layer at all: what it costs to change your mind later. Those need
 * shapes, they appear on at least seven pages across all three audiences, and
 * the first two pages to need them would otherwise each invent one.
 *
 * IT IS DELIBERATELY SHORT AND IT WILL GROW. Today it holds the fourth number,
 * because that is what the builder's Today and two of the four account-less
 * message types need. The layer bands land with 13-money. Growing a sheet as
 * the pages demand it is how hc.css's own promoted layer was built.
 *
 * THE ONE RULE OVER ALL OF IT, AND IT IS THE EASIEST TO BREAK:
 *
 *   BANNED — a fraction, a denominator, a percentage, or a fill that answers
 *   "how far through am I". $486,200 of $790,600 under a 61% bar tells someone
 *   standing in a half-built house how far through their money they are: the
 *   one number that makes them anxious and the one they can do nothing about.
 *
 *   REQUIRED — a figure that answers "what is left to me" or "what did this
 *   cost". $304,400 left to commit is headroom, and headroom is actionable.
 *
 * THE EXCEPTION, GENERALIZED 2026-08-10: a segmented bar (.segbar) is
 * permitted where the total is a FIXED POOL — set once, and not moved by
 * anything that happens against it — and the reader can act on the balance.
 * A construction loan qualifies: the bank sets $840,000 and stops there.
 * Contingency qualifies the same way: it is set aside once, and spending
 * against it does not grow it — going over means a new decision (add to it,
 * or cut scope), not a silently larger total. A contract sum still does not
 * qualify: a change order moves the total itself, so a fill against it is
 * progress through a finish line that keeps receding, which is exactly the
 * anxious fraction this rule bans.
 *
 * Originally named .loanbar for the one case that existed; generalized
 * rather than duplicated when 10-now needed the same shape for contingency
 * (OPEN_QUESTIONS.md, the 2026-08-10 Now redesign). Same visual ramp —
 * weight descends with certainty — with neutral tone names (.strong / .mid
 * / .faint) instead of the loan's own vocabulary (paid / due / not
 * scheduled), so a caller supplies what the tones mean rather than the
 * component assuming a loan.
 */

/* ---- The fourth number ----------------------------------------------------
   WHAT IT COSTS TO CHANGE YOUR MIND LATER. Not a layer, because it is
   prospective: nothing has moved, nothing is committed and nothing has been
   paid. It is the price of a decision that has not been made yet.

   IT IS ARITHMETIC, NOT URGENCY. Two figures side by side, the same size, in
   the same typeface, with the later one costed. No countdown, no red, no
   exclamation, and the left-hand figure is usually $0 — which is the whole
   point: deciding on time is free, and the screen says so first.

   THE DERIVATION IS ALWAYS ON THE SCREEN. .why below is not optional and not a
   tooltip. A number a builder cannot defend to his client is a number he will
   not send, and the one thing that makes this figure honest rather than
   coercive is that it says which parts are quoted and which are assumed. A
   frame that prints the figure and hides the working has turned a fact into a
   sales tactic. */
/* IT NEEDS NO PANEL AND NO RULE. Two numbers and the working behind them are
   one thought; a fill around each half divides it, and 24px of air separates
   them better than an edge does. Bare on whatever it sits on, which is what
   the surface ladder means by not reaching for a rung to make something stand
   out. */
/* BARE MEANS IT CARRIES ITS OWN HEADING. Inside a card the edge tells the
   reader where a block starts and stops and a CardHead names it; with the card
   gone both jobs fall to the block. Two large figures with no title are a
   number the reader has to reverse-engineer from its labels, and a screen of
   untitled bare blocks cannot be scanned at all. Drawn exactly as a CardHead
   draws one — same step, same weight, same supporting line — because a bare
   block and a card should not announce themselves differently. */
/* THE BLOCK'S SPACING IS THE BLOCK'S, AND IT WAS DECIDED ELEVEN TIMES. Every
   `.late-pair` in the deck typed its own `margin-top` — 16px once, 18px twice,
   20px four times, `--sp-block` three times and nothing at all once — and three
   of the four `.late-head`s had no top gap at all, so on 13 the title sat flush
   against the card above it and 48px clear of its own figures. Both are one
   decision now.

   20px IS THE PACKAGE'S OWN FIGURE for the gap above the figures, and it is the
   same gap whether what sits above is this head or a lead line inside a
   composite block. The head's `margin-bottom` owns that gap where there is a
   head, so the pair takes none — stated rather than left to margin collapsing.

   THE TOP GAP IS THE BLOCK'S HERE AND THE SCROLL'S IN THE PACKAGE.
   `LatePair.jsx` says "let the scroll's own gaps give it room"; this deck's
   `.scroll` has no gap and 1,168 inline `margin-top` declarations across 43
   pages stand in for one. That is not this component's to fix — it carries its
   own like `.section-header` does — and it is recorded as Q198. */
.late-head { margin-top: var(--sp-block); margin-bottom: 20px; }
.late-head .t {
  display: block; font-size: var(--text-lg); font-weight: 700;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-title);
  color: var(--on-surface);
}
.late-head .p {
  margin: var(--sp-tight) 0 0; font-size: var(--text-sm);
  line-height: var(--leading-body); color: var(--on-surface-variant);
}

.late-pair { display: flex; gap: 24px; margin-top: 20px; }
.late-head + .late-pair { margin-top: 0; }
.late-pair > * { flex: 1; min-width: 0; }
.late-fig .k {
  display: block; font-size: var(--text-2xs); font-weight: 600; color: var(--on-surface-dense); line-height: 1.35;
}
.late-fig .v {
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-size: var(--text-xl);
  /* The token, not the -0.4px literal it replaced — see .screen-title, Q247.
     Line 96 above already reached for it; this rule typed the number. */
  letter-spacing: var(--tracking-title); line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* The free one, and it is on the LEFT, because deciding on time is the ordinary
   case and the screen reads left to right. A layout that leads with the penalty
   is arguing rather than informing. THE VALUE CARRIES THE COLOR AND THE PANEL
   IS GONE: this is a figure, not a record — two numbers and the working behind
   them are one thought, and a fill around each half divides it in two. */
/* THE VALUE, AND ONLY THE VALUE. `.k` took the tone too, and the label is the
   family's one caption treatment — 12px semibold sentence case, the same
   `Fact`, `KeyValue` and `FigureTrio` draw. `colors-status` lists the five
   places a color belongs: a chip's text, an eyebrow, a glyph, a figure's value
   or a dot. A caption naming a figure is none of them, and `LatePair.jsx` tones
   the value alone. */
.late-fig.free .v { color: var(--success-deep); }
/* The costed one. Amber — a clock is running — and NOT terracotta. Terracotta
   is a genuine clash; a price for deciding later is a fact about a date, and
   coloring it as a conflict tells the reader they have already done something
   wrong. */
.late-fig.costed .v { color: var(--amber-deep); }

/* The working. Quiet, small, and it names what is quoted and what is assumed —
   in that order, because the assumption is the part a client will push on. */
.late-why {
  margin-top: 12px;
  font-size: var(--text-xs); line-height: var(--leading-body);
  color: var(--on-surface-dense);
}
.late-why b { font-weight: 600; color: var(--on-surface); }

/* ---- The segmented bar -----------------------------------------------------
   Quantities that sum to a fixed pool, shown as one bar rather than a list
   somebody has to add up themselves. The segments sum to the whole, so
   there is no empty remainder and the track never shows — a gap would read
   as money not spoken for, and every dollar of a fixed pool is.

   Weight descends with certainty by convention (.strong is the most settled
   tone, .faint the least), but the component doesn't know what "settled"
   means for a given caller — a loan calls its strongest tone "paid",
   contingency calls it "committed" — and a caller is free to use two tones
   instead of three, as contingency does. */
/* NO TRACK. The segments sum to the whole, so there is no remainder for a
   track to show — and a ground behind them is a fill waiting for that
   assertion to be relaxed. `SegBar.jsx`: "a quantity with an unspoken-for gap
   is a progress fill wearing segments". The declaration was invisible only
   BECAUSE the sum held, which is the wrong reason for a rule to pass. */
.segbar { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; }
.segbar i { display: block; height: 100%; }
/* THE RAMP IS BUILT ON --primary AND NOT ON --primary-flat, and a browser
   decided that. The measurement below was taken on the sage palette; the
   argument survives the move to Congress Blue and the arithmetic is better,
   because #0B4B88 and #33689C are further apart in lightness than the two
   greens were. Re-measure before quoting a step from it.
   --primary-flat is the token this bar used when it was one
   flat fill, and it cannot carry three steps: measured, in DARK it resolves
   to the SAME color as --primary, and --primary-deep is 1.26:1 from either.
   The emerald ramp that has real range in light — 12.04 / 6.59 / 2.94 for
   deep / primary / flat — collapses in dark, so three tones mixed off the
   flat token came out at 1.19:1 against the card in light and invisible.
   --primary has room at both ends, and mixing TOWARD --surface-card is what
   makes one declaration serve both themes: the accent and the ground flip
   together, so the ramp re-derives itself. */
.segbar i.strong { background: var(--primary); }
.segbar i.mid    { background: color-mix(in srgb, var(--primary) 62%, var(--surface-card)); }
.segbar i.faint  { background: color-mix(in srgb, var(--primary) 30%, var(--surface-card)); }
/* A hairline between segments in the card's own ground, so two adjacent tones
   cannot fuse at 10px. It also makes the bar read as quantities butted
   together rather than one fill that fades.

   KEPT DELIBERATELY WHEN THE KEY MOVED TO THE PACKAGE'S SHAPE, and measured
   rather than argued. `SegBar.jsx` has no hairline, and absence is not a rule
   — so the question was whether the 62/30 ramp separates the tones well enough
   on its own. It does not. It EVENS them rather than widening them, and the
   weakest boundary stays under 2:1 in both themes:

     light   55/26  strong:mid 2.88  mid:faint 1.81      62/30  2.45 / 1.96
     dark    55/26  strong:mid 2.10  mid:faint 1.72      62/30  1.85 / 1.81

   At 1.81:1 two 10px bands butted together read as one band. The key carries
   the meaning either way — that is why sub-3:1 steps are acceptable here at
   all — but the bar still has to read as three quantities, and this is the
   only thing making it. */
.segbar i + i { box-shadow: inset 1.5px 0 0 var(--surface-card); }

/* The key. Swatch, what it is, what it is worth — the figures live here
   rather than in a kv pair above, because the bar and its numbers being the
   same object is the point.

   ONE ROW PER SEGMENT, AND THE FIGURE OWNS THE RIGHT EDGE. `SegBar.jsx`'s
   shape, adopted 2026-09-06 (`docs/PACKAGE_ANATOMY_AUDIT.md`). This was three
   equal COLUMNS with the label stacked over its figure and two lines of label
   height reserved on every one of them, which cost the card a line of height it
   did not need and broke the one thing a key is for: three figures in three
   columns are compared left to right, across labels of different lengths, when
   the reader's question is how the three shares divide one pool. Stacked as
   rows on one right edge they compare vertically, tabular, the way every other
   run of money in this product already reads — and the label stops needing a
   reserved second line because it now has the row's whole width.

   IT IS THE `AnswerRow` RULE, ONE COMPONENT OVER. "In a run, the answer owns
   the right edge" is `guidelines/data-hierarchy`'s, and a segment's amount is
   the answer to what its label names. */
.segkey { display: grid; gap: var(--sp-8); margin-top: 16px; }
.segkey > div {
  display: flex; align-items: center; gap: var(--sp-8);
  font-size: var(--text-sm); line-height: var(--leading-body);
}
/* THE LABEL IS THE ROW, and it takes the body step rather than the caption
   one. It was --text-2xs/600/--on-surface-dense, which is the family's caption
   treatment — right when the label sat ABOVE its figure and was a caption for
   it, wrong now that the two are side by side at one baseline. Beside its own
   figure a label is not a caption naming it; it is the other half of the line.
   Both halves take the page's ink, and the figure carries the weight. */
.segkey .k { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-8); }
/* The swatch. 10px and a small radius rather than an 8px disc: at this size a
   rounded square reads as a sample of the band it names, where a dot reads as
   the status mark it is not. */
.segkey .k::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 3px;
}
.segkey .strong .k::before { background: var(--primary); }
.segkey .mid .k::before    { background: color-mix(in srgb, var(--primary) 62%, var(--surface-card)); }
.segkey .faint .k::before  { background: color-mix(in srgb, var(--primary) 30%, var(--surface-card)); }
/* The figure. Tabular is not optional in a column somebody reads down. */
.segkey .v {
  flex: none; font-weight: 500;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}