/* ============================================================
   finance.components.css · Grower Finance & Reliability layer (M5)
   Extends Atlas; loaded LAST in shell.html, after the shipped
   supply.tokens.css → supply.components.css → shell.chrome.css and
   the other *.components.css surfaces. ONLY new .fn-* finance classes
   live here — the SCORE HERO + reliability BAND LADDER, the self-only
   VALUE lockup, per-pillar REASONS, the band-only SHARE card, referral
   partner cards, the record-only ledger, and the M5 consent gate.
   Every value resolves to an existing supply.tokens.css var(--...);
   no new colour / font / radius / shadow is minted.
   NOTE: .btn.danger is intentionally NOT defined here — it ships live
   in export.components.css (the prototype defined it only because that
   offline file did not load export.components.css).
   ============================================================ */

/* ============================================================
   FINANCE SECTION shell — the tab body. A calm single column
   (grower tempo), max width so figures don't sprawl on desktop.
   ============================================================ */
.fn-wrap{ display:flex; flex-direction:column; gap:var(--s5); width:min(680px,100%); }

/* a section label echoing .ppsec .seclbl (consistent across grower surfaces) */
.fn-seclbl{ display:flex; align-items:center; gap:.5rem; }
.fn-seclbl .st{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold); }
.fn-seclbl .ln{ flex:1; height:1px; background:var(--line); }

/* a small legal/honest-data note — calm, neutral, never alarming.
   Variant .priv (lock / self-only), .verified (licence), plain (record). */
.fn-note{ display:flex; gap:.55rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface2);
  padding:.6rem .75rem; font-size:var(--fs-xs); color:var(--ink2); line-height:1.5; }
.fn-note .ic{ width:16px; height:16px; flex:0 0 16px; margin-top:1px; color:var(--muted); display:inline-flex; }
.fn-note .ic svg{ width:100%; height:100%; display:block; }
.fn-note b{ color:var(--ink); font-weight:var(--fw-semi); }
.fn-note.priv{ background:var(--pv-private-bg); border-color:var(--pv-private-ln); color:var(--ink2); }
.fn-note.priv .ic{ color:var(--pv-private); } .fn-note.priv b{ color:var(--pv-private); }
.fn-note.verified{ background:var(--pv-verified-bg); border-color:var(--pv-verified-ln); }
.fn-note.verified .ic{ color:var(--pv-verified); } .fn-note.verified b{ color:var(--pv-verified); }

/* ============================================================
   CONSENT GATE (state A) — M5 scoring consent, SEPARATE from M6.
   Reuses the farm layer's .fr-empty hero shape + .fr-pdpa banner so
   the consent voice is identical to register/disclosure — but the
   copy + a "separate consent" ribbon make clear this is a NEW opt-in.
   ============================================================ */
.fn-gate{ align-self:center; width:min(560px,100%); display:flex; flex-direction:column; gap:var(--s4); }
.fn-gatehero{ text-align:center; border:1.5px dashed var(--brand); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 35%, var(--surface)));
  padding:var(--s6) var(--s5); display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.fn-gatehero .fn-lock{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); color:var(--brand-ink); border:1.5px solid var(--brand); }
.fn-gatehero .fn-lock svg{ width:28px; height:28px; display:block; }
.fn-gatehero h2{ margin:0; font-size:var(--fs-xl); font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--brand-ink); }
.fn-gatehero p{ margin:0; color:var(--brand2); font-size:var(--fs-sm); max-width:46ch; line-height:1.55; }
/* the "this is a new, separate consent" ribbon — sits above the hero */
.fn-newconsent{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; align-self:stretch;
  font-size:var(--fs-xs); color:var(--pv-private); line-height:1.4;
  background:var(--pv-private-bg); border:1px solid var(--pv-private-ln);
  border-radius:var(--r); padding:.5rem .8rem; }
