/*
 * The aging bar — one proportional bar splitting the 8+ day total by bucket (ISH-957).
 *
 * ⚠️ This file used to style a whole summary STRIP: a total block, a divider, the bar, a key and an
 * empty state. ISH-981 replaced that strip with the app's shared KPI component (`css/kpi-card.css`,
 * five segments), and the bar became the contents of ONE of them. Everything the strip owned went
 * with it — `.aging-summary`, `.aging-total*`, `.aging-divider`, `.aging-bar-wrap`, `.aging-key*`
 * and `.aging-empty` are all deleted rather than left behind, because a stylesheet that still
 * describes a component nobody renders is how a page ends up with two of everything.
 *
 * What survives is the part that was never the strip: the bar, its bands, and the severity ramp.
 *
 * Consumers: uninvoiced-approved-tasks.html, my-ar-ap-report.html (ISH-1024 — the Broker
 * Portal's rep-facing snapshot renders the same `.aging-bar.is-mini` inside its own mix
 * segment, so the band ramp and the severity order are shared rather than re-picked).
 */

/* ── The bar ─────────────────────────────────────────────────────────────────
   One proportional bar, not a track per bucket: the width IS the share of the aged total. A share
   of a fixed total cannot crowd out its neighbours, which is the failure ISH-957 removed — the old
   per-bucket tracks were each scaled against the widest bucket, and once `0-7 Days` joined the set
   at 7-8x the whole aged total, five of the six aged bars sat pinned at the CSS floor.

   ⚠️ The pre-aged bucket is NOT drawn here. The bar splits the 8+ total and 0-7 is not part of it;
   the KPI segment beside it states that context instead. */
.aging-bar {
  display: flex;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--border-light);
  /* A hairline between segments, drawn as a gap so it works on any pair of adjacent steps. */
  gap: 2px;
}

/* ⚠️ `display: block` is load-bearing: these are spans, and an inline box ignores width. That
   defect shipped once on this very component (ISH-930) and rendered as an empty grey track. */
.aging-bar-seg {
  display: block;
  height: 100%;
  /* A bucket holding money must never vanish — at this width a share under ~0.4% rounds to
     nothing. The strip's own arithmetic refuses to print "0.0%" for a non-zero share; this is the
     same guarantee for the bar. */
  min-width: 3px;
}

/* A genuinely empty bucket gets no sliver at all — min-width above would otherwise draw one. */
.aging-bar-seg[data-zero="true"] {
  min-width: 0;
}

/* Every band carries its exact figure as a native `title` (ISH-965), so the cursor says so. ⚠️
   `help`, not `pointer`: nothing here is clickable, and a pointer cursor on a bar that does nothing
   when clicked is a promise the component does not keep. */
.aging-bar-seg {
  cursor: help;
}

/* ── The severity ramp ───────────────────────────────────────────────────────
   Sequential, one hue, light (recent) to dark (old), anchored on --red. This is the same encoding
   css/report-table.css uses for its cell heat, extended to six solid steps for a fill that has to
   be told apart from its neighbour rather than read behind text.

   ⚠️ Sequential, NOT categorical: the buckets are ordered magnitudes, and a categorical palette
   would say they are unrelated kinds. Every step is darker than the one before by a measurable
   margin, so the order survives greyscale and colour-vision deficiency — the ramp carries the
   severity, and the labels below carry the identity. */
.aging-bar-seg[data-step="1"] {
  background: #f2cfcf;
}

.aging-bar-seg[data-step="2"] {
  background: #e3a8a8;
}

.aging-bar-seg[data-step="3"] {
  background: #d07f7f;
}

.aging-bar-seg[data-step="4"] {
  background: #bc5555;
}

.aging-bar-seg[data-step="5"] {
  background: var(--red);
}

.aging-bar-seg[data-step="6"] {
  background: #7a1c1c;
}

/* ⚠️ Inside a KPI segment the bar is a supporting mark, not the component (ISH-981) — it sits under
   a figure rather than carrying the reader on its own, so it takes less than half the height. The
   bands keep their own `min-width`, so a bucket holding money still cannot vanish. */
.aging-bar.is-mini {
  height: 10px;
  border-radius: 3px;
  gap: 1px;
  margin-top: 0.35rem;
}