/* Athena infographic kit (public/js/viz.js) and the infographic Political intelligence page (4 Oct 2026). Tokens only
   (premium.css): ink for actions, gold as the accent, --pos / --neg / --neu for sentiment; party and platform colours
   arrive as --c. Dark mode follows the tokens. */
:root { --vz-empty: color-mix(in srgb, var(--text-3) 14%, var(--surface)); --vz-ink: var(--text); }

/* ---------- atoms ---------- */
.vz-logo { --s: 34px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; background: #fff; display: inline-grid; place-items: center; box-shadow: 0 0 0 2px var(--c), 0 2px 6px -2px rgba(0,0,0,.25); overflow: hidden; vertical-align: middle; }
.vz-logo img { width: 74%; height: 74%; object-fit: contain; }
.vz-logo b { font: 750 calc(var(--s) * .3)/1 var(--font); color: var(--c); letter-spacing: -.02em; }
.vz-face { --s: 40px; position: relative; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 calc(2px + max(2px, var(--s) * .045)) var(--c); vertical-align: middle; }
/* The photo sits in its own round window (a built-in portrait is cropped to the head inside it, viz.js headCrop). */
.vz-ph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1; }
.vz-face img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* A party-tone ring (viz.js partyTone): a gradient band outside a thin surface gap, glowing softly in the party colour. */
.vz-face.vz-tone { isolation: isolate; box-shadow: 0 0 0 2px var(--surface), 0 6px 14px -8px var(--c); }
.vz-face.vz-tone::before { --rw: max(2.5px, calc(var(--s) * .075)); content: ''; position: absolute; inset: calc(-2px - var(--rw)); border-radius: 50%; background: var(--ring); z-index: -1;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + .5px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + .5px));
  filter: drop-shadow(0 0 .6px rgba(0, 0, 0, .35)); }
/* The 4:5 portrait in a glass frame of the party tone: the band blurs the photo under it and catches a light sheen. */
.vz-toneframe { isolation: isolate; box-shadow: 0 24px 48px -28px var(--glow), 0 0 0 1px color-mix(in srgb, var(--glow) 35%, transparent); }
.vz-toneframe > .vz-glass { position: absolute; inset: 0; border-radius: inherit; padding: 4px; z-index: 5; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .35)), var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); opacity: .88; }
.vz-face i { position: absolute; font: 700 calc(var(--s) * .34)/1 var(--font); font-style: normal; color: var(--text-2); }
.vz-face em { position: absolute; right: -3px; bottom: -3px; z-index: 2; font-style: normal; }
.vz-netmark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.vz-net { display: inline-flex; min-width: 40px; justify-content: center; padding: 2px 9px; border-radius: 999px; font: 700 12px/1.45 var(--font); font-variant-numeric: tabular-nums; }
.vz-net.pos { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos-ink); }
.vz-net.neg { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg-ink); }
.vz-net.mid { background: var(--surface-2); color: var(--text-2); }
.vz-net.na { color: var(--text-3); background: var(--surface-2); }
.vz-count { font: 650 12px/1 var(--font); color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 3px 8px; }

.vz-gauge path { fill: none; stroke-width: 11; stroke-linecap: round; }
.vz-gauge .g-neg { stroke: color-mix(in srgb, var(--neg) 70%, var(--surface)); }
.vz-gauge .g-mid { stroke: color-mix(in srgb, var(--neu) 55%, var(--surface)); }
.vz-gauge .g-pos { stroke: color-mix(in srgb, var(--pos) 70%, var(--surface)); }
.vz-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.vz-hub { fill: var(--text); }
.vz-gauge-v { font: 750 24px/1 var(--font); text-anchor: middle; fill: var(--text); font-variant-numeric: tabular-nums; }
.vz-gauge-v.pos { fill: var(--pos-ink); } .vz-gauge-v.neg { fill: var(--neg-ink); } .vz-gauge-v.na { fill: var(--text-3); }