.fn-newconsent .g{ font-weight:var(--fw-x); }
.fn-newconsent b{ font-weight:var(--fw-bold); }
/* the "what we use / don't use" bullets inside the gate */
.fn-uses{ align-self:stretch; text-align:left; display:flex; flex-direction:column; gap:.45rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.8rem .9rem; }
.fn-uses .ur{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; }
.fn-uses .ur .c{ flex:0 0 18px; width:18px; height:18px; display:inline-flex; margin-top:1px; }
.fn-uses .ur .c svg{ width:100%; height:100%; display:block; }
.fn-uses .ur.yes .c{ color:var(--pv-verified); }
.fn-uses .ur.no  .c{ color:var(--pv-private); }
.fn-gate .fn-gateact{ display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.fn-gate .fn-gateact .btn.full{ max-width:360px; }
.fn-withdrawlink{ font-size:var(--fs-xs); color:var(--muted); }
.fn-withdrawlink button{ border:0; background:transparent; color:var(--brand2); cursor:pointer; font:inherit; text-decoration:underline; padding:0; }

/* ============================================================
   SCORE HERO (state B) — the engine of flywheel #5.
   ============================================================ */
.fn-hero{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; }
.fn-herohead{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3);
  padding:var(--s5) var(--s5) var(--s3); }
.fn-herohead .hh-eyebrow{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:var(--fw-bold); }
.fn-herohead .hh-ttl{ font-size:var(--fs-lg); font-weight:var(--fw-x); letter-spacing:-.01em; color:var(--ink); margin-top:.15rem; }
/* a tiny "indicator, not a bureau score" tag */
.fn-indicator{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  color:var(--ink2); background:var(--surface2); border:1px solid var(--line2); border-radius:var(--r-pill); padding:.14rem .55rem; }

/* ---- the BAND LADDER — certainty-as-material ----
   4 ascending rungs (thin_file → building → steady → strong). The
   active rung is solid brass + ring + label; the rest are faint
   outlines. thin_file active = NEUTRAL (private/lock), never red. */
.fn-ladder{ display:flex; align-items:flex-end; gap:var(--s2); padding:0 var(--s5);
  height:128px; }
.fn-rung{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.4rem; min-width:0; height:100%; }
.fn-rung .fn-bar{ width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--surface2); border:1.5px solid var(--line2); border-bottom:0;
  transition:background .16s, border-color .16s; }
.fn-rung[data-h="0"] .fn-bar{ height:30%; }
.fn-rung[data-h="1"] .fn-bar{ height:48%; }
.fn-rung[data-h="2"] .fn-bar{ height:70%; }
.fn-rung[data-h="3"] .fn-bar{ height:100%; }
.fn-rung .fn-rlab{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); text-align:center; line-height:1.2; white-space:nowrap; }
/* below-active rungs read as "achieved" — soft brass tint */
.fn-rung.below .fn-bar{ background:var(--brand-soft); border-color:var(--brand-soft); }
/* the active rung — solid brass + an inset ring echoing the map cell-ring */
.fn-rung.on .fn-bar{ background:var(--brand); border-color:var(--brand2);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 38%, transparent), 0 2px 8px color-mix(in srgb,var(--brand) 35%, transparent); }
.fn-rung.on .fn-rlab{ color:var(--brand-ink); font-weight:var(--fw-bold); }
/* thin_file active = neutral private treatment (NOT the brass ascent, NOT red) */
.fn-ladder.thin .fn-rung.on .fn-bar{ background:var(--pv-private); border-color:var(--pv-private);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 34%, transparent); }
.fn-ladder.thin .fn-rung.on .fn-rlab{ color:var(--pv-private); }
.fn-ladder.thin .fn-rung.below .fn-bar{ background:var(--surface2); border-color:var(--line2); }

/* ---- the active band name + self-only value ---- */
.fn-bandline{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; padding:var(--s4) var(--s5) 0; }
.fn-bandname{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.fn-bandname .bn-k{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:var(--fw-bold); }
.fn-bandname .bn-v{ font-size:var(--fs-2xl); font-weight:var(--fw-x); letter-spacing:-.02em; line-height:1; color:var(--brand-ink); }
.fn-ladder.thin ~ * .fn-bandname .bn-v, .fn-hero.thin .fn-bandname .bn-v{ color:var(--pv-private); }
.fn-bandname .bn-sub{ font-size:var(--fs-xs); color:var(--muted); }

/* the value lockup — self-only, mono, NEVER leaves the owner */
.fn-value{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.fn-value .vnum{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-2xl);
  font-weight:var(--fw-bold); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.fn-value .vnum .vu{ font-size:var(--fs-md); color:var(--muted); font-weight:var(--fw-semi); }
.fn-value .vself{ font-size:var(--fs-2xs); }   /* a .pv.private chip lives here */

/* hero meta + refresh */
.fn-herometa{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s4) var(--s5) var(--s5); margin-top:var(--s4); border-top:1px solid var(--line); }
.fn-herometa .mm{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.5; }
.fn-herometa .mm .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink2); }
.fn-herometa .btn .ic{ width:15px; height:15px; display:inline-flex; }
.fn-herometa .btn .ic svg{ width:100%; height:100%; display:block; }
.fn-refresh.spin .ic{ animation:fnspin .8s linear infinite; }
@keyframes fnspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .fn-refresh.spin .ic{ animation:none; } }

