.overview__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-block-end:var(--space-6); }
.overview__title { margin:0; font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--p-ink); }
.overview__sub { margin:var(--space-1) 0 0; color:var(--p-ink-2); }
.overview__actions { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.overview__refresh { min-block-size:36px; padding:0 var(--space-4); border:1px solid var(--p-line); border-radius:var(--radius-pill); color:var(--p-ink); background:var(--p-surface); font-weight:600; cursor:pointer; }
.overview__refresh:hover { border-color:var(--p-brand); }
.overview__refresh:disabled { opacity:.55; cursor:wait; }
.overview__open { text-decoration:none; white-space:nowrap; }
/* The last column is 380px and the gap 16px — the SAME as the body grid below,
   so the right-hand edge of these tiles lines up with the Engagement and
   Receivable aging column rather than falling a few pixels short of it.
   Three equal columns on a 16px gap do not land on a 380px track, and the
   mismatch reads as a wobble down the right side of the page. */
.overview__metrics { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 380px; gap:16px; margin-block-end:16px; }
@media (max-width: 1100px) { .overview__metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 700px) { .overview__metrics { grid-template-columns:1fr; } }
.overview__metrics--money .overview__metric-value { font-size:20px; }
.overview__metric { display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-3); padding:var(--space-5); border:1px solid var(--p-line); border-radius:var(--radius-lg); background:var(--p-surface); }
.overview__metric-icon { grid-row:1 / span 2; display:grid; place-items:center; inline-size:36px; block-size:36px; border-radius:var(--radius-md); color:var(--p-brand); background:var(--p-brand-soft); }
.overview__metric-label { color:var(--p-ink-2); font-size:12px; font-weight:500; }
/* NO font-family here. The element already carries `.num`, and `.num` sets
   JetBrains Mono — but a same-specificity rule declared later in the cascade
   silently beat it, so the biggest figures on the page were the only ones in
   Poppins. Size and colour only; the numerals' face comes from `.num`. */
.overview__metric-value { font-size:24px; color:var(--p-ink); }
/* The comparison chip sits under the figure, in the value column.
 *
 * NOT coloured by direction. Money out rising is not good news, and one
 * up-is-green rule across all three tiles would assert that it is. The arrow
 * states the direction; the accountant supplies the meaning. */
.overview__delta { grid-column:2; display:flex; align-items:baseline; gap:var(--space-2); margin-block-start:2px; color:var(--p-ink-2); font-size:12px; font-variant-numeric:tabular-nums; }
/* "vs Jul" is a label, not a figure — back to the UI face beside the mono
   percentage it qualifies. */
.overview__delta-vs { font-family:var(--font-sans); color:var(--p-ink-3, var(--p-ink-2)); font-size:11px; }
/* The blocked figures. Muted on purpose — they must not compete with the
   figures that ARE measured, and must not look like a value of their own.
   `--blocked` overrides the display font so "Unavailable" reads as words
   rather than as a number in the numeric slot. */
/* THE TEN SNAPSHOT CARDS — handoff §6.3.
 *
 * `repeat(5,1fr)`, gap 12px, exactly as specified, so the ten fall as two rows
 * of five. Below 1200px the spec makes the whole app responsive (C4), so the
 * count steps down rather than forcing a horizontal scroll on a financial
 * grid. Label 11px --p-ink-3, value mono 21px, then a hairline and the
 * provenance line — the card's anatomy is the spec's, not an approximation. */
.overview__figures { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-block-end:var(--space-5); }
@media (max-width: 1200px) { .overview__figures { grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 900px)  { .overview__figures { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px)  { .overview__figures { grid-template-columns:1fr; } }

.figure { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--p-line); border-radius:var(--radius-lg); background:var(--p-surface); }
.figure__label { color:var(--p-ink-3, var(--p-ink-2)); font-size:11px; font-weight:500; }
.figure__value { font-family:var(--font-mono, var(--font-display)); font-size:21px; color:var(--p-ink); line-height:1.2; }
/* "Unavailable" is words, not a measurement — it must not sit in the numeric
   slot wearing a number's font and size. */
.figure__value--blocked { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--p-ink-2); }
.figure__source { margin-block-start:2px; padding-block-start:8px; border-block-start:1px solid var(--p-line); color:var(--p-ink-3, var(--p-ink-2)); font-size:11px; }
.figure--blocked { border-style:dashed; background:transparent; }

