/* ============================================================
   V9 Analytics — "Ledger Terminal". ONE continuous instrument, not three cards:
   a hairline GUTTER SPINE down the left with hanging mono addresses, regions
   divided by tone + rules (zero card borders, zero shadows). Hero = the Net Cash
   Impact headline over an auditable breakdown (net sales − COGS = Known Gross
   Profit; trades only move cash). Coverage = a quiet two-segment meter (solid =
   costed, 45° hatch = no cost recorded), never red prose. Composition = one bold
   stacked rail; graded = a PSA luminance ramp; trend = a gridded plot that reads
   as a calendar when sparse. Exactly ONE yellow content figure (Net Cash Impact).
   Data-ink is obsidian-ladder luminance, never
   saturation; --v9-neg only on genuine negatives, --v9-pos only on real gain.
   Scoped .v9-ledger. Hairlines authored in px (1rem = 22.4px at 140% root).
   ============================================================ */

:root { --v9-text-2xs: 0.625rem; } /* smallest mono label step (was referenced only via inline fallback) */

.v9-ledger { display: grid; gap: 0; max-width: 72rem; padding: var(--v9-space-2) 0 var(--v9-space-6); --led-gutter: 5rem; }
.v9-ledger * { min-width: 0; }

/* ---- date control ---- */
.v9-ledger-datecontrol { display: grid; gap: var(--v9-space-3); padding-bottom: var(--v9-space-3); }
/* Recessed pill-track box around the range chips, matching the Transactions
   range control (.log-range-chips in components.css). Same legacy track tokens
   so it's pixel-identical; the chips (V9 pills) sit inside and scroll on mobile. */
.v9-ledger-ranges { display: flex; flex-wrap: wrap; gap: var(--v9-space-2); padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.v9-ledger-chip {
  /* flex:0 0 auto so the blanket `.v9-ledger * { min-width:0 }` can't shrink the
     chips below their text in the no-wrap scroll row (they were squishing to ~46px
     with the label spilling out). Mirrors the Transactions .log-range-chip. */
  flex: 0 0 auto;
  padding: 0.3rem 0.75rem; border-radius: var(--v9-r-pill); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--v9-line); background: var(--v9-surface); color: var(--v9-text-mute);
  font: 500 var(--v9-text-sm) var(--v9-font-ui);
  transition: color var(--v9-t-micro) var(--v9-ease), background-color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease);
}
.v9-ledger-chip:hover { color: var(--v9-text); background: var(--v9-hover); }
.v9-ledger-chip.is-active { color: var(--v9-accent); border-color: color-mix(in srgb, var(--v9-accent) 55%, var(--v9-line)); background: var(--v9-raised); }
.v9-ledger-chip:focus-visible, .v9-info-btn:focus-visible { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }

/* screen-reader-only (accessible value/summary behind the visual reels + plot) */
.v9-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v9-ledger-custom { display: flex; flex-wrap: wrap; gap: var(--v9-space-3); }
.v9-ledger-dateinput { display: grid; gap: 4px; }
.v9-ledger-dateinput > span { color: var(--v9-text-faint); font: 500 var(--v9-text-xs) var(--v9-font-ui); text-transform: uppercase; letter-spacing: 0.04em; }
.v9-ledger-date {
  height: 2.2rem; padding: 0 var(--v9-space-3); color: var(--v9-text); color-scheme: dark;
  background: var(--v9-surface); border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
}
.v9-ledger-date:focus-within, .v9-ledger-date:focus { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }

