/* index.css (P4.T2): layout glue for the Command centre and nothing else. Tokens only (L-01), logical properties only (L-04); no component is
   restyled. It places the title block and the lower row (programme health beside the spend chart). */
.index-title { display: grid; gap: var(--space-2); min-inline-size: 0; }
.index-title__asof { margin: 0; color: var(--text-secondary); font: var(--type-caption); }

/* A section: the title row above the figures, the exception lines, the table or the chart (the region frame is the component's own). */
.page-section { display: grid; gap: var(--space-4); min-inline-size: 0; }
.page-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.page-section__head h2 { margin: 0; font: var(--type-section); }
.page-section__body { min-inline-size: 0; }
.region__body[data-flush="true"] { padding: 0; }

/* Lower row: programme health, then the spend chart, each at full width so names and axis labels never cut. */
.index-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); min-inline-size: 0; }
.programme-quiet { color: var(--text-muted); font: var(--type-body); }
.index-chart__caption { margin: var(--space-4) 0 0; color: var(--text-secondary); font: var(--type-caption); max-inline-size: none; }