/* RECEIVABLE AGING — bands with amounts and proportional bars (§6.3).
 *
 * The track is logical-property sized so the fill grows from the inline start,
 * which is the RIGHT edge in Arabic. A `width` here would grow leftward in an
 * RTL layout and read as the opposite of what it means. */
/* §6.3's body: main column (chart, Needs attention) beside a side column
   (close status, Receivable aging). Below 1100px the side column falls under
   the main one rather than being squeezed — an aging band 90px wide states
   nothing, and the handoff's C4 makes the app responsive rather than scrolled. */
/* Measured from the standalone, not approximated:
     grid-template-columns: 1fr 380px; gap: 16px; align-items: start
   with each column a 16px flex stack. */
.overview__body { display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:16px; align-items:start; }
.overview__main,.overview__side { display:flex; flex-direction:column; gap:16px; min-inline-size:0; }
@media (max-width: 1100px) { .overview__body { grid-template-columns:minmax(0, 1fr); } }

.overview__revchart,.overview__attention,.overview__engagement { margin-block-end:0; }

/* THE CHART, in §6.3's form: paired vertical columns, 26px wide, radius
   5px 5px 0 0, a 190px plot, month labels beneath, legend above.
   `align-items:end` is what makes the columns grow UP from the axis; without
   it a percentage height measures from the top and the chart reads inverted. */
.chart__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; padding:var(--space-5) var(--space-5) 0; }
.chart__legend { display:flex; gap:var(--space-4); color:var(--p-ink-2); font-size:11px; }
.chart__legend span { display:flex; align-items:center; gap:var(--space-2); }
.chart__dot { inline-size:8px; block-size:8px; border-radius:50%; }
.chart__dot--in { background:var(--p-brand); }
.chart__dot--out { background:var(--p-bar, var(--p-warn)); }
/* Columns SPREAD across the card, as the design's seven months do. Crammed to
   the inline start with empty space beside them, the same bars read as a
   stray table rather than a chart — which is what they did. Each column takes
   an equal share, so two months and seven months both fill the plot. */
/* ONE axis across the whole plot, not a rule under each column.
 *
 * The baseline was on the pair, so two months drew two disconnected stubs
 * with a gap between them. An axis is a single line the bars all stand on —
 * that is what makes them comparable at a glance. */
.chart__plot { display:flex; align-items:flex-end; justify-content:center; gap:var(--space-6); overflow-x:auto; padding:var(--space-4) var(--space-5); border-block-end:1px solid var(--p-line); }
/* Columns are sized by their BARS, never stretched to fill.
 *
 * With flex:1 each column took half the card and its pair floated in the
 * middle of the empty half — two bars a hand's width apart. The design's
 * pairs are tight and the columns sit at their natural width; the plot is
 * centred so a short series reads as a chart rather than as a fragment. */
.chart__col { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; gap:0; }
.chart__pair { display:flex; align-items:flex-end; justify-content:center; gap:6px; block-size:190px; }
.chart__month { padding-block-start:8px; }
.chart__bar { inline-size:26px; border-radius:5px 5px 0 0; }
.chart__bar--in { background:var(--p-brand); }
.chart__bar--out { background:var(--p-bar, var(--p-warn)); }
.chart__month { color:var(--p-ink-2); font-size:11px; }

/* A section whose data is blocked states it inside its own card, keeping the
   heading the design specifies rather than vanishing from the page. */
.overview__blocked-panel { display:flex; align-items:flex-start; gap:var(--space-3); margin:var(--space-5); padding:var(--space-4); border:1px dashed var(--p-line-2, var(--p-line)); border-radius:var(--radius-md); color:var(--p-ink-2); font-size:12px; }