/* ---- the spine: movements hang off one continuous hairline ---- */
.v9-mv { display: grid; grid-template-columns: var(--led-gutter) 1fr; border-top: 1px solid var(--v9-line); }
.v9-mv-addr { padding: var(--v9-space-4) var(--v9-space-3) 0 0; text-align: right; }
.v9-mv-addr-t { font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-mv-body { container-type: inline-size; border-left: 1px solid var(--v9-line); padding: var(--v9-space-4) 0 var(--v9-space-5) var(--v9-space-5); display: grid; gap: var(--v9-space-3); align-content: start; }
.v9-mv-eyebrow { display: flex; align-items: center; gap: 6px; font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-mv-eyebrow-range { color: var(--v9-text-faint); }

/* ---- PROFIT: day-P&L headline + meter + breakdown ---- */
.v9-led-income { font: var(--v9-weight-display) var(--v9-text-display)/1 var(--v9-font-mono); letter-spacing: var(--v9-track-display); color: var(--v9-text); font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.v9-led-income.is-pos { color: var(--v9-accent); } /* the one yellow content figure */
.v9-led-income.is-neg { color: var(--v9-neg); }    /* a genuine loss day reads red */
.v9-led-meter { display: flex; height: 10px; max-width: 32rem; border-radius: var(--v9-r-pill); background: var(--v9-raised); overflow: hidden; }
.v9-led-meter-seg { flex: 0 0 auto; height: 100%; }
.v9-led-meter-seg.is-cov { background: var(--v9-line-strong); }
.v9-led-meter-seg.is-unc { background: repeating-linear-gradient(45deg, var(--v9-line-strong) 0 1px, transparent 1px 5px), var(--v9-raised); border-left: 1px solid var(--v9-bg); }
.v9-led-foot { margin: 2px 0 0; font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); letter-spacing: 0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.v9-led-eq { display: flex; align-items: flex-end; flex-wrap: wrap; margin-top: var(--v9-space-3); }
.v9-led-eq-cell { padding-right: var(--v9-space-5); }
.v9-led-eq-lab { display: flex; align-items: center; gap: 5px; font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-led-eq-val { font: 300 var(--v9-text-lg) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text-mute); margin-top: 6px; }
.v9-led-eq-val.is-dim { color: var(--v9-text-faint); }
.v9-led-eq-val.is-acc { color: var(--v9-accent); font-size: var(--v9-text-xl); }
.v9-led-eq-val.is-neg { color: var(--v9-neg); font-size: var(--v9-text-xl); }
.v9-led-eq-op { align-self: flex-end; padding: 0 var(--v9-space-4) 5px 0; color: var(--v9-text-faint); font: 300 var(--v9-text-lg) var(--v9-font-mono); }

/* ---- Cash Impact: full visible breakdown (auditable) ---- */
.v9-led-bd { display: grid; gap: 0; margin-top: var(--v9-space-3); max-width: 30rem; }
.v9-led-bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v9-space-4); padding: var(--v9-space-2) 0; border-bottom: 1px solid var(--v9-line); }
.v9-led-bd-row:last-child { border-bottom: 0; }
.v9-led-bd-lab { display: flex; align-items: center; gap: 5px; font: 500 var(--v9-text-xs) var(--v9-font-ui); color: var(--v9-text-mute); }
.v9-led-bd-val { font: 400 var(--v9-text-sm) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); white-space: nowrap; }
.v9-led-bd-row.is-sub .v9-led-bd-lab { padding-left: var(--v9-space-3); color: var(--v9-text-faint); font-weight: 400; }
.v9-led-bd-row.is-sub .v9-led-bd-val { color: var(--v9-text-mute); }
.v9-led-bd-row.is-warn .v9-led-bd-val { color: var(--v9-warn); }
.v9-led-bd-row.is-key { border-top: 1px solid var(--v9-line-strong); }
.v9-led-bd-row.is-key .v9-led-bd-lab { color: var(--v9-text); font-weight: 600; }
.v9-led-bd-row.is-key .v9-led-bd-val { color: var(--v9-text); font-size: var(--v9-text-md); font-weight: 600; }
.v9-led-bd-row.is-total { border-top: 1px solid var(--v9-line-strong); margin-top: 2px; }
.v9-led-bd-row.is-total .v9-led-bd-lab { color: var(--v9-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--v9-text-2xs); }
.v9-led-bd-row.is-total .v9-led-bd-val { color: var(--v9-text); font-size: var(--v9-text-md); font-weight: 600; }
.v9-led-bd-row.is-neg .v9-led-bd-val { color: var(--v9-neg); }

