/* Vertical stacked bar chart used in Token Usage. One column per day. */

.bars {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-quarter);
    height: var(--height-bars-chart);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.bars__col {
    flex: 1;
    /* `.bars` uses `align-items: flex-end` (so segs hang from the bottom).
       That alignment leaves children at intrinsic height (zero), which
       collapses the percentage-height segs to 0px. `align-self: stretch`
       overrides the parent rule per-column so the column actually fills
       the chart's full height; the inner stack's flex-end handles the
       hanging-from-bottom visual. */
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}
.bars__stack {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: var(--sp-quarter);
    overflow: hidden;
}
.bars__seg {
    display: block;
    width: 100%;
    transition: height var(--t-base);
}
.bars__seg--in  { background: var(--color-primary); }
.bars__seg--out { background: var(--color-accent); }

/* Single-value cost bars (System · Cost → Spend by week). Token Usage
   stacks input on output; this chart plots one number per column, so
   it needs its own fill rather than reusing --in, whose name would
   then be a lie. The trailing column is the in-progress week and is
   highlighted so a partial bar isn't read as a drop in spend. */
.bars__seg--cost         { background: var(--color-primary); }
.bars__seg--cost-current { background: var(--color-primary-hi); }