/* NEEDS ATTENTION — count, what it is, why it matters, and a way in. */
.attention { display:flex; flex-direction:column; }
.attention__row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-block-start:1px solid var(--p-line); color:inherit; text-decoration:none; }
.attention__row:first-child { border-block-start:none; }
.attention__row:hover { background:var(--p-surface-2, var(--p-brand-soft)); }
.attention__count { min-inline-size:44px; font-size:20px; color:var(--p-ink); }
.attention__body { display:flex; flex-direction:column; gap:2px; }
.attention__title { color:var(--p-ink); font-size:13px; font-weight:500; }
.attention__why { color:var(--p-ink-2); font-size:12px; }
.attention__go { color:var(--p-ink-2); display:flex; }
.attention__empty { padding:var(--space-4) var(--space-5); color:var(--p-ink-2); font-size:12px; }

/* ENGAGEMENT — the close steps the server actually defines. */
.engagement__steps { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5) var(--space-5) 0; }
.engagement__step { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--space-3); color:var(--p-ink-2); font-size:13px; }
.engagement__step--done { color:var(--p-ok); }
.engagement__step-label { color:var(--p-ink); }
.engagement__blocker { grid-column:2; color:var(--p-warn); font-size:12px; }
.overview__engagement-cta { display:inline-flex; margin:var(--space-4) var(--space-5) var(--space-5); }

.overview__aging { margin-block-end:0; }
.aging { display:flex; flex-direction:column; gap:10px; padding:var(--space-5); }
/* The four-column band this replaced set `align-items:center`, which survived
   the rewrite to a column flex and centred every row's contents instead of
   letting them fill the card — the label and amount huddled in the middle and
   the bar shrank to nothing. One set of rules now, no leftovers. */
.aging__band-label { color:var(--p-ink-2); font-size:12px; }
.aging__track { display:block; inline-size:100%; block-size:8px; border-radius:999px; background:var(--p-line); overflow:hidden; }
.aging__fill { display:block; block-size:100%; border-radius:999px; background:var(--p-brand); }
.aging__amount { font-size:13px; color:var(--p-ink); }
.aging__empty { padding:var(--space-2) 0; color:var(--p-ink-2); font-size:12px; }
.overview__blocked { margin-block-end:var(--space-5); }
.overview__blocked-title { margin-block-end:var(--space-3); color:var(--p-ink-2); font-size:13px; font-weight:600; }
.overview__metric--blocked { border-style:dashed; background:transparent; }
.overview__metric--blocked .overview__metric-icon { color:var(--p-ink-2); background:var(--p-surface-2, transparent); }
.overview__metric-value--blocked { font-family:inherit; font-size:14px; font-weight:500; color:var(--p-ink-2); }
.overview__blocked-note { display:flex; align-items:flex-start; gap:var(--space-2); margin-block-start:var(--space-3); color:var(--p-ink-2); font-size:12px; }
.overview__metric--muted .overview__metric-value { font-family:inherit; font-size:14px; font-weight:500; color:var(--p-ink-2); }
.overview__metric--muted .overview__metric-icon { color:var(--p-ink-2); background:var(--p-surface-2, transparent); }
.overview__metric--ok .overview__metric-icon { color:var(--p-ok); background:var(--p-ok-soft); }
.overview__metric--warn .overview__metric-icon { color:var(--p-warn); background:var(--p-warn-soft); }
.overview__notice,.overview__integrity,.overview__balance-note { display:flex; align-items:flex-start; gap:var(--space-2); color:var(--p-ink-2); font-size:12px; }
.overview__notice { padding:var(--space-3) var(--space-4); border:1px solid var(--p-warn); border-radius:var(--radius-md); }
.overview__chart { margin-block-end:var(--space-5); overflow:hidden; }
.overview__chart-legend { display:flex; gap:var(--space-4); padding:var(--space-3) var(--space-5) 0; color:var(--p-ink-2); font-size:11px; }
.overview__chart-legend span { display:flex; align-items:center; gap:var(--space-2); }
.overview__legend-dot { inline-size:8px; block-size:8px; border-radius:50%; background:var(--p-brand); }
.overview__legend-dot--in { background:var(--p-brand); }
.overview__legend-dot--out { background:var(--p-warn); }
.overview__chart-rows { display:grid; gap:var(--space-3); padding:var(--space-4) var(--space-5) var(--space-5); }
.overview__chart-row { display:grid; grid-template-columns:70px minmax(160px,1fr) 190px; gap:var(--space-4); align-items:center; }
.overview__month { color:var(--p-ink-2); font-size:11px; }
.overview__bars { display:grid; gap:4px; }
.overview__bar { display:block; block-size:7px; border-radius:var(--radius-pill); background:var(--p-brand); }
.overview__bar--in { background:var(--p-brand); }
.overview__bar--out { background:var(--p-warn); }
.overview__month-total { text-align:end; font-size:11px; color:var(--p-ink-2); }
.overview__activity { overflow:hidden; }
.overview__section-head { padding:var(--space-5); border-block-end:1px solid var(--p-line); }
.overview__section-title { margin:0; font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--p-ink); }
.overview__section-sub { margin:var(--space-1) 0 0; color:var(--p-ink-2); font-size:12px; }
/* 12.5px, which is what the design uses for its table rows — measured from
   the standalone around the transactions table, where it is the commonest
   size. The row set none at all, so the sans description inherited the base
   size while the mono figures beside it rendered visibly smaller: the same
   nominal size, two different apparent ones. */