/* ---- COLLECTION ---- */
.v9-led-stats { display: flex; flex-wrap: wrap; gap: var(--v9-space-3) var(--v9-space-7); }
.v9-led-stat { display: grid; gap: 3px; }
.v9-led-stat-lab { display: flex; align-items: center; gap: 5px; font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-led-stat-val { font: 300 var(--v9-text-lg) var(--v9-font-mono); font-variant-numeric: tabular-nums; color: var(--v9-text); display: inline-flex; align-items: baseline; white-space: nowrap; }
.v9-led-stat-val.is-mut { color: var(--v9-text-mute); }
.v9-led-stat-val.is-pos { color: var(--v9-pos); }
.v9-led-stat-val.is-neg { color: var(--v9-neg); }
.v9-led-arrow { font-size: 0.68em; margin-right: 3px; }

.v9-led-split { display: grid; grid-template-columns: 1fr; gap: var(--v9-space-6); align-items: start; margin-top: var(--v9-space-2); }
@container (min-width: 520px) { .v9-led-split { grid-template-columns: 1.6fr 1fr; gap: var(--v9-space-8); } }
.v9-led-split-main { display: grid; gap: var(--v9-space-4); align-content: start; }

.v9-led-rail { display: flex; height: 14px; border-radius: 7px; overflow: hidden; }
.v9-led-rail-seg { flex: 0 0 auto; height: 100%; border-right: 1px solid var(--v9-bg); transition: width 560ms var(--v9-ease); }
.v9-led-rail-seg:last-child { border-right: 0; }
.v9-led-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--v9-space-2) var(--v9-space-5); }
.v9-led-lg { display: flex; align-items: baseline; gap: 7px; font: 400 var(--v9-text-sm) var(--v9-font-ui); }
.v9-led-sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; position: relative; top: 1px; }
.v9-led-lg-nm { color: var(--v9-text); }
.v9-led-lg-vl { margin-left: auto; flex: 0 0 auto; font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); white-space: nowrap; }

.v9-led-topsets { display: grid; gap: var(--v9-space-3); align-content: start; }
.v9-led-sub { font: 400 var(--v9-text-2xs) var(--v9-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--v9-text-faint); }
.v9-led-ts { display: grid; gap: 5px; }
.v9-led-ts-row { display: flex; align-items: baseline; gap: 8px; }
.v9-led-ts-rk { flex: 0 0 auto; font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-led-ts-nm { color: var(--v9-text-mute); font: 400 var(--v9-text-sm) var(--v9-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v9-led-ts-vl { margin-left: auto; flex: 0 0 auto; font: 400 var(--v9-text-sm) var(--v9-font-mono); color: var(--v9-text); white-space: nowrap; }
.v9-led-ts-bar { height: 2px; background: var(--v9-line-strong); border-radius: 2px; transition: width 560ms var(--v9-ease); }

/* ---- GRADED ---- */
.v9-led-gcaps { display: flex; justify-content: space-between; gap: var(--v9-space-4); font: 400 var(--v9-text-sm) var(--v9-font-mono); color: var(--v9-text-mute); }
.v9-led-gcaps b { font-weight: 400; color: var(--v9-text); }
.v9-led-psa { display: grid; gap: var(--v9-space-2); margin-top: 4px; }
.v9-led-psa-row { display: flex; align-items: center; gap: 10px; }
.v9-led-psa-lab { flex: 0 0 3rem; font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-led-psa-track { flex: 1; min-width: 0; }
.v9-led-psa-bar { height: 11px; border-radius: 2px; min-width: 3px; transition: width 560ms var(--v9-ease); }
.v9-led-psa-vl { flex: 0 0 6.75rem; text-align: right; font: 400 var(--v9-text-xs) var(--v9-font-mono); color: var(--v9-text-mute); white-space: nowrap; }

/* ---- TREND: gridded plot ---- */
.v9-led-plot { position: relative; height: 8rem; margin-top: 6px; padding-left: 3rem; border-bottom: 1px solid var(--v9-line); }
.v9-led-plot-grid { position: absolute; left: 3rem; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), var(--v9-line) calc(25% - 1px) 25%); }
.v9-led-plot-zero { position: absolute; left: 3rem; right: 0; height: 1px; background: var(--v9-line-strong); }
.v9-led-plot-y { position: absolute; left: 0; font: 400 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }
.v9-led-plot-y.is-top { top: -2px; }
.v9-led-plot-y.is-bot { bottom: -2px; }
.v9-led-plot-y.is-zero { transform: translateY(-50%); }
.v9-led-plot-cols { position: absolute; left: 3rem; right: 0; top: 0; bottom: 0; display: flex; align-items: stretch; }
.v9-led-col { flex: 1; position: relative; }
.v9-led-col-bar { position: absolute; left: 50%; transform: translateX(-50%); width: clamp(8px, 46%, 18px); background: var(--v9-line-strong); border-radius: 2px 2px 0 0; }
.v9-led-col-bar.is-neg { background: var(--v9-neg); border-radius: 0 0 2px 2px; }
.v9-led-col-tick { position: absolute; left: 22%; right: 22%; height: 1px; background: var(--v9-line); transform: translateY(-50%); }
.v9-led-plot-rr { position: absolute; left: 3rem; right: 0; top: 0; bottom: 0; overflow: visible; pointer-events: none; }
.v9-led-runrate { stroke: var(--v9-text-faint); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--v9-ease) 260ms; }
.v9-led-plot-labels { display: flex; padding-left: 3rem; margin-top: 7px; }
.v9-led-plot-ml { flex: 1; text-align: center; font: 400 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); white-space: nowrap; overflow: hidden; }
.v9-led-tcap { text-align: right; margin: 8px 0 0; font: 400 var(--v9-text-2xs) var(--v9-font-mono); color: var(--v9-text-faint); }

