/* ============================================================================
   AR Cash Collector — cockpit on the FP&A dashboard base (founder 2026-08-06:
   «дашборд за основу — финансовый аналитик»).
   ----------------------------------------------------------------------------
   The AR v5 root carries FOUR scopes: ``cv5 cv5-fpa`` (the founder-approved
   FP&A cockpit shell + component vocabulary from fpa-cockpit.css and
   fpa-reference.css — reused, never duplicated), ``arv5`` (the legacy
   dashboard-v5.css vocabulary still used by the drafts / promises / settings
   bodies, the aging bar, status chips and the customer drawer) and ``cv5-ar``
   (this file: the retint bridge + small AR-only extensions).

   This file deliberately contains NO copies of fpa-cockpit.css rules — only:
     1. the .arv5 token retint onto the cv5 palette (one system, one look);
     2. tiny AR-specific components the reference has no primitive for
        (stacked forecast bars, waterfall bar track, cell grids).

   House rules: NO dark mode. NO monospace. Loaded LAST on AR v5 pages so the
   retint wins ties. Every selector is scoped under .cv5-ar — inert elsewhere.
   ============================================================================ */

/* ── 0. Semantic hues from the MAIN SITE palette (founder 2026-08-09:
   «цвета из палитры главной страницы») ────────────────────────────────────────
   The cockpit shell, layout and typography stay EXACTLY the founder-approved
   FP&A system (fpa-cockpit.css is shared by other roles and is never edited
   from here). What changes is only WHICH HUE each semantic state uses: the
   four state colours are re-pointed from the FP&A prototype's set to the
   department/quadrant hues shipped on the marketing site (templates/base.html
   :root), so a state means the same thing — and looks the same — on the site
   and inside the product.

     attention      --cv5-amber  #ac711c → #B45A0A   (site --finance)
     critical       --cv5-rose   #c74255 → #C0392B   (site --q4)
     positive       --cv5-emer   #118761 → #0D7C54   (site --live)
     informational  --cv5-info   #2f6eed → #1A6FAD   (site --blue)
     muted          --cv5-slate  #64748B → #767369   (site --ink3)

   Contrast: all four read on white at 4.8–5.4:1 and three of the four are
   BETTER than the values they replace (#ac711c was 4.09:1 on white — under
   AA; #B45A0A is 4.77:1). Each soft/border tint is a straight 8% / 28% white
   mix of its own hue, so nothing drifts off-hue. The single compromise: the
   attention hue on its own 8% tint lands at 4.30:1, under AA for body text —
   so amber TEXT on an amber surface uses --ar-amber-ink (#8F4708, a shade of
   the same site hue, 6.3:1) while fills, markers and borders keep #B45A0A.

   NOT re-pointed, deliberately:
     • the canvas / ink / hairlines — the site's warm neutrals (#141310 ink,
       #ECE9E2 rules) against the FP&A cockpit's cool #f5f7fb shell would fork
       the dashboard system the founder set as the structural reference;
     • --cv5-terra (#0B5CAD), the shared action accent already re-pointed to
       "site blue" for all dashboards on 2026-07-30. Keeping it separate from
       --cv5-info is the point: the accent means "act here", informational
       means "the autopilot is doing this", and those must not collapse into
       one colour. They are used differently too (solid button vs pale tint).
   NO dark mode (permanently vetoed). NO monospace. */
.cv5.cv5-ar {
  --cv5-rose: #C0392B;
  --cv5-rose-soft: #FAEFEE;
  --cv5-rose-border: #EDC8C4;
  --cv5-amber: #B45A0A;
  --cv5-amber-soft: #FBF5F0;
  --cv5-amber-border: #EAD1BA;
  --cv5-emer: #0D7C54;
  --cv5-emer-soft: #ECF4F1;
  --cv5-emer-border: #BBDACF;
  --cv5-info: #1A6FAD;
  --cv5-info-soft: #EDF3F8;
  --cv5-info-border: #BFD7E8;
  --cv5-slate: #767369;

  /* Deeper shades of the SAME site hues, for text sitting on the matching
     tint (where the base hue would fall under AA). Not new colours. */
  --ar-amber-ink: #8F4708;
  --ar-emer-ink: #0A5F41;
  --ar-rose-ink: #8E2A1F;
  --ar-info-ink: #14507F;

  /* Neutral track / hover greys. Previously three loose hardcoded hexes
     (#f1f3f6, #f8f9fb, #F1F3F6); named once so they can be reasoned about. */
  --ar-track: #EEF1F5;
  --ar-hover: #F7F9FB;

  /* Aging ramp — calm → alarm, built ONLY from site hues: the customer teal
     for money that is young, the finance amber for the middle, the q4 red
     for the tail. Tints are white mixes of those three, never new hues. */
  --ar-ag-current: #ABD6CE;   /* --customer #0E8A72 @ 35% */
  --ar-ag-1-30:    #56AD9C;   /* --customer #0E8A72 @ 70% */
  --ar-ag-31-60:   #DDB591;   /* --finance  #B45A0A @ 45% */
  --ar-ag-61-90:   #C37B3B;   /* --finance  #B45A0A @ 80% */
  --ar-ag-91:      #C0392B;   /* --q4                      */
  /* Term-unknown money is deliberately OFF the ramp: a warm neutral, because
     any ramp hue would imply a position in an order it does not have. */
  --ar-ag-unknown: #C1C0BC;   /* --ink3 #767369 @ 45% */
}