/* ============================================================
   REASONS — per-pillar, direction ▲/▼/– + weight + sub-score meter.
   Reuses .provledger row idiom; the glyph badge encodes direction
   without relying on hue (▲ up / ▼ down / – flat).
   ============================================================ */
.fn-reasons{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.fn-reason{ display:grid; grid-template-columns:30px 1fr auto; gap:var(--s3); align-items:center;
  padding:.7rem var(--s4); border-top:1px solid var(--line); }
.fn-reason:first-child{ border-top:0; }
.fn-dir{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:1rem; font-weight:var(--fw-x); border:1px solid transparent; }
.fn-dir.up{ color:var(--pv-verified); background:var(--pv-verified-bg); border-color:var(--pv-verified-ln); }
.fn-dir.down{ color:var(--pv-est); background:var(--pv-est-bg); border-color:var(--pv-est-ln); }
.fn-dir.flat{ color:var(--pv-stale); background:var(--pv-stale-bg); border-color:var(--pv-stale-ln); }
.fn-rmain{ min-width:0; }
.fn-rmain .rn{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink); }
.fn-rmain .rmeter{ display:flex; gap:2px; margin-top:.35rem; }
.fn-rmain .rmeter i{ height:4px; flex:1; border-radius:2px; background:var(--line2); }
.fn-rmain .rmeter i.on{ background:var(--brand); }
.fn-reason .rw{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; }
@media (max-width:480px){
  .fn-reason{ grid-template-columns:30px 1fr; }
  .fn-reason .rw{ grid-column:2; justify-self:start; margin-top:.2rem; }
}

/* improve guidance — calm, brand-soft, actionable (per low pillar) */
.fn-improve{ display:flex; flex-direction:column; gap:.6rem;
  border:1px solid var(--brand); border-radius:var(--r-lg);
  background:linear-gradient(100deg, var(--brand-soft), color-mix(in srgb,var(--brand-soft) 50%, var(--surface)));
  padding:var(--s4) var(--s5); }
.fn-improve .ih{ display:flex; align-items:center; gap:.5rem; }
.fn-improve .ih .ic{ width:20px; height:20px; flex:0 0 20px; color:var(--brand-ink); display:inline-flex; }
.fn-improve .ih .ic svg{ width:100%; height:100%; display:block; }
.fn-improve .ih b{ font-size:var(--fs-md); color:var(--brand-ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fn-improve ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; }
.fn-improve li{ font-size:var(--fs-sm); color:var(--brand2); line-height:1.45; }
.fn-improve li b{ color:var(--brand-ink); font-weight:var(--fw-semi); }

/* ============================================================
   ACTION LAUNCHERS — referral / ledger / share open as drawers
   (matching the Passport farm-wizard rhythm). Rows, not dense cards.
   ============================================================ */
.fn-actions{ display:flex; flex-direction:column; gap:var(--s3); }
.fn-launch{ display:flex; align-items:center; gap:var(--s4); text-align:left; width:100%; cursor:pointer; font:inherit;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:var(--s4) var(--s4);
  box-shadow:var(--sh-sm); transition:border-color .12s, background .12s; }
.fn-launch:hover{ border-color:var(--brand); background:var(--surface2); }
.fn-launch .li{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand); }
.fn-launch .li svg{ width:22px; height:22px; display:block; }
.fn-launch .lmain{ flex:1; min-width:0; }
.fn-launch .lmain b{ display:block; font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fn-launch .lmain span{ display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:2px; line-height:1.4; }
.fn-launch .lcount{ flex:0 0 auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-sm);
  color:var(--ink2); font-weight:var(--fw-bold); background:var(--surface2); border:1px solid var(--line2);
  border-radius:var(--r-pill); padding:.1rem .55rem; }
.fn-launch .larrow{ flex:0 0 auto; color:var(--muted); font-size:1.1rem; }

/* ============================================================
   SHARE-BAND CARD (component E) — band-only, verified by eye.
   Host = order detail (Code wires); here it lives in a drawer +
   a read-only "my shares" list in the Passport.
   ============================================================ */
