/* MetricBarChart: one or two bordered panels of labelled horizontal bars (values always visible as text). */
.ui-metric-bar-chart { color:var(--text); }
.ui-metric-bar-chart__header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 32px; align-items:end; padding-bottom:16px; margin-bottom:24px; border-bottom:var(--border-strong); }
.ui-metric-bar-chart__kicker { margin:0 0 8px; color:var(--accent); font:600 11px/1.35 var(--font-mono); text-transform:uppercase; }
.ui-metric-bar-chart__title { margin:0; color:var(--ink); font-size:1.125rem; font-weight:700; line-height:1.3; }
.ui-metric-bar-chart__description { margin:0; color:var(--muted); font-size:.875rem; line-height:1.55; }
.ui-metric-bar-chart__panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:2px solid var(--ink); border-left:var(--border); }
.ui-metric-bar-chart__panel { min-width:0; padding:24px; background:var(--surface-raised); border-right:var(--border); border-bottom:var(--border); }
.ui-metric-bar-chart__panel-head { display:flex; justify-content:space-between; align-items:end; gap:16px; padding-bottom:12px; border-bottom:var(--border); }
.ui-metric-bar-chart__panel-title { margin:0; color:var(--ink); font-size:1.05rem; font-weight:700; line-height:1.25; }
.ui-metric-bar-chart__direction { color:var(--muted); font:600 10px/1.3 var(--font-mono); text-align:right; text-transform:uppercase; }
.ui-metric-bar-chart__rows { margin:14px 0 0; padding:0; list-style:none; }
.ui-metric-bar-chart__row { display:grid; grid-template-columns:minmax(120px,.9fr) minmax(110px,1.1fr); gap:16px; align-items:center; min-height:50px; padding:8px; }
.ui-metric-bar-chart__row+.ui-metric-bar-chart__row { border-top:var(--border); }
.ui-metric-bar-chart__row--highlighted { background:var(--accent-soft); }
.ui-metric-bar-chart__name { display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:.8125rem; line-height:1.25; overflow-wrap:anywhere; }
.ui-metric-bar-chart__row--highlighted .ui-metric-bar-chart__name { color:var(--ink); font-weight:700; }
.ui-metric-bar-chart__measure { display:block; min-width:0; }
.ui-metric-bar-chart__value { display:block; margin-bottom:6px; color:var(--ink); font:650 .8125rem/1.1 var(--font-mono); text-align:right; }
.ui-metric-bar-chart__track { position:relative; display:block; height:6px; background:var(--surface-quiet); }
.ui-metric-bar-chart__bar { position:absolute; inset:0 auto 0 0; width:var(--ui-share); background:var(--muted); }
.ui-metric-bar-chart__row--highlighted .ui-metric-bar-chart__bar { background:var(--accent); }
@media(max-width:760px) {
  .ui-metric-bar-chart__header,.ui-metric-bar-chart__panels { grid-template-columns:1fr; }
  .ui-metric-bar-chart__panel { padding:20px 16px; }
}
@media(max-width:420px) {
  .ui-metric-bar-chart__row { grid-template-columns:1fr; gap:6px; }
  .ui-metric-bar-chart__value { text-align:left; }
}