/* 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-total-height:8.5rem;
  --chart-focus-width:2px;
}
.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 (owner 2026-09-06: "smaller height-wise, too much dead
 * space"): no fixed hero height; the row is as tall as the Cost number plus
 * its 120px plot (the plot may stretch a few px to meet the row), the number
 * sits close to the plot, and Saved this month carries one ruled fact row
 * above the share bar so both panels end together */
.cost-hero,.saved-hero{min-height:0}
.cost-hero .cost-headline{margin-bottom:0}
/* the hover readout reserves its full line so the panel does not grow on hover */
.cost-hero .chart-read{line-height:1.4;min-height:1.4em}
.cost-hero #chg30{flex:1 1 auto;min-height:0;max-height:132px}
.chart-hero.is-empty .chart-read{display:none}
/* the Saved heading sits on the same line as Cost, whose header carries the
 * period tabs (32px controls plus the strip's 4px of wrap gap) */
.saved-hero .ph{min-height:calc(var(--space-5) + var(--control-compact) + 4px)}
.saved-hero .saved-facts{margin-top:var(--space-2)}
.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 this month: a printed fact ledger fills the middle of the card — one
 * ruled row now (owner 2026-09-07: the cloud list price and router downshift
 * rows went), so it runs the full width */
.saved-facts{display:grid;grid-template-columns:1fr;margin-top:var(--space-4);border-top:1px solid var(--line2)}
.saved-fact{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);min-width:0;padding:var(--space-2) 0;border-bottom:1px solid var(--line2);font-size:var(--text-note);color:var(--dim)}
.saved-fact>span{white-space:nowrap}
.saved-fact b{font-family:var(--mono);font-weight:500;font-size:var(--text-label);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}
.day-chart{overflow:visible;color:var(--ink);touch-action:pan-y}
.day-chart:focus-visible{outline:var(--chart-focus-width) solid var(--focus);outline-offset:var(--space-1)}
.day-chart .day-bar{opacity:.94}
/* owner 2026-09-06: no fade of the other days and no bar highlight on hover;
 * the readout (top right) and the legend (bottom) carry the hovered day */
.chart-axis-value{paint-order:stroke;stroke:var(--panel);stroke-width:3;pointer-events:none}
.spend-history{grid-column:1/-1;color:var(--dim);font-size:var(--text-note);margin-bottom:calc(-1 * var(--space-2))}
/* 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 (owner 2026-09-06: the
 * brown-yellow family goes everywhere but Flow): header and API keys panel */
#getkey-top,.btn.mint,#mint-open{background:var(--gold);color:var(--on-gold);border:1px solid var(--gold);font-weight:600}
#getkey-top:hover,.btn.mint:hover,#mint-open:hover:not([disabled]){background:var(--gold-hi);color:var(--on-gold);border-color:var(--gold-hi)}
#getkey-top:focus-visible,.btn.mint:focus-visible,#mint-open:focus-visible{outline:1px solid var(--focus);outline-offset:2px}
#mint-open[disabled]{opacity:.5;cursor:not-allowed}