/* ── 1. Retint the legacy .arv5 token set onto the cv5 palette ───────────────
   dashboard-v5.css keeps styling the not-yet-recomposed surfaces (drafts /
   promises / settings / customer drawer) and the kept cockpit internals
   (.abar/.aleg, .fp pills, .chip, .dnd, .risk); pointing its tokens at the
   cv5 values makes those components read as the FP&A system without touching
   their templates. `.cv5-ar.arv5` (0,2,0) outweighs `.arv5` (0,1,0). Since
   section 0 re-points the cv5 semantic tokens at the site hues, these legacy
   surfaces inherit the site palette too — one indirection, one system. */
.cv5-ar.arv5 {
  --bg: var(--cv5-bg);
  --card: var(--cv5-card);
  --ink: var(--cv5-ink);
  --ink2: var(--cv5-ink2);
  --ink3: var(--cv5-ink3);
  --line: var(--cv5-line);
  --lineS: var(--cv5-line-strong);
  --navy: var(--cv5-navy);
  --amber: var(--cv5-amber);
  --amber-s: var(--cv5-amber-soft);
  --amber-b: var(--cv5-amber-border);
  --rose: var(--cv5-rose);
  --rose-s: var(--cv5-rose-soft);
  --rose-b: var(--cv5-rose-border);
  --emer: var(--cv5-emer);
  --emer-s: var(--cv5-emer-soft);
  --info: var(--cv5-info);
  --info-s: var(--cv5-info-soft);
  --info-b: var(--cv5-info-border);

  /* AR chart pair: hard money (committed) vs modelled money (projected). */
  --ar-committed: var(--cv5-navy);
  --ar-projected: #AFCDE2;  /* site --blue #1A6FAD @ 35% */
}

/* ── 2. Shell / layout touches ─────────────────────────────────────────────── */

/* The cadence strip carries AR's "run a scan now" secondary action. */
.cv5-ar .cv5-cadence form { margin-left: auto; border: none; }

/* ── 3. Hero plaque ────────────────────────────────────────────────────────── */

/* Without a promise ledger the navy plaque spans the full width. */
.cv5-ar .cv5-kband.one { grid-template-columns: 1fr; }

/* ── 4. KPI tiles ──────────────────────────────────────────────────────────── */

/* Tiles that drill into their list (needs-review, proof) are links. */
.cv5-ar a.cv5-kpi { display: block; }
.cv5-ar a.cv5-kpi:hover { border-color: var(--cv5-navy); }

/* Attention state on the needs-review tile (something waits on the human). */
.cv5-ar .cv5-kpi.warn { border-color: var(--cv5-amber-border); background: var(--cv5-amber-soft); }

/* 3-up strip for the performance-proof tiles. */
.cv5-ar .cv5-kpis.ar3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .cv5-ar .cv5-kpis.ar3 { grid-template-columns: 1fr; } }

/* 2-up strip — the handoff page's headline pair (accounts ready / total). */
.cv5-ar .cv5-kpis.ar2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
@media (max-width: 620px) { .cv5-ar .cv5-kpis.ar2 { grid-template-columns: 1fr; } }

