/* Chart presentation stays independent of the Console shell and data adapters. */
:root{
  --chart-hero-height:22rem;
  --chart-money-size:clamp(2.4rem,4vw,3.25rem);
  --chart-total-size:clamp(1.35rem,2.1vw,1.8rem);
  --chart-share-size:1.65rem;
  --chart-share-height:.75rem;
}
.chart-hero{display:flex;flex-direction:column;min-height:var(--chart-hero-height)}
.chart-hero.is-empty{min-height:0}
.chart-hero .pb{display:flex;flex-direction:column;flex:1}
.chart-hero .money{font-size:var(--chart-money-size);line-height:1.15;font-variant-numeric:tabular-nums}
/* owner 2026-09-07: a money headline never runs past its panel — it stays on
 * one line and shrinks (fitMoney) before it may wrap; flex parents let it
 * narrow instead of pushing the row wide */
.money{min-width:0;max-width:100%;white-space:nowrap}
.af-top>div{min-width:0;max-width:100%}
.cost-headline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3)}
.cost-headline .chart-money{margin-bottom:0}
/* dashboard first row: no fixed hero height; the row is as tall as the Cost
 * number plus its plot, and the number sits close to the plot */
.cost-hero,.saved-hero{min-height:0}
.cost-hero .cost-headline{margin-bottom:0}

/* the hero carries the shared ct90 curve; it starts at 120px and fills whatever
 * height Saved this month sets for the row, so neither panel ends with dead
 * space */
.cost-hero #ct90{flex:1 1 120px;min-height:0;max-height:220px}
.chart-hero.is-empty .chart-read{display:none}
.saved-hero .saved-share{padding-top:var(--space-3)}
.saved-hero .saved-share-legend{margin-top:var(--space-3)}
.saved-hero .saved-share-empty{padding:16px 2px 4px}
.cost-change{display:flex;flex-direction:column;gap:var(--space-1);font-family:var(--mono);font-size:var(--text-note);color:var(--dim)}
.cost-change b{font-size:var(--text-label);font-weight:500;color:var(--sec)}
.cost-change.increased b{color:var(--dn)}
.cost-change.decreased b{color:var(--up)}
.saved-share{margin-top:auto;padding-top:var(--space-5)}
.saved-share-heading{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;color:var(--dim);font-size:var(--text-label)}
.saved-share-heading strong{font-size:var(--chart-share-size);font-family:var(--mono);font-weight:500;color:var(--loc)}
.saved-share-bar{display:flex;height:var(--chart-share-height);margin-top:var(--space-4);background:var(--cld);border-radius:var(--radius-control);overflow:hidden}
.saved-share-bar i{display:block;height:100%;background:var(--loc)}
.saved-share-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}
.saved-share-legend .lg{gap:var(--space-2);color:var(--sec)}
.saved-share-legend b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.saved-share-empty{padding:12px 2px 4px;color:var(--dim);font-family:var(--mono);font-size:11px}
/* stat boxes: height driven by content, label sitting on the figure (owner 2026-09-05) */
.spend-total{min-height:0}
.spend-total .pb{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--space-1);padding:var(--space-4) var(--space-5)}
.spend-total .l{font-size:var(--text-label);color:var(--dim)}
.spend-total .v,.spend-total .money{font-size:var(--chart-total-size);font-family:var(--mono);font-weight:500;line-height:1.15;overflow-wrap:anywhere}
/* Mint API key is the console's one solid light button: header and API keys panel */
#getkey-top,#mint-open{background:var(--gold);color:var(--on-gold);border:1px solid var(--gold);font-weight:600}
#getkey-top:hover,#mint-open:hover:not([disabled]){background:var(--gold-hi);color:var(--on-gold);border-color:var(--gold-hi)}
#getkey-top:focus-visible,#mint-open:focus-visible{outline-offset:2px}
#mint-open[disabled]{opacity:.5;cursor:not-allowed}