/* Horizontal stacked bar — categorical share (used in Cost-by-Category). */

.hbar {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--sp-3);
    background: var(--color-surface-alt);
}
.hbar__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--fs-xs);
    transition: width var(--t-base);
    overflow: hidden;
    white-space: nowrap;
}
.hbar__label {
    padding: 0 var(--sp-2);
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Inline variant — a single proportion bar sitting inside a table
   cell rather than a full-width stacked share bar. Shorter, no bottom
   margin, and the track stays visible so an empty bar still reads as
   "measured, zero" rather than as a missing cell. */
.hbar--inline {
    height: 8px;
    margin-bottom: 0;
    min-width: 60px;
}

.hbar__seg--1 { background: var(--color-primary-hi); color: #0A0A0F; }
.hbar__seg--2 { background: var(--color-success); color: #0A0A0F; }
.hbar__seg--3 { background: var(--color-warning); color: #0A0A0F; }
.hbar__seg--4 { background: var(--color-danger); color: #0A0A0F; }
.hbar__seg--5 { background: var(--color-purple); color: #0A0A0F; }
.hbar__seg--6 { background: var(--color-accent); color: #0A0A0F; }
.hbar__seg--7 { background: var(--color-orange); color: #0A0A0F; }
.hbar__seg--8 { background: var(--color-info); color: #0A0A0F; }