.v9-led-empty { color: var(--v9-text-mute); font-size: var(--v9-text-sm); }

/* ---- odometer: money figures as rolling digit reels ---- */
.v9-odo { display: inline-flex; align-items: flex-end; line-height: 1; }
.v9-odo-digit { display: inline-block; height: 1em; overflow: hidden; }
.v9-odo-reel { display: flex; flex-direction: column; transition: transform 780ms var(--v9-ease); }
.v9-odo-cell { height: 1em; line-height: 1em; text-align: center; }
.v9-odo-sep { display: inline-block; }

/* ---- tap-to-learn ---- */
.v9-info { position: relative; display: inline-flex; vertical-align: baseline; }
.v9-info-btn { width: 14px; height: 14px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--v9-line-strong); border-radius: 50%; background: transparent; color: var(--v9-text-faint); font: 500 0.62em/1 var(--v9-font-ui); cursor: pointer; transition: color var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease); }
.v9-info-btn:hover { color: var(--v9-text-mute); border-color: var(--v9-text-faint); }
.v9-info-pop { display: none; position: absolute; top: calc(100% + 7px); left: 0; z-index: 60; width: max-content; max-width: min(15rem, 72vw); padding: 8px 10px; background: var(--v9-raised); border: 1px solid var(--v9-line-strong); border-radius: var(--v9-r-sm); font: 400 var(--v9-text-xs)/1.45 var(--v9-font-ui); color: var(--v9-text-mute); letter-spacing: normal; text-transform: none; }
.v9-info.at-end .v9-info-pop { left: auto; right: 0; }
.v9-info.is-open .v9-info-pop { display: block; }
/* Portaled to <body> on open (escapes the ledger's overflow + edge-fade mask on
   mobile); position/top/left are set inline by openInfoPop. */
.v9-info-pop.is-portaled { display: block; }

@media (prefers-reduced-motion: reduce) {
  .v9-odo-reel, .v9-led-runrate, .v9-led-rail-seg, .v9-led-ts-bar, .v9-led-psa-bar { transition: none !important; }
}

/* ---- mobile: the gutter collapses to a persistent spine threading every row. Tighter
   rhythm than desktop — phones have less room, so every gap pays its way. ---- */
@media (max-width: 700px) {
  .v9-ledger { padding: var(--v9-space-2) 0 var(--v9-space-5); }
  /* range chips: one swipeable row instead of wrapping to 2-3 (saves vertical space) */
  .v9-ledger-ranges { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v9-ledger-ranges::-webkit-scrollbar { display: none; }

  /* FULL-WIDTH TERMINAL REPORT (phone): the desktop gutter-spine collapsed badly
     on mobile — an orphaned left rail with the whole report shoved right of it.
     Drop the rail entirely so each section runs edge-to-edge (symmetric margins);
     the section's top hairline is the divider and the address becomes its header. */
  .v9-mv { grid-template-columns: 1fr; border-left: 0; padding-left: 0; }
  .v9-mv-addr { padding: var(--v9-space-3) 0 var(--v9-space-1); text-align: left; }
  .v9-mv-addr-t { font-size: var(--v9-text-xs); color: var(--v9-text-mute); }  /* a real header, not faint clutter */
  .v9-mv-body { border-left: 0; padding: 0 0 var(--v9-space-4); gap: var(--v9-space-2); }

  /* right-size the hero so it leads without swallowing the screen */
  .v9-led-income { font-size: 1.75rem; }
  /* the auditable breakdown fills the width with a tighter, denser rhythm */
  .v9-led-bd { max-width: none; }
  .v9-led-bd-row { padding: 7px 0; }

  .v9-led-eq-cell { padding-right: var(--v9-space-4); }
  .v9-led-eq-op { padding-right: var(--v9-space-3); }
}