.overview__row { display:grid; grid-template-columns:130px minmax(220px,1fr) 150px 150px; gap:var(--space-4); align-items:center; padding:var(--space-3) var(--space-5); border-block-end:1px solid var(--p-line); font-size:12.5px; }
.overview__row:last-child { border-block-end:0; }
.overview__row--head { color:var(--p-ink-3); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.overview__description { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Left, under its own column heading.
 *
 * Figures on a statement are conventionally right-aligned so the decimal
 * points stack — but this column's HEADER is left-aligned, and a heading that
 * does not sit above its values is worse than a column that does not stack:
 * the reader has to work out which heading owns which number. The figures are
 * tabular-nums, so they still align digit for digit down the column. */
.overview__amount { text-align:start; font-variant-numeric:tabular-nums; }
.overview__status { display:inline-flex; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:600; }
.overview__status--ok { color:var(--p-ok); background:var(--p-ok-soft); }
.overview__status--pending { color:var(--p-warn); background:var(--p-warn-soft); }
.overview__empty { display:grid; justify-items:center; gap:var(--space-2); padding:var(--space-10); text-align:center; color:var(--p-ink-2); }
.overview__empty--card { border:1px solid var(--p-line); border-radius:var(--radius-lg); background:var(--p-surface); }
.overview__empty h2,.overview__empty p { margin:0; }
.overview__integrity { margin-block-start:var(--space-4); }
.overview__balance-note { margin-block:var(--space-4) 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--p-surface-2); }
@media (max-width:900px) {
  .overview__metrics { grid-template-columns:1fr; }
  .overview__row { grid-template-columns:105px minmax(180px,1fr) 130px; }
  .overview__row > :last-child { display:none; }
  .overview__chart-row { grid-template-columns:60px minmax(140px,1fr); }
  .overview__month-total { grid-column:2; text-align:start; }
}
@media (max-width:600px) {
  .overview__head { display:block; }
  .overview__actions { margin-block-start:var(--space-4); }
  .overview__open { display:inline-flex; }
  .overview__activity { overflow-x:auto; }
  .overview__rows { min-inline-size:620px; }
}

/* The design's row: a tinted icon tile, the headline with its count, the
   reason beneath, and an action verb. The tile is NOT tinted by severity —
   readiness refuses to rank, so a red tile here would assert a judgement the
   data does not carry. */
.attention__icon { display:grid; place-items:center; inline-size:32px; block-size:32px; border-radius:var(--radius-md); color:var(--p-brand); background:var(--p-brand-soft); }
.attention__action { display:inline-flex; align-items:center; gap:4px; color:var(--p-brand); font-size:12px; font-weight:500; white-space:nowrap; }

/* The row's chip. Two tones only — see GAP_TONES for why "High risk" and
   "Blocking close" are not among them. */
.attention__head { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.chip { padding:2px 8px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; }
.chip--attention { color:var(--p-warn); background:var(--p-warn-soft, transparent); }
.chip--watch { color:var(--p-ink-2); background:var(--p-surface-2, transparent); }

/* THE SIDE COLUMN, to the prototype.
 *
 * Close status: a status chip on the right of every step, the sub-line under
 * the title, and the period/percentage/reviewer meta beneath the heading.
 * Aging: label and amount on one line with the bar full-width beneath, tinted
 * green → brand → amber → red as the debt ages. */
.engagement__meta { padding:0 var(--space-5) var(--space-3); color:var(--p-ink-2); font-size:12px; }
.engagement__steps { display:flex; flex-direction:column; gap:0; padding:0; }
.engagement__step { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); border-block-start:1px solid var(--p-line); }
.engagement__step-icon { display:flex; color:var(--p-ink-2); }
.engagement__step--done .engagement__step-icon { color:var(--p-ok); }
.engagement__step--blocked .engagement__step-icon { color:var(--p-risk, var(--p-warn)); }
.engagement__step--open .engagement__step-icon { color:var(--p-warn); }
.engagement__step-body { display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.engagement__step-label { color:var(--p-ink); font-size:13px; font-weight:500; }
.engagement__blocker { color:var(--p-ink-2); font-size:12px; }
.chip--done { color:var(--p-ok); background:var(--p-ok-soft, transparent); }
.chip--open { color:var(--p-warn); background:var(--p-warn-soft, transparent); }
.chip--blocked { color:var(--p-risk, var(--p-warn)); background:var(--p-risk-soft, transparent); }

/* One band: label left, amount right, bar beneath, rule between. Amounts are
   tinted only where the design tints them — Current, 61-90 and over 90. The
   middle bands stay in plain ink so the colour means "getting old" rather
   than decorating every row. */
.aging__band { display:flex; flex-direction:column; gap:8px; padding-block:12px; border-block-start:1px solid var(--p-line); }
.aging__band:first-child { border-block-start:none; padding-block-start:0; }
.aging__line { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.aging__band-label { color:var(--p-ink); font-size:13px; }
.aging__amount { font-size:14px; color:var(--p-ink); }
.aging__amount--notYetDue { color:var(--p-ok); }
.aging__amount--d61_90 { color:var(--p-warn); }
.aging__amount--d90_plus { color:var(--p-risk, var(--p-warn)); }
.aging__fill--notYetDue { background:var(--p-ok); }
.aging__fill--d1_30 { background:var(--p-brand); }
.aging__fill--d31_60 { background:var(--p-brand); }
.aging__fill--d61_90 { background:var(--p-warn); }
.aging__fill--d90_plus { background:var(--p-risk, var(--p-warn)); }

/* Icon on the title line, as the design's close-status card has it. */
.card__heading { display:flex; align-items:center; gap:var(--space-3); }
.card__heading-icon { display:grid; place-items:center; inline-size:28px; block-size:28px; border-radius:var(--radius-md); color:var(--p-brand); background:var(--p-brand-soft); flex:0 0 auto; }

/* The button matched the card's padding on the sides but not the rows above
   it, so its left edge sat proud of every step label. One padding for the
   whole card body now. */
.overview__engagement-cta { display:flex; justify-content:center; margin:var(--space-4) var(--space-5) var(--space-5); }
.engagement__meta { padding:0 var(--space-5) var(--space-4); }

/* The sections BELOW the two-column body carried no top margin, so Recent
   activity butted against the card above it while every other card on the
   page sits on a 16px rhythm. Same gap as the grid uses. */
.overview__activity { margin-block-start:16px; }