/* ── 5. ROI line ───────────────────────────────────────────────────────────── */
.cv5-ar .ar-roiline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.cv5-ar .ar-roiline .n { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.cv5-ar .ar-roiline .ratio { font-size: 13px; font-weight: 700; color: var(--cv5-emer); }

/* ── 6. Stacked bar charts (forecast buckets + DSO / open-AR trend) ──────────
   Pure-CSS columns; heights are route-computed percentages set inline (the
   same inline-style width/height device the FP&A reference uses). */
.cv5-ar .ar-bars { display: flex; align-items: flex-end; gap: 10px; height: 96px; }
.cv5-ar .ar-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.cv5-ar .ar-bars .col .amt { font-size: 10px; color: var(--cv5-ink3); margin-bottom: 2px; }
.cv5-ar .ar-bars .col .bar {
  width: 100%; max-width: 56px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: var(--ar-projected); overflow: hidden;
  display: flex; flex-direction: column-reverse;
}
.cv5-ar .ar-bars .col .bar i { display: block; width: 100%; background: var(--ar-committed); }
.cv5-ar .ar-bars .col .bar.solid { background: var(--cv5-terra); }
.cv5-ar .ar-bars .col .mo { font-size: 9px; color: var(--cv5-ink4); margin-top: 2px; }
.cv5-ar .ar-bxl { display: flex; gap: 10px; margin-top: 3px; }
.cv5-ar .ar-bxl div { flex: 1; text-align: center; font-size: 10px; color: var(--cv5-ink4); }
.cv5-ar .ar-bars.sm { height: 56px; gap: 6px; }
.cv5-ar .ar-bars.sm .col .bar { max-width: 34px; border-radius: 3px 3px 0 0; }

/* ── 7. Waterfall rows (the reference's cv5-bar device + a track) ──────────── */
.cv5-ar .cv5-bar .nm { width: 150px; flex: none; }
.cv5-ar .cv5-bar .trk { flex: 1; height: 14px; background: var(--ar-track); border-radius: 3px; overflow: hidden; }
.cv5-ar .cv5-bar .trk i { display: block; height: 100%; min-width: 1px; }
.cv5-ar .cv5-bar .amt { margin-left: 0; width: 110px; flex: none; text-align: right; font-size: 11.5px; }
.cv5-ar .cv5-bar.total { border-top: 1px solid var(--cv5-line); margin-top: 5px; padding-top: 8px; }
.cv5-ar .cv5-bar.total .nm, .cv5-ar .cv5-bar.total .amt { font-weight: 700; color: var(--cv5-ink); }

/* ── 8. Notices ────────────────────────────────────────────────────────────── */

/* cv5-notice ships ok/warn/err with LITERAL hexes (they predate the token
   set), so the site-palette re-point above cannot reach them — they are
   restated here, AR-scoped, on the same hues + their deep-shade inks. */
.cv5-ar .cv5-notice.ok { background: var(--cv5-emer-soft); color: var(--ar-emer-ink); border: 1px solid var(--cv5-emer-border); }
.cv5-ar .cv5-notice.warn { background: var(--cv5-amber-soft); color: var(--ar-amber-ink); border: 1px solid var(--cv5-amber-border); }
.cv5-ar .cv5-notice.err { background: var(--cv5-rose-soft); color: var(--ar-rose-ink); border: 1px solid var(--cv5-rose-border); }
/* AR also carries informational gates (free tier, pending queue). */
.cv5-ar .cv5-notice.info { background: var(--cv5-info-soft); color: var(--ar-info-ink); border: 1px solid var(--cv5-info-border); }
.cv5-ar a.cv5-notice:hover { border-color: var(--cv5-navy); }

/* ── 9. Never-chase trust card (.dnd) — retint the hardcoded greens ────────── */
.cv5-ar .dnd { background: var(--cv5-emer-soft); border-color: var(--cv5-emer-border); border-radius: 12px; }
.cv5-ar .dnd .r { border-top-color: var(--cv5-emer-border); }

/* ── 10. Cell grids (entity rollup / deductions inside a cv5-card) ─────────── */
.cv5-ar .ar-cells { display: flex; flex-wrap: wrap; gap: 10px; }
.cv5-ar .ar-cells .cell { border: 1px solid var(--cv5-line); border-radius: 9px; padding: 9px 13px; }
.cv5-ar .ar-cells .cell .cn { font-size: 13px; font-weight: 600; color: var(--cv5-ink); }
.cv5-ar .ar-cells .cell .cv { font-size: 15px; font-weight: 700; color: var(--cv5-ink); }
.cv5-ar .ar-cells .cell .cs { font-size: 11.5px; color: var(--cv5-ink3); }

/* ── 11. Worklist (cv5-grid) inner cell helpers ────────────────────────────── */
.cv5-ar .cv5-grid .ln { font-weight: 600; color: var(--cv5-ink); }
.cv5-ar .cv5-grid .sub2 { font-size: 10.5px; color: var(--cv5-ink3); font-weight: 400; }

/* ── 12. Setup connect hub — uniform source cards (founder round 2) ──────────
   «выровняй все кнопки подключения»: every source is ONE flex-column card in
   ONE grid — title/badge row, description, then the action pinned to the
   card's bottom edge with margin-top:auto, so the Connect buttons sit on one
   line across the row. The buttons share one min-height / min-width. */
.cv5-ar .ar-srcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cv5-ar .ar-srccard { display: flex; flex-direction: column; border: 1px solid var(--cv5-line); border-radius: 10px; background: var(--cv5-card); padding: 13px 14px; }
.cv5-ar .ar-srccard .hd { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cv5-ar .ar-srccard .hd .nm { font-size: 13px; font-weight: 600; color: var(--cv5-ink); }
.cv5-ar .ar-srccard .ds { font-size: 12px; color: var(--cv5-ink3); margin: 5px 0 12px; }
/* Beta note (fpa/_connector_beta.html) tucks under the source line instead of a second 12px gap. */
.cv5-ar .ar-srccard .ds + .cv5-beta-note { margin-top: -8px; font-size: 11.5px; }
.cv5-ar .ar-srccard .hd .nm .cv5-beta { margin-left: 4px; }
.cv5-ar .ar-srccard .act { margin-top: auto; display: flex; align-items: center; gap: 8px; min-height: 30px; }
.cv5-ar .ar-srccard .act .mini2 { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; min-height: 30px; text-decoration: none; }
.cv5-ar .ar-srccard .act .st { display: inline-flex; align-items: center; min-height: 30px; }
@media (max-width: 980px) { .cv5-ar .ar-srcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cv5-ar .ar-srcgrid { grid-template-columns: 1fr; } }

/* ============================================================================
   ROUND 3 (founder, 2026-08-09) — density, semantic tiles, readable aging,
   workable worklist. Everything below is scoped under .cv5-ar and uses ONLY
   the shipped fpa-cockpit.css tokens (no new hexes, no dark mode, no
   monospace). The FP&A cockpit stays the reference SYSTEM; AR is tightened
   one notch inside it because AR money strings are 2-3× longer than FP&A's
   («RUB 107,134,881.61» vs «$1.2M»), which is what made the same scale read
   as «слишком все крупное» here and not there.
   ============================================================================ */

/* ── 14. Density: one notch tighter than the FP&A reference ────────────────── */

/* Fundamentals / exception tiles: 21px value → 17px, 12/14 padding → 9/11,
   10px grid gap → 8. Six tiles now fit a laptop row without wrapping an
   8-digit amount. */
.cv5-ar .cv5-kpis { gap: 8px; margin-bottom: 10px; }
.cv5-ar .cv5-kpi { padding: 9px 11px; border-radius: 9px; }
.cv5-ar .cv5-kpi .l { font-size: 9.5px; gap: 4px; }
.cv5-ar .cv5-kpi .v { font-size: 17px; margin-top: 4px; }
.cv5-ar .cv5-kpi .v.abst { font-size: 14.5px; }
.cv5-ar .cv5-kpi .s { font-size: 10.5px; margin-top: 3px; }

/* Hero plaque: 38px is unreadable-wide at nine significant digits. */
.cv5-ar .cv5-kband { gap: 10px; margin-bottom: 10px; }
.cv5-ar .cv5-kbig, .cv5-ar .cv5-kpale { padding: 13px 16px; border-radius: 11px; }
.cv5-ar .cv5-kbig .n { font-size: 27px; margin-top: 5px; }
.cv5-ar .cv5-kpale .n { font-size: 23px; margin-top: 5px; }
.cv5-ar .cv5-kbig .l, .cv5-ar .cv5-kpale .l { font-size: 10.5px; }
.cv5-ar .cv5-kbig .s, .cv5-ar .cv5-kpale .s { font-size: 11.5px; margin-top: 5px; }

/* Cards / charts / notices: same rhythm, less air between them. */
.cv5-ar .cv5-card { padding: 12px 14px; margin-bottom: 10px; }
.cv5-ar .cv5-chart { padding: 12px 14px 10px; margin-bottom: 10px; }
.cv5-ar .cv5-notice { margin-bottom: 10px; padding: 8px 12px; font-size: 12.5px; }
.cv5-ar .cv5-explain { margin-bottom: 10px; }
.cv5-ar .cv5-ptitle { margin: 2px 0 10px; }
/* Section sub-heading inside the page (Exceptions / Worklist). */
.cv5-ar .cv5-ptitle.tight { margin: 12px 0 8px; }
.cv5-ar .cv5-ptitle h2.sec { font-size: 14.5px; }
/* The setup page's title is the document's <h1> (every sample entry page
   carries one). Tailwind preflight resets h1 to inherit, so mirror the
   .cv5.cv5-fpa .cv5-ptitle h2 rule: promoting the tag changes nothing
   visually. */
.cv5-ar .cv5-ptitle h1 { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
.cv5-ar .cv5-fbar { gap: 7px; margin-bottom: 8px; }
.cv5-ar .ar-cells .cell { padding: 7px 11px; }

/* ── 15. Semantic tile tones — colour AND shape, never decoration ───────────
   The founder asked for coloured boxes; the rule we hold ourselves to is that
   a colour must MEAN something. Four states only, straight off the shipped
   palette: rose = a hard problem in the book, amber = waiting on the human,
   emerald = handled / on track, blue = the autopilot is doing it. A tile with
   no state stays white. Each tone also carries a distinct .tmark SHAPE so the
   meaning survives a colour-blind read or a greyscale print. */
.cv5-ar .cv5-kpi.tone-crit { background: var(--cv5-rose-soft); border-color: var(--cv5-rose-border); box-shadow: inset 3px 0 0 var(--cv5-rose); }
.cv5-ar .cv5-kpi.tone-attn { background: var(--cv5-amber-soft); border-color: var(--cv5-amber-border); box-shadow: inset 3px 0 0 var(--cv5-amber); }
.cv5-ar .cv5-kpi.tone-good { background: var(--cv5-emer-soft); border-color: var(--cv5-emer-border); box-shadow: inset 3px 0 0 var(--cv5-emer); }
.cv5-ar .cv5-kpi.tone-info { background: var(--cv5-info-soft); border-color: var(--cv5-info-border); box-shadow: inset 3px 0 0 var(--cv5-info); }
/* Tile VALUES sit on the matching tint, so they use the deep shade of the
   same site hue (see the --ar-*-ink note in section 0) — the base hue would
   fall under AA on its own 8% wash. Markers, borders and fills above keep
   the site hue itself. */
.cv5-ar .cv5-kpi.tone-crit .v { color: var(--ar-rose-ink); }
.cv5-ar .cv5-kpi.tone-attn .v { color: var(--ar-amber-ink); }
.cv5-ar .cv5-kpi.tone-good .v { color: var(--ar-emer-ink); }
.cv5-ar .cv5-kpi.tone-info .v { color: var(--ar-info-ink); }
.cv5-ar .cv5-kpi .tmark { width: 7px; height: 7px; flex: none; display: inline-block; }
.cv5-ar .cv5-kpi.tone-good .tmark { border-radius: 50%; background: var(--cv5-emer); }
.cv5-ar .cv5-kpi.tone-info .tmark { border-radius: 50%; background: var(--cv5-info); }
.cv5-ar .cv5-kpi.tone-attn .tmark { transform: rotate(45deg); background: var(--cv5-amber); }
.cv5-ar .cv5-kpi.tone-crit .tmark { border-radius: 1px; background: var(--cv5-rose); }
/* Legacy alias — the pre-round-3 attention class kept working. */
.cv5-ar .cv5-kpi.warn { background: var(--cv5-amber-soft); border-color: var(--cv5-amber-border); box-shadow: inset 3px 0 0 var(--cv5-amber); }

/* ── 16. Aging — rows, not a stacked bar with overlapping labels ────────────
   Five buckets whose amounts span 3 500× used to be printed INSIDE one 26px
   strip, so the numbers landed on top of each other. Each bucket now owns a
   row: label · invoice count · proportional track · exact amount. The track
   is linear (honest — a negligible bucket must LOOK negligible) with a
   minimum sliver so a 0.01% bucket is still visible and clickable. */
.cv5-ar .ag-strip { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 8px 0 10px; background: var(--ar-track); }
.cv5-ar .ag-strip i { display: block; min-width: 3px; cursor: pointer; }
.cv5-ar .ag-rows { display: flex; flex-direction: column; }
.cv5-ar .ag-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--cv5-line); cursor: pointer; }
.cv5-ar .ag-row:first-child { border-top: none; }
.cv5-ar .ag-row:hover { background: var(--ar-hover); }
.cv5-ar .ag-row:focus-visible { outline: 2px solid var(--cv5-navy); outline-offset: -2px; }
.cv5-ar .ag-row .nm { flex: none; width: 168px; font-size: 12.5px; color: var(--cv5-ink2); display: flex; align-items: center; gap: 7px; }
.cv5-ar .ag-row .nm .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cv5-ar .ag-row .ct { flex: none; width: 92px; font-size: 11px; color: var(--cv5-ink3); }
.cv5-ar .ag-row .trk { flex: 1; min-width: 40px; height: 10px; background: var(--ar-track); border-radius: 3px; overflow: hidden; }
.cv5-ar .ag-row .trk i { display: block; height: 100%; min-width: 3px; border-radius: 3px; }
.cv5-ar .ag-row .amt { flex: none; width: 150px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--cv5-ink); }
.cv5-ar .ag-row.total { border-top: 1px solid var(--cv5-line-strong); cursor: default; margin-top: 2px; padding-top: 7px; }
.cv5-ar .ag-row.total:hover { background: none; }
.cv5-ar .ag-row.total .nm, .cv5-ar .ag-row.total .amt { font-weight: 700; color: var(--cv5-ink); }
@media (max-width: 720px) {
  .cv5-ar .ag-row { flex-wrap: wrap; gap: 4px 10px; }
  .cv5-ar .ag-row .nm { width: auto; flex: 1; }
  .cv5-ar .ag-row .ct { width: auto; }
  .cv5-ar .ag-row .amt { width: auto; flex: none; }
  .cv5-ar .ag-row .trk { flex: 1 0 100%; order: 3; }
}