.fn-share{ display:flex; flex-direction:column; gap:var(--s4); }
/* a big band preview chip — what the counterparty would receive */
.fn-bandchip{ display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-size:var(--fs-lg); font-weight:var(--fw-bold); letter-spacing:-.01em;
  padding:.4rem .9rem; border-radius:var(--r-pill); border:1.5px solid var(--brand);
  background:var(--brand-soft); color:var(--brand-ink); }
.fn-bandchip .g{ font-size:1.1em; }
.fn-bandchip.thin{ border-color:var(--pv-private-ln); background:var(--pv-private-bg); color:var(--pv-private); }
.fn-bandchip.sm{ font-size:var(--fs-sm); padding:.2rem .65rem; }

/* the disclosure manifest — what crosses vs what NEVER does. The
   ✓/✗ rows are the "confirm with your eyes" honesty surface. */
.fn-manifest{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.fn-mrow{ display:flex; align-items:center; gap:.6rem; padding:.6rem var(--s4); border-top:1px solid var(--line); font-size:var(--fs-sm); }
.fn-mrow:first-child{ border-top:0; }
.fn-mrow .mk{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center; font-weight:var(--fw-x); font-size:.85rem; }
.fn-mrow.yes .mk{ color:var(--pv-verified); background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln); }
.fn-mrow.no  .mk{ color:var(--muted); background:var(--surface2); border:1px solid var(--line2); }
.fn-mrow .ml{ flex:1; min-width:0; color:var(--ink); }
.fn-mrow.no .ml{ color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line2); }
.fn-mrow .mtag{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--muted); }
.fn-mrow.yes .mtag{ color:var(--pv-verified); }

/* per-deal consent checkbox row (reused look for share + referral) */
.fn-ack{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--line2); border-radius:var(--r); background:var(--surface2); padding:.7rem .8rem; }
.fn-ack:hover{ border-color:var(--brand); }
.fn-ack.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 45%, var(--surface)); }
.fn-ack .box{ width:22px; height:22px; flex:0 0 22px; margin-top:1px; border-radius:6px; border:1.5px solid var(--line2);
  background:var(--surface); display:grid; place-items:center; color:#fff; }
.fn-ack.on .box{ background:var(--brand); border-color:var(--brand); }
.fn-ack .box svg{ width:14px; height:14px; display:block; opacity:0; }
.fn-ack.on .box svg{ opacity:1; }
.fn-ack .atxt{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink2); line-height:1.45; }
.fn-ack .atxt b{ color:var(--ink); font-weight:var(--fw-semi); }

/* received-from-counterparty variant — a neutral inbound band */
.fn-received{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid var(--pv-official-ln); border-radius:var(--r); background:var(--pv-official-bg); padding:var(--s4); }
.fn-received .rl{ flex:1; min-width:0; font-size:var(--fs-sm); color:var(--ink2); }
.fn-received .rl b{ color:var(--ink); font-weight:var(--fw-semi); display:block; }

/* ---- my-shares list (read-only, in the Passport) ---- */
.fn-myshares{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.fn-shrow{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s3); align-items:center;
  padding:.7rem var(--s4); border-top:1px solid var(--line); }
.fn-shrow:first-child{ border-top:0; }
.fn-shrow .sh-main{ min-width:0; }
.fn-shrow .sh-main .sh-deal{ font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--ink); }
.fn-shrow .sh-main .sh-deal .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fn-shrow .sh-main .sh-meta{ font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; }
.fn-shrow .sh-meta .num{ font-family:var(--mono); }
@media (max-width:480px){
  .fn-shrow{ grid-template-columns:1fr auto; }
  .fn-shrow .sh-with{ display:none; }
}

/* ============================================================
   REFERRAL — product-kind picker + licenced-partner cards.
   ============================================================ */
.fn-kindgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.fn-kind{ display:flex; flex-direction:column; gap:.2rem; text-align:left; cursor:pointer; font:inherit;
  border:1.5px solid var(--line2); border-radius:var(--r); background:var(--surface); padding:.65rem .75rem; transition:border-color .12s, background .12s; }
.fn-kind:hover{ border-color:var(--brand); background:var(--surface2); }
.fn-kind.on{ border-color:var(--brand); background:color-mix(in srgb,var(--brand-soft) 45%, var(--surface)); box-shadow:var(--sh-sm); }
.fn-kind b{ font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-bold); }
.fn-kind span{ font-size:var(--fs-2xs); color:var(--muted); line-height:1.35; }
@media (max-width:420px){ .fn-kindgrid{ grid-template-columns:1fr; } }

