/* HYPERPART: bar-track */
/* Promoted from Dazzle regions.css (Tier C-b), then refined so the
 * footer summary shares the same column stops as the rows. */

/* ─────────────────────────── bar_track region ───────────────────
 * Compact horizontal value bars. Label | track | value share one
 * column template with the footer summary so the meta/scale line
 * sits on the same stops as the rows (not a free-form left flush). */

.dz-bar-track-region {
  --bar-track-label-col: 7rem;
  --bar-track-value-col: 4rem;
  --bar-track-gap: var(--space-sm);
}

.dz-bar-track-rows {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block-start: var(--space-sm);
}

.dz-bar-track-row {
  display: grid;
  grid-template-columns:
    var(--bar-track-label-col)
    minmax(0, 1fr)
    var(--bar-track-value-col);
  column-gap: var(--bar-track-gap);
  align-items: center;
  font-size: var(--text-xs);
}

.dz-bar-track-label {
  min-width: 0;
  text-align: end;
  color: var(--colour-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-bar-track {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 1rem;
  background: var(--colour-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dz-bar-track-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--colour-brand);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-out);
}

.dz-bar-track-value {
  min-width: 0;
  text-align: end;
  font-family: var(--font-mono);
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Summary reuses the row grid: empty label gutter · meta under tracks ·
 * scale under the value column. */
.dz-bar-track-summary {
  display: grid;
  grid-template-columns:
    var(--bar-track-label-col)
    minmax(0, 1fr)
    var(--bar-track-value-col);
  column-gap: var(--bar-track-gap);
  align-items: baseline;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  margin-block-start: var(--space-sm);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dz-bar-track-summary-gutter {
  min-width: 0;
}

.dz-bar-track-summary-meta {
  min-width: 0;
}

.dz-bar-track-summary-scale {
  min-width: 0;
  text-align: end;
}