.vz-track { stroke: var(--surface-3); }
.vz-donut-v { font: 750 20px/1 var(--font); text-anchor: middle; fill: var(--text); font-variant-numeric: tabular-nums; }
.vz-donut-c { font: 500 11px/1 var(--font); text-anchor: middle; fill: var(--text-3); }
.vz-donut circle { transition: stroke-width .2s; }
.vz-donut circle:hover { stroke-width: 22; }
.vz-donutrow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vz-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 140px; }
.vz-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.vz-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.vz-legend b { font-variant-numeric: tabular-nums; }
.vz-ring-v { font: 750 11px/1 var(--font); text-anchor: middle; dominant-baseline: middle; fill: var(--text); }

.vz-div { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; min-width: 90px; height: 10px; gap: 2px; }
.vz-div > span { background: var(--surface-2); border-radius: 5px; overflow: hidden; display: flex; }
.vz-div .l { justify-content: flex-end; border-radius: 5px 0 0 5px; }
.vz-div .r { border-radius: 0 5px 5px 0; }
.vz-div .l i { background: var(--neg); border-radius: 5px 0 0 5px; }
.vz-div .r i { background: var(--pos); border-radius: 0 5px 5px 0; }
.vz-div i { display: block; height: 100%; transition: width .9s var(--ease-out, ease); }
.vz-stack { display: flex; width: 100%; min-width: 80px; height: var(--h, 10px); border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.vz-stack i { background: var(--c); min-width: 3px; }
.vz-stack.empty { height: 8px; }
.vz-spark .vz-zero, .vz-lines .vz-zero { stroke: var(--text-3); stroke-dasharray: 3 3; stroke-width: 1; }
.vz-lines { width: 100%; height: auto; display: block; }
.vz-grid { stroke: var(--line-2); stroke-width: 1; }
.vz-ax { font: 500 11px var(--font); fill: var(--text-3); }
.vz-band.pos { fill: color-mix(in srgb, var(--pos) 6%, transparent); }
.vz-band.neg { fill: color-mix(in srgb, var(--neg) 6%, transparent); }
.vz-dot { stroke: var(--surface); stroke-width: 2; }

.vz-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vz-bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.vz-bars li > a, .vz-bars li > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.vz-bars .t { display: flex; flex-direction: column; min-width: 0; }
.vz-bars .t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-bars .t small { color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-bars .b { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.vz-bars .b i { display: block; height: 100%; background: var(--c); border-radius: 6px; transition: width .9s var(--ease-out, ease); }
.vz-bars em { font: 650 12.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.vz-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 10px; }
.vz-seg button { border: 0; background: transparent; color: var(--text-2); font: 600 12.5px var(--font); padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vz-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---------- layout ---------- */
.vz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vz-grid3 > .vz-span2 { grid-column: span 2; }
@media (max-width: 1100px) { .vz-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .vz-grid3 { grid-template-columns: 1fr; } .vz-grid3 > .vz-span2 { grid-column: auto; } }
.vz-details { gap: 10px; }
.vz-details > summary, .vz-details-in > summary { cursor: pointer; font: 600 13px var(--font); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.vz-details h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-2); }
.vz-details-in { margin-top: 4px; }

/* status strip */
.vz-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; }
.vz-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.vz-tile > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vz-tile small { color: var(--text-3); font-size: 11.5px; }
.vz-tile b { font: 700 20px/1.1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vz-tile-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.vz-plats { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-plats i { font: 600 11px var(--font); font-style: normal; color: var(--text-2); display: inline-flex; align-items: center; gap: 3px; }
.vz-run { font-size: 14px; text-transform: capitalize; }
.vz-run.running, .vz-run.queued { color: var(--accent-ink); }
.vz-run.completed { color: var(--pos-ink); }
.vz-run.failed { color: var(--neg-ink); }
.vz-strip-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1200px) { .vz-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vz-strip-act { grid-column: 1 / -1; justify-content: flex-start; } }
@media (max-width: 640px) { .vz-strip { grid-template-columns: 1fr 1fr; } }

/* ---------- the race: one card per party ---------- */
.vz-race { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.vz-race-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 14px; border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--surface)) 0%, var(--surface) 46%); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); color: var(--text); text-decoration: none; overflow: hidden; }
.vz-race-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.vz-race-h { display: flex; align-items: center; gap: 10px; }
.vz-race-h > .vz-face { margin-left: -16px; }
/* The name block only: the logo circle is a span too and must keep its own centred grid. */
.vz-race-h > span:not(.vz-logo):not(.vz-face) { display: flex; flex-direction: column; min-width: 0; margin-left: 4px; }
.vz-race-h b { font: 750 20px/1.1 var(--font); letter-spacing: -.01em; }
.vz-race-h small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-race-g { display: flex; flex-direction: column; align-items: center; gap: 0; }
.vz-race-g small, .vz-race-s small, .vz-race-fa small { color: var(--text-3); font-size: 11.5px; }
.vz-race-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.vz-race-k span { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.vz-race-k small { color: var(--text-3); font-size: 11px; }
.vz-race-k b { font: 700 17px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.vz-race-fa { display: flex; flex-direction: column; gap: 4px; }
.vz-race-fa small { display: flex; justify-content: space-between; }
.vz-race-fa em { font-style: normal; font-weight: 600; }
.vz-race-fa em.neg { color: var(--neg-ink); } .vz-race-fa em.pos { color: var(--pos-ink); }
/* The bar and the trend sit at the card's foot, so cards in one row line up even when one has no data yet. */
.vz-race-fa { margin-top: auto; min-height: 30px; }
.vz-race-s { display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.vz-race-s .vz-spark { width: 100%; height: auto; display: block; }
.vz-race-fa.is-empty, .vz-race-s.is-empty { justify-content: center; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.vz-race-fa.is-empty small, .vz-race-s.is-empty small { display: block; text-align: center; }

/* ---------- map ---------- */
.vz-mapgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .vz-mapgrid { grid-template-columns: 1fr; } }
.vz-mapwrap { background: radial-gradient(ellipse at 50% 40%, var(--surface-2), var(--surface) 70%); border-radius: 14px; padding: 8px; display: grid; place-items: center; min-height: 360px; }
.vz-map { width: 100%; max-height: 640px; height: auto; display: block; }
.vz-map path { stroke: var(--surface); stroke-width: 1.4; cursor: pointer; transition: filter .2s, stroke .2s, opacity .2s; }
.vz-map path:hover { filter: brightness(.94) saturate(1.2); stroke: var(--text-2); stroke-width: 2.2; }
.vz-map path.on { stroke: var(--text); stroke-width: 3.2; }
.vz-bub circle { fill: color-mix(in srgb, var(--text) 78%, transparent); stroke: var(--surface); stroke-width: 2.5; cursor: pointer; }
.vz-bub text { font: 750 28px var(--font); fill: var(--surface); text-anchor: middle; pointer-events: none; }
.vz-bub text.nm { font: 700 24px var(--font); fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 6px; }
.vz-map-empty { color: var(--text-3); font-size: 13px; }
.vz-mapside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vz-dist-h b { display: block; font: 750 22px/1.15 var(--font); letter-spacing: -.01em; }
.vz-dist-h small { color: var(--text-3); }
.vz-dist-p { display: flex; flex-direction: column; gap: 8px; }
.vz-dist-p > div { display: grid; grid-template-columns: 22px 64px 1fr auto; gap: 10px; align-items: center; font-weight: 600; font-size: 13px; }
.vz-dist-t, .vz-dist-r { display: flex; flex-direction: column; gap: 6px; }
.vz-dist-t > small, .vz-dist-r > small { color: var(--text-3); font-size: 11.5px; }

/* ---------- who attacks whom ---------- */
.vz-mx { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 18px; align-items: center; }
@media (max-width: 860px) { .vz-mx { grid-template-columns: 1fr; } }
.vz-matrix { width: 100%; height: auto; }
.vz-mx-bg { fill: var(--surface-2); }
.vz-mx-h { font: 700 13px var(--font); fill: var(--text); }
.vz-mx-ax { font: 500 10.5px var(--font); fill: var(--text-3); }
.vz-mx-v { font: 750 14px var(--font); fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 2px; }
.vz-mx-0 { font: 600 16px var(--font); fill: var(--text-3); text-anchor: middle; }
.vz-matrix circle { transition: transform .25s var(--ease-spring, ease); transform-box: fill-box; transform-origin: center; }
.vz-matrix circle:hover { transform: scale(1.08); }
.vz-lines-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vz-lines-list li { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.45; }
.vz-lines-list li .vz-logo { margin: 0 2px; }

/* ---------- party cards ---------- */
.vz-pcard { color: var(--text); text-decoration: none; border-top: 3px solid var(--c); }
.vz-people-mini { display: flex; flex-direction: column; gap: 9px; }
.vz-people-mini > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.vz-people-mini > div > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vz-people-mini b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-people-mini small { color: var(--text-3); font-size: 11.5px; }
.vz-people-mini em { font: 650 12px var(--font); font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vz-minibar { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.vz-minibar i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.vz-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vz-counts span { display: flex; flex-direction: column; font-size: 11px; color: var(--text-3); text-align: center; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); }
.vz-counts b { font: 700 16px/1.2 var(--font); color: var(--text); }

/* ---------- one party ---------- */
.vz-hero { display: grid; grid-template-columns: minmax(260px, 1.2fr) auto minmax(320px, 1.4fr); gap: 20px; align-items: center; padding: 20px 22px; border-radius: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 60%); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); }
@media (max-width: 1100px) { .vz-hero { grid-template-columns: 1fr; } }
.vz-hero-id { display: flex; align-items: center; gap: 12px; }
.vz-hero-id > .vz-face { margin-left: -22px; }
.vz-hero-id h2 { margin: 0; font: 750 24px/1.15 var(--font); letter-spacing: -.015em; }
.vz-hero-id small { color: var(--text-3); }
.vz-hero-id > span { margin-left: 6px; display: flex; flex-direction: column; gap: 3px; }
.vz-hero-k { display: flex; gap: 10px; }
.vz-hero-k span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.vz-hero-k span svg { grid-row: span 2; color: var(--accent-ink); }
.vz-hero-k small { color: var(--text-3); font-size: 11px; }
.vz-hero-k b { font: 700 18px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.vz-hero-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.vz-hero-g > div { display: flex; flex-direction: column; align-items: center; }
.vz-hero-g small { color: var(--text-3); font-size: 11.5px; }
.vz-do { display: flex; flex-direction: column; gap: 10px; }
.vz-do > div { display: grid; grid-template-columns: minmax(150px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.vz-do > div > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.vz-hbar { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.vz-hbar i { display: block; height: 100%; background: var(--c, var(--neg)); border-radius: 7px; opacity: .85; }
.vz-hbar.pos i { background: var(--pos); }
.vz-do b { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

.vz-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.vz-person { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px 14px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface) 55%); border: 1px solid var(--line); color: var(--text); text-decoration: none; min-width: 0; }
.vz-person > b { font-size: 14px; margin-top: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-person > small { color: var(--text-3); font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-rank { position: absolute; top: 10px; left: 12px; font: 750 12px var(--font); color: var(--accent-ink); background: var(--accent-soft); padding: 2px 7px; border-radius: 99px; }
.vz-person-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; margin-top: 4px; }
.vz-person-k span { display: flex; flex-direction: column; font-size: 10.5px; color: var(--text-3); }
.vz-person-k b { font: 700 14px/1.2 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.vz-person-m { min-height: 22px; display: flex; flex-wrap: wrap; justify-content: center; }
.vz-person-t { width: 100%; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.vz-person-t > span { display: flex; align-items: center; justify-content: center; gap: 6px; }
.vz-tcell { min-width: 110px; }

/* ---------- news media ---------- */
.vz-outlets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vz-outlet { color: var(--text); text-decoration: none; }
.vz-outlet-h { display: flex; align-items: center; gap: 12px; }
.vz-outlet-h > span { display: flex; flex-direction: column; min-width: 0; }
.vz-outlet-h b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-outlet-h small { color: var(--text-3); font-size: 11.5px; }
.vz-outlet-k { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vz-outlet-k span { display: flex; flex-direction: column; font-size: 11px; color: var(--text-3); padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }
.vz-outlet-k b { font: 700 17px/1.2 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.vz-outlet-t { display: flex; flex-direction: column; gap: 4px; }
.vz-outlet-t small { color: var(--text-3); font-size: 11.5px; }
.vz-outlet-p { display: flex; flex-direction: column; gap: 7px; }
.vz-outlet-p > div { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: center; }

/* ---------- reporters ---------- */
.vz-reps { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.vz-rep { padding-top: 0; overflow: hidden; }
.vz-rep-cover { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0 -18px; height: 92px; background: var(--surface-2); }
.vz-rep-cover a, .vz-rep-cover > span { display: block; overflow: hidden; }
.vz-rep-cover > span { grid-column: 1 / -1; display: grid; place-items: center; color: var(--text-3); }
.vz-rep-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out, ease); }
.vz-rep-cover a:hover img { transform: scale(1.06); }
.vz-rep-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.vz-rep-k span { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; align-items: center; padding: 7px 9px; background: var(--surface-2); border-radius: 10px; }
.vz-rep-k span svg { color: var(--accent-ink); }
.vz-rep-k b { font: 700 15px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.vz-rep-k small { grid-column: 1 / -1; color: var(--text-3); font-size: 10.5px; }
.vz-rep-p { display: flex; flex-direction: column; gap: 7px; }
.vz-rep-p > div { display: grid; grid-template-columns: 20px 1fr 52px 52px; gap: 8px; align-items: center; }
.vz-rep-ph small { color: var(--text-3); font-size: 10.5px; text-align: center; }
.vz-post-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; flex: none; }

/* ---------- keyword cloud ---------- */
.vz-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vz-term { --k: 0; display: inline-flex; align-items: baseline; gap: 6px; padding: calc(5px + var(--k) * 6px) calc(10px + var(--k) * 8px); border-radius: 999px; background: var(--bg); color: var(--text); text-decoration: none; font: 650 calc(12px + var(--k) * 12px)/1.15 var(--font); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); transition: transform .2s var(--ease-spring, ease), box-shadow .2s; }
.vz-term small { font: 600 11px var(--font); color: var(--text-2); }
.vz-term:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-md); }
.vz-term.none { opacity: .55; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .vz-term, .vz-matrix circle, .vz-rep-cover img { transition: none; } }

/* mood chart beside the two donuts (design QC, 4 Oct 2026) */
.vz-moodrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 14px; align-items: stretch; }
.vz-stackcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vz-stackcol > .po-card { flex: 1; }
@media (max-width: 1100px) { .vz-moodrow { grid-template-columns: 1fr; } }
.vz-nets { display: inline-flex; align-items: center; gap: 4px; }
.vz-legend-row .vz-legend { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.vz-legend-row .vz-legend li { grid-template-columns: 12px auto auto; }

/* Landscape: the district map card never grows taller than it is wide (owner, 4 Oct 2026) */
.vz-map { max-height: 520px; }
.vz-mapwrap { min-height: 0; max-height: 540px; }
.vz-mapgrid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

/* The race row: one row for up to five parties, then rows of three — never a lone card on its own row */
.vz-race[style*='--cols'] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@media (max-width: 1200px) { .vz-race[style*='--cols'] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.vz-race[style*='--cols:5'] .vz-race-k b { font-size: 15px; }
.vz-race[style*='--cols:5'] .vz-race-card { padding: 14px 14px 12px; }

/* Chart cards: a takeaway in plain words, view tabs and Download (owner, 4 Oct 2026) */
.vz-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vz-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.vz-views button { border: 0; background: transparent; color: var(--text-2); font: 600 12px var(--font); padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.vz-views button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.vz-dlwrap { position: relative; display: inline-flex; }
.vz-dl { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 600 12px var(--font); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.vz-dl:hover { color: var(--text); border-color: var(--text-3); }
.vz-dlmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 230px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.vz-dlmenu button { text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; font: 500 13px var(--font); color: var(--text); cursor: pointer; }
.vz-dlmenu button:hover { background: var(--surface-2); }
.vz-sub { margin: -6px 0 0; color: var(--text-3); font-size: 12px; }
.vz-take { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text); font-size: 14px; line-height: 1.5; border-left: 3px solid var(--accent); }
.vz-take b:first-child { color: var(--accent-ink); }
.vz-headline { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; background: linear-gradient(120deg, var(--accent-soft), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); font-size: 15.5px; line-height: 1.55; color: var(--text); }
.vz-headline svg { color: var(--accent-ink); margin-top: 4px; flex: none; }
.vz-barsvg { width: 100%; height: auto; display: block; }
.vz-bl { font: 500 12.5px var(--font); fill: var(--text); }
.vz-bv { font: 700 12.5px var(--font); fill: var(--text); }
.vz-dtable td.n, .vz-dtable th { white-space: nowrap; }
.vz-view[hidden] { display: none !important; }

/* Chart.js charts everywhere: type switch and downloads in the corner (lib.js chartTools) */
.ch-host { position: relative; }
.ch-tools { position: absolute; top: -2px; right: 0; z-index: 5; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); opacity: .45; transition: opacity .2s; }
.ch-host:hover > .ch-tools, .ch-tools:focus-within { opacity: 1; }
.ch-tools button { border: 0; background: transparent; color: var(--text-2); font: 600 11px var(--font); padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.ch-tools button.on { background: var(--surface-2); color: var(--text); }
.ch-tools button:hover { color: var(--text); background: var(--surface-2); }
@media (hover: none) { .ch-tools { opacity: 1; } }

/* Positive / neutral / negative as percentages (owner, 5 Oct 2026) — viz.js netPill, pn3 */
.vz-pn { display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden; font: 700 11.5px/1.5 var(--font); font-variant-numeric: tabular-nums; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.vz-pn i { font-style: normal; padding: 1px 7px; }
.vz-pn .p { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos-ink); }
.vz-pn .z { background: var(--surface-2); color: var(--text-2); }
.vz-pn .n { background: color-mix(in srgb, var(--neg) 13%, var(--surface)); color: var(--neg-ink); }
.vz-pn.na { padding: 1px 8px; color: var(--text-3); background: var(--surface-2); font-weight: 600; }
.vz-pnkey { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-3); }
.vz-pnkey i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.vz-pnkey .p { background: var(--pos); } .vz-pnkey .z { background: var(--text-3); } .vz-pnkey .n { background: var(--neg); }

/* Slideshow (viz.js slideshow / wireSlides): the dark insight deck and the own-accounts card */
.vz-ss { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; outline: none; }
.vz-ss-track { flex: 1; min-height: 0; touch-action: pan-y; }
.vz-slide { display: flex; flex-direction: column; gap: 8px; animation: vz-ss-in .35s var(--ease-out, ease); }
@keyframes vz-ss-in { from { opacity: 0; transform: translateX(10px); } }
.vz-slide h4 { margin: 0; font: 600 16px/1.25 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.vz-ss-k { font: 600 11px var(--font); letter-spacing: .04em; color: var(--accent-ink, var(--accent)); }
.vz-ss-b { font-size: 12.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 8px; }
.vz-ss-nav { display: flex; align-items: center; gap: 8px; }
.vz-ss-nav button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; opacity: .7; cursor: pointer; font: 600 15px/1 var(--font); display: grid; place-items: center; }
.vz-ss-nav button:hover { opacity: 1; }
.vz-ss-dots { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.vz-ss-dots i { width: 7px; height: 7px; border-radius: 4px; background: currentColor; opacity: .25; cursor: pointer; transition: width .25s, opacity .25s; }
.vz-ss-dots i.on { width: 18px; opacity: .9; background: var(--accent); }
.vz-ss-n { font: 600 11px var(--font); opacity: .6; font-variant-numeric: tabular-nums; }
.vz-ss-bar { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, currentColor 12%, transparent); }
.vz-ss-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; animation: vz-ss-fill var(--every) linear forwards; }
.vz-ss.paused .vz-ss-bar i { animation-play-state: paused; }
.vz-ss.still .vz-ss-bar { display: none; }
@keyframes vz-ss-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vz-ss.paused .vz-ss-n::after { content: ' · paused'; }
@media (prefers-reduced-motion: reduce) { .vz-slide { animation: none; } }

/* Hover explanation bubble (tips.js) */
.ax-tip { position: fixed; z-index: 9999; max-width: 300px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--lx-ink, #1f2126); color: #fff; font: 500 12px/1.4 var(--font);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); pointer-events: none; display: flex; flex-direction: column; gap: 3px; animation: ax-tip-in .16s var(--ease-out, ease); }
.ax-tip b { font-weight: 650; font-size: 12.5px; }
.ax-tip small { color: rgba(255, 255, 255, .72); font-size: 11.5px; }
.ax-tip small i { font-style: normal; color: var(--accent); font-weight: 650; }
@keyframes ax-tip-in { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .ax-tip { animation: none; } }
/* Gauge caption under the percentage; posts per platform as an even 2 x 2 grid (owner, 5 Oct 2026) */
.vz-gauge-c { font: 600 11px var(--font); text-anchor: middle; fill: var(--text-3); }
.vz-plats { display: grid; grid-template-columns: repeat(2, max-content); gap: 3px 14px; margin-top: 3px; }
.vz-plats i { font: 600 12.5px var(--font); gap: 5px; }
.vz-plats .ni { width: 13px !important; height: 13px !important; }

/* District panel: based on N items, and buttons that open its posts and comments (5 Oct 2026) */
.vz-dist-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vz-dist-row { border-radius: 8px; padding: 2px 4px; margin: 0 -4px; }
.vz-dist-row:hover { background: var(--surface-2); }
.vz-dist-n { color: var(--text-3); font-size: 11px; white-space: nowrap; min-width: 58px; text-align: right; }
.vz-dist-p > div.vz-dist-row { grid-template-columns: 22px 64px 1fr auto auto; }

/* ===== Issues from the news and District key topics (politics.js, 5 Oct 2026) ===== */
.ni-list, .ni-dist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .ni-list, .ni-dist { grid-template-columns: 1fr; } }
.ni-dist { grid-template-columns: 1fr; }
.ni-dcard { display: flex; flex-direction: column; gap: 10px; }
.ni-dcard h4 { margin: 4px 0 0; font: 650 15px var(--font); display: flex; align-items: center; gap: 6px; }
.ni-dcard h4 small { color: var(--text-3); font-weight: 500; font-size: 12px; }
.ni-dcard .ni-story { max-width: 100%; }
.ni-story { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.ni-h { display: flex; gap: 12px; align-items: flex-start; }
.ni-h img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; }
.ni-h > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ni-h small { color: var(--text-3); font-size: 11.5px; }
.ni-h a { color: inherit; text-decoration: none; } .ni-h a:hover b { text-decoration: underline; }
.ni-h b { font: 650 15px/1.35 var(--font); }
.ni-h em { font-style: normal; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.ni-outlets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ni-outlets i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.ni-r { display: flex; flex-direction: column; gap: 10px; }
.ni-k { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.ni-k b { font: 650 16px var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.ni-p { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ni-p th, .ni-p td { padding: 5px 6px; text-align: left; border-top: 1px solid var(--line); }
.ni-p thead th { border-top: 0; color: var(--text-3); font-weight: 600; font-size: 11.5px; }
.ni-p tbody th { font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ni-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ni-tags small { color: var(--text-3); font-size: 11.5px; margin-right: 4px; }
.ni-tags span { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
.ni-tags em { font-style: normal; color: var(--text-3); margin-left: 2px; }
.ni-top { display: flex; flex-direction: column; gap: 4px; }
.ni-post { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 12px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.ni-post span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ni-post small { color: var(--text-3); }
.ni-post.ni-neg { border-left-color: var(--neg); } .ni-post.ni-pos { border-left-color: var(--pos); }
.ni-act { display: flex; justify-content: flex-end; }
.ni-auto .po-card-h { align-items: center; }
.ni-switch { display: inline-flex; gap: 6px; align-items: center; font: 600 13px var(--font); }
.ni-set { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13px; margin: 6px 0; }
.ni-set select { margin: 0 4px; }
.ni-made { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ni-made > small { color: var(--text-3); font: 600 12px var(--font); }
.ni-made > a, .ni-made > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; font-size: 13px; }
.ni-made > a span, .ni-made > div span { grid-column: 1; color: var(--text-3); font-size: 11.5px; }
.ni-made > div button { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.ni-made > a.off { opacity: .6; }
.ni-dt td { white-space: nowrap; }
.ni-based { display: block; color: var(--text-3); font-size: 10.5px; margin-top: 2px; }
.lx-card.vz-toneframe { border-color: transparent; }
.lx-card.vz-toneframe::before { display: none; }

/* Sentiment colours, strictly (owner, 16 Oct 2026): a positive share is green, a negative one red, neutral grey. */
.iv-ring .fg, .iv-ring.neg .fg { stroke: var(--pos); }
.iv-ring > div b { color: var(--pos-ink); }
.lx.hm .hm-neg-t { color: var(--neg-ink); font-weight: 600; }
.nf-big.is-pos { --c: var(--pos); background: color-mix(in srgb, var(--pos) 14%, var(--bg, var(--surface))); }
.nf-big.is-pos strong { color: var(--pos-ink); }