/*
 * components/viz: the ranked bars of ui/Bars.js on the DS data-viz series (--ae-viz-*).
 *
 * Every row carries its label and value as text in text tokens (the colour is never the only channel, and text never
 * wears the series colour), so the bars can be quiet: 12px thick, growing from one hairline baseline, a 4px rounded
 * data end and a square base, no track (the lengths are relative to the largest type, not parts of a whole).
 * Family -> series, fixed, the same as the token marks (editor.css): secret viz-7 (red), people viz-4 (violet),
 * network viz-6 (teal), contact viz-2 (blue), id viz-5 (amber), custom viz-3 (green), anything else viz-8 (slate).
 * viz-1 (orange) is left out: orange means the primary action and "you are here".
 */
.ae-bars { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; }
.ae-bars__row {
  display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr) 72px; align-items: center; gap: var(--s-3);
  font: var(--type-body-sm); color: var(--text-body);
}
.ae-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-bars__track { display: flex; align-items: center; height: 20px; border-left: var(--border-width-hairline) solid var(--border-strong); }
.ae-bars__fill { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--ae-viz-8); }
.ae-bars__fill.is-secret { background: var(--ae-viz-7); }
.ae-bars__fill.is-people { background: var(--ae-viz-4); }
.ae-bars__fill.is-network { background: var(--ae-viz-6); }
.ae-bars__fill.is-contact { background: var(--ae-viz-2); }
.ae-bars__fill.is-id { background: var(--ae-viz-5); }
.ae-bars__fill.is-custom { background: var(--ae-viz-3); }
.ae-bars__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--text-strong); }
.ae-bars__row.is-rest { color: var(--text-muted); }
.ae-bars__row.is-rest .ae-bars__value { color: var(--text-muted); font-weight: var(--weight-regular); }