.fn-partner{ display:flex; flex-direction:column; gap:.6rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:var(--s4); box-shadow:var(--sh-sm); }
.fn-partner .pt-top{ display:flex; align-items:center; gap:var(--s3); }
.fn-partner .pt-logo{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-x); font-family:var(--mono); font-size:var(--fs-sm);
  border:1px solid var(--brand); }
.fn-partner .pt-main{ flex:1; min-width:0; }
.fn-partner .pt-main b{ display:block; font-size:var(--fs-md); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:-.01em; }
.fn-partner .pt-kinds{ font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; }
/* the licence note — verified-grade chip; the licence is THEIRS */
.fn-licence{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--fs-xs); color:var(--ink2); line-height:1.45;
  background:var(--pv-verified-bg); border:1px solid var(--pv-verified-ln); border-radius:var(--r-sm); padding:.5rem .65rem; }
.fn-licence .ic{ width:15px; height:15px; flex:0 0 15px; color:var(--pv-verified); margin-top:1px; display:inline-flex; }
.fn-licence .ic svg{ width:100%; height:100%; display:block; }
.fn-licence b{ color:var(--pv-verified); font-weight:var(--fw-bold); }

/* referral timeline — reuses .stchip for status (shared→reviewing→…) */
.fn-reflist{ display:flex; flex-direction:column; gap:var(--s2); }
.fn-refrow{ display:flex; align-items:center; gap:var(--s3); border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:.7rem var(--s4); }
.fn-refrow .rf-main{ flex:1; min-width:0; }
.fn-refrow .rf-main b{ font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-semi); }
.fn-refrow .rf-main span{ display:block; font-size:var(--fs-2xs); color:var(--muted); margin-top:1px; }
.fn-refrow .rf-main span .num{ font-family:var(--mono); }

/* ============================================================
   LEDGER — record-only external facilities (NOT a wallet).
   Reuses .ledger/.lr; widened to 4 honest columns. THB mono.
   ============================================================ */