/* Aging ramp as CLASSES, not inline hexes (round 4). The bucket colours used
   to come from a Jinja macro returning Tailwind hexes (#a7f3d0 … #f43f5e) —
   five colours that appear nowhere on the site. They are now three site hues
   and their tints (section 0), applied by bucket class, so the template
   carries only the DATA (flex ratio / width %) and the palette lives in one
   place. The legacy _body.html keeps the macro; only the v5 cockpit moved. */
.cv5-ar .ag-b-current { background: var(--ar-ag-current); }
.cv5-ar .ag-b-days_1_30 { background: var(--ar-ag-1-30); }
.cv5-ar .ag-b-days_31_60 { background: var(--ar-ag-31-60); }
.cv5-ar .ag-b-days_61_90 { background: var(--ar-ag-61-90); }
.cv5-ar .ag-b-days_91_plus { background: var(--ar-ag-91); }
.cv5-ar .ag-b-unknown { background: var(--ar-ag-unknown); }

/* The term-unknown line is inside the aging card but NOT part of the ramp:
   dashed rule above it, muted label, no age. It reads as "this money is in
   the book but off the scale", which is exactly its meaning. */
.cv5-ar .ag-row.unknown { border-top: 1px dashed var(--cv5-line-strong); }
.cv5-ar .ag-row.unknown .nm { color: var(--cv5-ink3); }

