/* ColumnChart: one or two bordered panels of vertical columns; the value sits on top of each column, the group name and a
   muted detail (count) underneath. */
.ui-column-chart { color:var(--text); }
.ui-column-chart__header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 32px; align-items:end; margin-bottom:16px; }
.ui-column-chart__title { margin:0; color:var(--ink); font-size:1.125rem; font-weight:700; line-height:1.3; }
.ui-column-chart__description { margin:0; color:var(--muted); font-size:.875rem; line-height:1.55; }
.ui-column-chart__panels { display:grid; grid-template-columns:minmax(0,1fr); border-top:2px solid var(--ink); border-left:var(--border); }
.ui-column-chart__panels--pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ui-column-chart__panel { min-width:0; container-type:inline-size; padding:24px 24px 20px; background:var(--surface-raised); border-right:var(--border); border-bottom:var(--border); }
.ui-column-chart__panel-title { margin:0 0 20px; color:var(--ink); font-size:1rem; font-weight:700; line-height:1.35; }
.ui-column-chart__columns { position:relative; display:flex; justify-content:center; gap:clamp(20px,6%,48px); margin:0; padding:0; list-style:none; }
.ui-column-chart__columns::before { content:""; position:absolute; top:200px; left:0; right:0; border-top:var(--border-strong); }
.ui-column-chart__column { display:flex; flex:0 1 112px; flex-direction:column; align-items:center; min-width:0; text-align:center; }
.ui-column-chart__plot { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; width:100%; height:200px; }
.ui-column-chart__value { margin-bottom:8px; color:var(--muted); font-size:min(1.625rem,9cqi); white-space:nowrap; font-weight:700; line-height:1; letter-spacing:-.01em; }
.ui-column-chart__bar { display:block; width:min(64px,70%); height:calc(var(--ui-share) * .74); min-height:2px; flex-shrink:0; background:var(--muted); opacity:.55; }
.ui-column-chart__name { margin-top:10px; color:var(--text); font-size:.875rem; font-weight:600; line-height:1.3; overflow-wrap:break-word; }
.ui-column-chart__detail { margin-top:2px; color:var(--muted); font:500 .75rem/1.3 var(--font-mono); }
.ui-column-chart__column--highlighted .ui-column-chart__value { color:var(--accent); }
.ui-column-chart__column--highlighted .ui-column-chart__bar { background:var(--accent); opacity:1; }
.ui-column-chart__column--highlighted .ui-column-chart__name { color:var(--ink); font-weight:700; }
@media(max-width:760px) {
  .ui-column-chart__header,.ui-column-chart__panels--pair { grid-template-columns:minmax(0,1fr); }
  .ui-column-chart__panel { padding:20px 16px 16px; }
  .ui-column-chart__plot { height:160px; }
  .ui-column-chart__columns::before { top:160px; }
  .ui-column-chart__value { font-size:min(1.375rem,9cqi); }
}