.fn-ledsum{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.fn-ledsum .metric .v .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.ledger.fn-led .lr{ grid-template-columns:1.5fr 1fr auto; }
.ledger.fn-led .lr .amt{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; }
.ledger.fn-led .lr .amt .cur{ font-size:var(--fs-2xs); color:var(--muted); font-weight:var(--fw-semi); margin-left:.2rem; }
.fn-ledrow-sub{ font-size:var(--fs-2xs); color:var(--muted); margin-top:2px; }
/* record-status chips (recorded / active / repaid / defaulted) — reuse stchip palette intent */
.fn-recst{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  padding:.1rem .5rem; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.fn-recst.recorded{ background:var(--surface2); color:var(--ink2); border-color:var(--line2); }
.fn-recst.active{ background:var(--pv-official-bg); color:var(--pv-official); border-color:var(--pv-official-ln); }
.fn-recst.repaid{ background:var(--pv-verified-bg); color:var(--pv-verified); border-color:var(--pv-verified-ln); }
.fn-recst.defaulted{ background:var(--pv-stale-bg); color:var(--pv-stale); border-color:var(--pv-stale-ln); border-style:dashed; }

/* ============================================================
   RESPONSIVE / touch
   ============================================================ */
@media (pointer:coarse){
  .fn-launch, .fn-kind, .fn-ack{ min-height:44px; }
}
@media (max-width:480px){
  .fn-ladder{ padding:0 var(--s4); height:108px; }
  .fn-herohead, .fn-bandline{ padding-left:var(--s4); padding-right:var(--s4); }
  .fn-herometa{ padding:var(--s4); }
  .fn-ledsum{ grid-template-columns:1fr 1fr 1fr; gap:var(--s2); }
}

/* ============================================================
   DENSE density tune — [data-density="dense"] fn-* overrides for
   the dense trade personas (ล้ง/exporter). Ported from the design
   handoff (handoff_out/finance_density/). TUNE ONLY: every
   value steps an existing spacing or type token DOWN one rung (or
   reuses the ladder's mobile 108px). Calm (grower / no density
   attribute) is byte-for-byte unchanged; honest-data material
   (band ladder · 🔒 value · manifest marks · thin_file neutral) is
   NOT touched — only spacing + one type rung. <html data-density>
   is set per-persona by shell.app.js; this just makes fn-* answer.
   ============================================================ */
/* ---- column rhythm: desk, not field ---------------------------- */
[data-density="dense"] .fn-wrap{ gap:var(--s3); }            /* s5 → s3 */

/* ---- SCORE HERO: pull air out of head / band line / meta ------- */
[data-density="dense"] .fn-herohead{ padding:var(--s4) var(--s4) var(--s2); }   /* s5 s5 s3 → s4 s4 s2 */
[data-density="dense"] .fn-ladder{ height:108px; padding:0 var(--s4); }         /* 128px → 108px (calm's own mobile value) · s5 → s4 */
[data-density="dense"] .fn-bandline{ padding:var(--s3) var(--s4) 0; }           /* s4 s5 → s3 s4 */
[data-density="dense"] .fn-herometa{ padding:var(--s3) var(--s4) var(--s4); margin-top:var(--s3); } /* s4 s5 s5 / s4 → s3 s4 s4 / s3 */
/* the band name + self-only value step down ONE type rung (still mono, still 🔒) */
[data-density="dense"] .fn-bandname .bn-v,
[data-density="dense"] .fn-value .vnum{ font-size:var(--fs-xl); }               /* 2xl → xl */

/* ---- REASONS: denser rows (the 30px dir badge still sets the floor) */
[data-density="dense"] .fn-reason{ padding:var(--s2) var(--s4); }               /* .7rem s4 → s2 s4 */

/* ---- IMPROVE: tighter guidance card ---------------------------- */
[data-density="dense"] .fn-improve{ padding:var(--s3) var(--s4); gap:var(--s2); } /* s4 s5 / .6rem → s3 s4 / s2 */

/* ---- ACTION LAUNCHERS: desk rows (tap floor re-asserted below) -- */
[data-density="dense"] .fn-actions{ gap:var(--s2); }                            /* s3 → s2 */
[data-density="dense"] .fn-launch{ padding:var(--s3) var(--s4); gap:var(--s3); } /* s4 s4 / gap s4 → s3 s4 / gap s3 */

/* ---- MY-SHARES / MANIFEST / REFERRAL / LEDGER rows: match ------- */
[data-density="dense"] .fn-shrow{ padding:var(--s2) var(--s4); }                /* .7rem s4 → s2 s4 */
[data-density="dense"] .fn-mrow{ padding:var(--s2) var(--s4); }                 /* .6rem s4 → s2 s4 (✓/✗ marks unchanged) */
[data-density="dense"] .fn-refrow{ padding:var(--s2) var(--s4); }               /* .7rem s4 → s2 s4 */
[data-density="dense"] .ledger.fn-led .lr{ padding-top:var(--s2); padding-bottom:var(--s2); }
[data-density="dense"] .fn-ledsum{ gap:var(--s2); }                             /* s3 → s2 */

/* ---- CONSENT GATE: tightened spacing, SAME reassuring tone ------
   The gate stays calm in voice (ล้ง read the consent + thin_file copy
   once too) — only the surrounding air is reduced one rung. */
[data-density="dense"] .fn-gate{ gap:var(--s3); }                               /* s4 → s3 */
[data-density="dense"] .fn-gatehero{ padding:var(--s5) var(--s4); gap:var(--s2); } /* s6 s5 / s3 → s5 s4 / s2 */

/* ============================================================
   TOUCH FLOOR — re-asserted for dense (≥44px on coarse pointers).
   The calm surface already guarantees this; because the dense rules
   above raise specificity, we restate the floor so a ล้ง on a phone
   never loses a 44px target. Spacing shrinks; tap area does not.
   ============================================================ */
@media (pointer:coarse){
  [data-density="dense"] .fn-launch,
  [data-density="dense"] .fn-kind,
  [data-density="dense"] .fn-ack,
  [data-density="dense"] .btn{ min-height:44px; }
}

/* ============================================================
   MOBILE-DENSE reconciliation (≤480px).
   The calm surface already relaxes at ≤480px (ladder 108px, s4 pads).
   For a ล้ง on a phone the dense rules and the mobile rules now AGREE
   (both land on 108px / s4), so the surface reads consistently whether
   density comes from persona or viewport. Nothing fights here — this
   block is intentionally empty of overrides and documents the overlap.
   (Owner flag §F-3: force calm < 480px regardless of persona? — open.)
   ============================================================ */