/* Topic ballot add-on: the "what's winning" chart (ballot-results.js). Colors come from the page's own
   variables: the website's brand (--navy, --sun, --muted, --off) or the course kit's (--text, --a/--on-a,
   --text-2, --panel), with Bot Your Brain fallbacks. A page can override --br-*. Inside a kit .card it
   drops its own card look. */
.br{
  --br-ink:var(--navy, var(--text, #1B2C50)); --br-muted:var(--muted, var(--text-2, #5a6580)); --br-card:var(--off, var(--panel, #FFFDF8));
  --br-lead:var(--sun, var(--a, #FFCC44)); --br-on-lead:var(--on-a, #1B2C50); --br-bar:#b9c1d3; --br-track:rgba(27,44,80,.08);
  background:var(--br-card); color:var(--br-ink); border-radius:24px; padding:22px 24px 24px;
  box-shadow:0 6px 0 rgba(27,44,80,.10); display:grid; gap:6px;
}
.card .br{ background:none; box-shadow:none; padding:0; }
.br-heading{ font-family:var(--font-heading, var(--font-head, 'Fredoka', sans-serif)); font-weight:700; font-size:clamp(21px, 3.6vw, 26px); line-height:1.15; margin:0; text-wrap:balance; }
.br-sub{ margin:0; font-size:15px; font-weight:700; color:var(--br-muted); }
.br-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:14px; }
.br-label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:16px; font-weight:700; line-height:1.3; margin-bottom:6px; }
.br-title{ min-width:0; overflow-wrap:anywhere; }
.br-crown{ margin-right:6px; }
.br-tag{ display:inline-block; vertical-align:2px; margin-left:4px; background:var(--br-lead); color:var(--br-on-lead); font-size:12.5px; font-weight:800; padding:1px 10px; border-radius:999px; white-space:nowrap; }
.br-pct{ font-family:var(--font-heading, var(--font-head, 'Fredoka', sans-serif)); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.br-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.br-track{ height:14px; border-radius:4px; background:var(--br-track); overflow:hidden; }
.br-bar{ height:100%; background:var(--br-bar); border-radius:0 4px 4px 0; }
.br-row.lead .br-bar{ background:var(--br-lead); }
@media (forced-colors: active){ .br-bar{ background:CanvasText; } .br-row.lead .br-bar{ background:Highlight; } }