/* Bar lists, line charts and the segment stat row. */
/* ---------- bar list ----------
   ONE implementation for every ranked list on the dashboard: impact, usage
   type, venue, employees, industry, membership, districts and the three
   consent-field bars (see BarList/barRowsHTML in primitives.js). It used to
   be four: .barlist (9px gap, no border-radius track), .catlist (a 100px
   label column, its own colour handling), .dist-row (a 64px label column,
   its OWN CSS grid whose `auto` value column sized itself from the
   secondary reach text - the reason two districts with an identical story
   count rendered visibly different bar widths), and three .consent-item
   progress bars built by hand. One row shape, one label width, one value
   width, one track radius, fixes all four at once. */
/* Step 6: --bar-label-col is scoped to clamp(120px,28%,220px) here rather
   than at :root (tokens.css keeps the literal 180px the JS geometry-mirror
   test pins). The clamp's middle term is a PERCENTAGE, which in a
   grid-template-columns track resolves against the grid's own box (the
   .bl-row), so it is already fluid with zero container-query cost; only the
   <480px CONTAINER stack below needs one. That 356px-wide floor (180 label +
   160 value + 2*8 gap, un-shrinkable because neither column had anywhere to
   give) was the single largest source of the Step 6 baseline's 320/375px
   overflow - a bar-list card is routinely narrower than that on a phone. */
.bar-list{ display:flex; flex-direction:column; gap:var(--bar-gap); --bar-label-col: clamp(120px, 28%, 220px); }
.bl-row{
  display:grid;
  grid-template-columns:var(--bar-label-col) 1fr var(--bar-value-col);
  grid-template-areas:"label track value";
  align-items:center; gap:var(--space-2); font-size:var(--font-size-caption);
}
.bl-label{ grid-area:label; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bl-track{ grid-area:track; position:relative; height:var(--bar-height); background:var(--chart-track); border-radius:var(--bar-radius); overflow:hidden; min-width:0; }
.bl-fill{ position:absolute; left:0; top:0; height:100%; background:var(--series-primary); border-radius:var(--bar-radius); transition:width .35s var(--ease,ease); }
.bl-value{ grid-area:value; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--text-secondary); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.bl-row.is-dim{ opacity:.35; }
.bl-row.is-active .bl-label{ font-weight:700; }
/* Only a row BarList was actually given an onClick for gets the pointer -
   the old shared .barlist .row{cursor:pointer} rule applied to every row
   regardless, which is why usage-type and venue (no click handler) still
   showed a pointer cursor. */
.bl-row.is-clickable{ cursor:pointer; }
.bl-row.is-clickable:hover{ background:var(--surface-sunken); }

/* Below a 480px CONTAINER (the .viz-card the list lives in, not the
   viewport - a bar-list in a one-third .bento-3 column needs this at a much
   wider viewport than the same list full-width on a phone, which only a
   container query can tell apart): the label moves onto its own row above
   the bar, and the value sits inline-right of the track instead of in a
   fixed column. Three DOM children, two rows - grid-template-areas assigns
   each by name regardless of source order, no markup change needed. */
@container (max-width:480px){
  .bl-row{
    grid-template-columns:minmax(0,1fr) minmax(0,var(--bar-value-col));
    grid-template-areas:"label label" "track value";
    row-gap:4px;
  }
}

/* ---------- line chart ---------- */
.linewrap{ position:relative; }
.linewrap svg{ width:100%; height:auto; display:block; overflow:visible; }
.line-tip{ position:absolute; pointer-events:none; background:var(--blue-01); color:var(--on-brand); font-family:var(--mono); font-size:11px; padding:6px 9px; white-space:nowrap; transform:translate(-50%,-115%); opacity:0; transition:opacity .1s; z-index:5; }

/* ---------- stat row (segments) ---------- */
.stat-inline{ display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.stat-inline .s{ display:flex; flex-direction:column; gap:2px; }
.stat-inline .s b{ font-family:var(--sans); font-weight:300; font-size:26px; letter-spacing:-0.02em; }
.stat-inline .s span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); }