/* ── 16b. Unconfirmed payment terms (round 4) ───────────────────────────────
   The banner is the page's one prominent, actionable statement: what is
   unknown, how much money it covers, that nobody is being chased about it,
   and the single field that fixes it. Built on the shipped .cv5-notice.warn
   chrome (now on the site's finance amber) so it belongs to the same system
   as the other honesty banners rather than becoming a new device. */
.cv5-ar .cv5-notice.ar-terms { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; padding: 11px 14px; }
.cv5-ar .ar-terms .tx { flex: 1 1 320px; min-width: 0; }
.cv5-ar .ar-terms .tx b { display: block; margin-bottom: 2px; }
.cv5-ar .ar-terms .nt { margin-top: 4px; font-size: 11.5px; opacity: .82; }
.cv5-ar .ar-terms .act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.cv5-ar .ar-terms .act .cv5-btn { white-space: nowrap; cursor: pointer; }
.cv5-ar .ar-terms .act .cv5-btn:focus-visible { outline: 2px solid var(--cv5-navy); outline-offset: 2px; }

/* Per-row marker in the worklist's due-date cell. Dotted underline + help
   cursor = the same "there is a reason, hover it" affordance the honest
   «Имени нет в учёте» cell already uses, so the two read as one habit. */
.cv5-ar .arv5-wl .noterm-b {
  font-size: 11px; font-weight: 600; font-style: italic; color: var(--ar-amber-ink);
  border-bottom: 1px dotted var(--cv5-amber-border); cursor: help; white-space: nowrap;
}

/* ── 17. Worklist — a table a collector can actually work ───────────────────
   Wide by design (eight facts per row). It scrolls INSIDE its own container
   so the page body never scrolls sideways; the header sticks while scrolling
   a long book. Money is tabular + right-aligned; overdue money and the
   days column carry the aging temperature. */
.cv5-ar .arv5-tools { margin-bottom: 10px; }
.cv5-ar .arv5-tools .cv5-search { padding: 6px 10px; min-width: 200px; }
.cv5-ar .arv5-tools .cv5-search input { font-size: 12.5px; }
.cv5-ar .arv5-count { font-size: 11px; color: var(--cv5-ink3); white-space: nowrap; }
.cv5-ar .arv5-tblwrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.cv5-ar .arv5-tblwrap .cv5-grid { min-width: 940px; }
.cv5-ar .arv5-wl th { cursor: default; position: sticky; top: 0; z-index: 1; }
.cv5-ar .arv5-wl th[data-arv5-sort] { cursor: pointer; user-select: none; }
.cv5-ar .arv5-wl th[data-arv5-sort]:hover { color: var(--cv5-ink); }
.cv5-ar .arv5-wl th:focus-visible { outline: 2px solid var(--cv5-navy); outline-offset: -2px; }
.cv5-ar .arv5-wl td { padding: 7px 11px; }
.cv5-ar .arv5-wl .ln { font-weight: 600; color: var(--cv5-ink); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.cv5-ar .arv5-wl .doc { color: var(--cv5-ink); font-variant-numeric: tabular-nums; }
.cv5-ar .arv5-wl .money { font-weight: 600; color: var(--cv5-ink); }
.cv5-ar .arv5-wl .late1 { color: var(--cv5-amber); font-weight: 600; }
.cv5-ar .arv5-wl .late2 { color: var(--cv5-rose); font-weight: 700; }
/* The honest "your books never sent us a name" cell — never a hash. */
.cv5-ar .arv5-wl .unnamed { font-weight: 500; font-style: italic; color: var(--cv5-ink4); border-bottom: 1px dotted var(--cv5-line-strong); cursor: help; }
.cv5-ar .arv5-wl .sub2 { font-size: 10.5px; color: var(--cv5-ink3); font-weight: 400; margin-top: 2px; white-space: normal; }
.cv5-ar .arv5-wl .risk { margin-left: 6px; font-size: 11px; }

/* ── 17b. By-counterparty view (founder 2026-08-19) ─────────────────────────
   The same rows grouped by who owes the money: a collector calls a company,
   not a document. The group row is the summary; its invoices sit underneath,
   collapsed, and open in place. Two views, one at a time — the switch reuses
   the filter-pill look so it reads as "which list", not as a new control. */
.cv5-ar .arv5-views { margin-bottom: 10px; }
.cv5-ar .arv5-views .fp { cursor: pointer; }
.cv5-ar .arv5-views .fp:focus-visible { outline: 2px solid var(--cv5-navy); outline-offset: 2px; }
.cv5-ar .arv5-cpcover { margin: 0 0 8px; font-size: 12px; }
.cv5-ar .arv5-cp .cpgrp { cursor: pointer; }
.cv5-ar .arv5-cp .cpgrp:hover { background: var(--cv5-hover, rgba(0, 0, 0, .02)); }
.cv5-ar .arv5-cp .cpgrp:focus-visible { outline: 2px solid var(--cv5-navy); outline-offset: -2px; }
/* The twisty turns, so "there is more inside" is legible without colour. */
.cv5-ar .arv5-cp .cptw {
  display: inline-block; width: 12px; margin-right: 4px; color: var(--cv5-ink3);
  transition: transform .12s ease;
}
.cv5-ar .arv5-cp .cpgrp[aria-expanded="true"] .cptw { transform: rotate(90deg); }
/* An invoice inside a group: indented, quieter, and never mistaken for a
   group row — it is one document, not an account. */
.cv5-ar .arv5-cp .cpinv > td { background: var(--cv5-sunken, rgba(0, 0, 0, .015)); font-size: 12px; }
.cv5-ar .arv5-cp .cpinv > td:first-child { padding-left: 30px; }
.cv5-ar .arv5-cp .cpinv { cursor: pointer; }
.cv5-ar .arv5-cp .cpmix { display: block; margin-top: 2px; font-size: 10.5px; }
/* The per-state count beside each chip in a mixed account. */
.cv5-ar .arv5-cp .cpn { margin: 0 6px 0 3px; font-size: 11px; color: var(--cv5-ink3); }

/* ── 18. Onboarding checklist — round-2 states ───────────────────────────────
   .onb-note = the honest done-fact («Connected: QuickBooks Online — using
   your workspace connection») on the emerald is-done row. .onb-waitpill =
   the neutral pending state (connected-but-empty book): informational, not
   a CTA. The side column also hosts the mailbox step's TWO one-click OAuth
   CTAs, so it flexes with a gap. */
.cv5-ar .onb-side { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cv5-ar .onb-note { color: var(--ar-emer-ink); }
.cv5-ar .onb-waitpill { font-size: 11px; font-weight: 600; color: var(--cv5-ink3); background: var(--ar-track); border: 1px solid var(--cv5-line-strong); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* ── 19. Reminders ready (free cockpit + public sample) ──────────────────────
   The letters a paid plan would queue today, rendered by code. A header row
   (title + the ready count + the preview/sample tag), then one <details> per
   letter — invoice · customer · step · amount on the summary line, the full
   subject + body (pre-wrapped, exactly as sent) inside. */
.cv5-ar .ar-letters-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cv5-ar .ar-letters-n { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--cv5-navy); }
.cv5-ar .ar-letters-s { margin: 6px 0 0; font-size: 12.5px; color: var(--cv5-ink3); }
.cv5-ar .ar-letters-s a { font-weight: 600; text-decoration: underline; }
.cv5-ar .ar-letters-tag { font-size: 11px; font-weight: 600; color: var(--cv5-navy); background: var(--ar-track); border: 1px solid var(--cv5-line-strong); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cv5-ar .ar-letters-list { margin-top: 12px; display: grid; gap: 8px; }
.cv5-ar .ar-letter { border: 1px solid var(--cv5-line); border-radius: 10px; background: var(--cv5-card); }
.cv5-ar .ar-letter > summary { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; font-size: 13px; list-style: none; }
.cv5-ar .ar-letter > summary::-webkit-details-marker { display: none; }
.cv5-ar .ar-letter > summary .inv { font-weight: 700; color: var(--cv5-ink); }
.cv5-ar .ar-letter > summary .who { color: var(--cv5-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv5-ar .ar-letter > summary .stp { color: var(--cv5-ink3); font-size: 12px; white-space: nowrap; }
.cv5-ar .ar-letter > summary .amt { font-weight: 700; color: var(--cv5-ink); text-align: right; }
.cv5-ar .ar-letter-body { border-top: 1px solid var(--cv5-line); padding: 12px 14px 14px; }
.cv5-ar .ar-letter-body .subj { margin: 0 0 8px; font-size: 13px; }
.cv5-ar .ar-letter-body pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; line-height: 1.55; color: var(--cv5-ink2); }
.cv5-ar .ar-letters-cta { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cv5-ar .ar-letter > summary { grid-template-columns: 1fr auto; }
  .cv5-ar .ar-letter > summary .who, .cv5-ar .ar-letter > summary .stp { grid-column: 1 / -1; }
}

/* ── 20. Setup actions on the FP&A blue (2026-10-08) ─────────────────────────
   The setup page's CTAs used the legacy amber `.btn.amber` / `.mini2`; they
   now use the FP&A cockpit's `.cv5dr-act primary` (fpa-cockpit.css). The
   source cards keep their aligned footer geometry. */
.cv5-ar .ar-srccard .act .cv5dr-act { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; min-height: 30px; }
.cv5-ar #ar-sources, .cv5-ar #ar-stripe { scroll-margin-top: 80px; }

/* Onboarding at phone width: the step's action(s) drop BELOW its text
   instead of squeezing the text column to one word per line; two OAuth
   buttons (Gmail / Outlook) wrap rather than overflow the card. */
@media (max-width: 640px) {
  .cv5-ar .onb-step { flex-wrap: wrap; align-items: flex-start; }
  .cv5-ar .onb-txt { flex: 1 1 calc(100% - 40px); }
  .cv5-ar .onb-side { margin-left: 36px; flex: 1 1 100%; justify-content: flex-start; }
  .cv5-ar .onb-side .cv5dr-act { white-space: normal; }
  .cv5-ar .onb .onb-hd { flex-wrap: wrap; }
}

/* ── 21. One breakdown, stated once (2026-10-08) ─────────────────────────────
   .ar-partition = the book in one sentence under the hero (the parts add up
   to the open total). .ar-upcoming = the hero's not-yet-due line.
   .ar-cardsub = a card's one-line explanation (replaces a dangling «?»).
   .ar-lang = the letter-language note above letter previews. */
.cv5-ar .ar-partition { margin: 10px 0 4px; font-size: 13px; line-height: 1.5; color: var(--cv5-ink2); }
.cv5-ar .ar-partition b { color: var(--cv5-ink); font-weight: 700; }
.cv5-ar .cv5-kbig .ar-upcoming { margin-top: 6px; opacity: .85; }
.cv5-ar .ar-cardsub { margin: 2px 0 10px; font-size: 12.5px; color: var(--cv5-ink3); }
.cv5-ar .ar-lang { margin: 6px 0 0; display: inline-block; font-size: 12px; font-weight: 600; color: var(--cv5-navy); background: var(--ar-track); border: 1px solid var(--cv5-line-strong); border-radius: 8px; padding: 4px 10px; }
.cv5-ar .ar-seeall { font-size: 13px; font-weight: 600; color: var(--cv5-terra); text-decoration: none; }
.cv5-ar .ar-seeall:hover { text-decoration: underline; }
.cv5-ar .arv5-cp .cpst { display: inline-flex; align-items: center; white-space: nowrap; }
.cv5-ar .arv5-wl .chip .sh { display: none; }
@media (max-width: 640px) {
  .cv5-ar .arv5-wl .chip .lg { display: none; }
  .cv5-ar .arv5-wl .chip .sh { display: inline; }
}

/* Phone width: the worklist keeps customer · amount · days · STATUS on
   screen; the secondary columns (due date, document age, how they pay, next
   step, owner) hide instead of pushing Status off the right edge. */
@media (max-width: 640px) {
  .cv5-ar .arv5-wl .m-hide { display: none; }
  .cv5-ar .arv5-tblwrap .cv5-grid { min-width: 0; width: 100%; }
  .cv5-ar .arv5-tblwrap .arv5-wl td, .cv5-ar .arv5-tblwrap .arv5-wl th { padding: 7px 6px; }
  .cv5-ar .arv5-wl .ln { max-width: 120px; white-space: normal; }
  .cv5-ar .arv5-wl .risk { display: none; }
  .cv5-ar .arv5-cp .cpst { display: flex; margin: 2px 0; }
  /* fpa-cockpit.css turns every .cv5-grid into a nowrap block below 1000px;
     this table already scrolls in its own wrapper, so it stays a table and
     its headers / chips may wrap. */
  .cv5-ar .arv5-tblwrap .arv5-wl { display: table; white-space: normal; }
  .cv5-ar .arv5-tblwrap .arv5-wl th { white-space: normal; font-size: 10px; line-height: 1.25; }
  .cv5-ar .arv5-tblwrap .arv5-wl .chip { white-space: normal; line-height: 1.25; }
  .cv5-ar .arv5-wl .money { white-space: nowrap; }
  .cv5-ar .arv5-cp .cpinv > td:first-child { padding-left: 14px; }
}

/* ── 22. Customer page (deep link / no-JS) — the drawer laid out in the page.
   .evd is the fixed slide-in; .evd-page pins it into the flow at drawer
   width, keeps its header band + tables, and drops the close «×». */
.cv5-ar .evd.evd-page { position: static; transform: none; height: auto; width: 100%; max-width: 660px; z-index: auto; border: 1px solid var(--cv5-line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); background: var(--cv5-card, #fff); }
.cv5-ar .evd.evd-page .body { overflow: visible; }
.cv5-ar .evd.evd-page [data-arv5-close] { display: none; }

/* ── 23. Reminders queue — one line per letter, sticky bulk approve ─────────
   .dcard is a <details>: the summary is the letter's one-line identity;
   the subject/body/actions open on click. The queue header (.qh.sticky)
   stays under the site header while the list scrolls. */
.cv5-ar .dcard > summary.h { list-style: none; cursor: pointer; flex-wrap: nowrap; }
.cv5-ar .dcard > summary.h::-webkit-details-marker { display: none; }
.cv5-ar .dcard > summary .dinv { font-weight: 700; color: var(--cv5-ink); font-size: 13px; white-space: nowrap; }
.cv5-ar .dcard > summary .dsub { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--cv5-ink2); }
.cv5-ar .dcard[open] > summary .dsub { visibility: hidden; }
.cv5-ar .dcard > summary .vb { flex: none; }
.cv5-ar .dcard { padding: 10px 14px; margin-bottom: 8px; }
.cv5-ar .qh.sticky { position: sticky; top: 64px; z-index: 5; background: var(--cv5-bg, #f5f7fb); padding: 8px 0; margin-bottom: 8px; }
@media (max-width: 640px) {
  .cv5-ar .dcard > summary.h { flex-wrap: wrap; }
  .cv5-ar .dcard > summary .dsub { flex-basis: 100%; order: 5; }
  .cv5-ar .qh.sticky { top: 56px; }
}

/* ── 24. Shell polish (2026-10-08) ───────────────────────────────────────────
   (a) The two slide-in drawers sit off-screen (translateX(100%)) when
       closed, but their box-shadow still spilled ~70px back into the page —
       the grey fade on the right edge of the role header at desktop width.
       A closed drawer casts no shadow.
   (b) The tab labels sat at the TOP of a 44px row (block anchors with a
       17px line box), leaving a dead band under them before the content —
       FP&A fills that band with its sub-tab row, AR has none. Labels are
       centred in a tighter row, and the content starts closer. */
.cv5-ar .evd:not(.open):not(.evd-page),
.cv5-ar .v5-evd:not(.v5-open) { box-shadow: none; }
.cv5-ar .cv5sh-nav { min-height: 0; }
.cv5-ar .cv5sh-nav .cv5-tab { display: inline-flex; align-items: center; height: 40px; min-height: 0; }
.cv5-ar .cv5-wrap { padding-top: 12px; }

/* ── 25. Hero row balance (2026-10-08) ───────────────────────────────────────
   The promises card was a lone number in a half-width box. It now takes a
   third of the row and lists the open promises (who · by when · amount) plus
   the kept / broken record. */
.cv5-ar .cv5-kband:not(.one) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.cv5-ar .ar-promcard { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.cv5-ar .ar-promcard .n { font-size: 22px; }
.cv5-ar .ar-promlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cv5-ar .ar-promlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--cv5-line); }
.cv5-ar .ar-promlist .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cv5-ink); font-weight: 600; }
.cv5-ar .ar-promlist .by { color: var(--cv5-ink3); font-size: 11.5px; }
.cv5-ar .ar-promlist .amt { font-weight: 700; color: var(--cv5-ink); }
.cv5-ar .ar-promrec { margin-top: 6px; font-size: 12px; color: var(--cv5-ink3); }
.cv5-ar .ar-promlink { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--cv5-terra); text-decoration: none; }
.cv5-ar .ar-promlist li.st-kept .by { color: var(--ar-emer-ink, #0a7a55); font-weight: 600; }
.cv5-ar .ar-promlist li.st-broken .by { color: var(--cv5-rose, #c0392b); font-weight: 600; }
/* The book strip inside the navy hero (white on navy). */
.cv5-ar .cv5-kbig { display: flex; flex-direction: column; }
.cv5-ar .ar-split { margin-top: auto; padding-top: 14px; }
.cv5-ar .ar-split .lead { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 8px; }
.cv5-ar .ar-split .cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cv5-ar .ar-split .c { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 9px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.cv5-ar .ar-split .c .k { font-size: 11.5px; line-height: 1.3; color: rgba(255, 255, 255, .82); }
.cv5-ar .ar-split .c .a { font-size: 14px; font-weight: 700; color: #fff; }
.cv5-ar .ar-split .c-safe { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
@media (max-width: 1000px) { .cv5-ar .cv5-kband:not(.one) { grid-template-columns: 1fr; } }