/* ═══════════════════════════════════════════════════════════════════════
   Polls — listing (polls.php) and detail/voting (poll.php)
   Reuses .jka-nomcard-grid / .jka-nom-filterbar / .jka-evt-pill / .jka-pill-*
   / .jka-nomhero-* / .jka-nom-share-* from events.css where the shape
   already matches; this file only adds what's genuinely poll-specific.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Category pill bar (listing) — same visual language as .jka-evt-pill ── */
.jka-poll-catbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.jka-poll-catpill {
    border: 1px solid var(--evt-border); background: #fff; color: var(--evt-text-soft);
    font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 100px; cursor: pointer;
    transition: all .15s ease; white-space: nowrap;
}
.jka-poll-catpill:hover { border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-poll-catpill[data-active="1"] { background: var(--jka-black-shine); border-color: var(--jka-black); color: #fff; }

/* ── Poll card (listing grid) — sibling of .jka-nomcard, options-preview shape ── */
.jka-pollcard { background: #fff; border: 1px solid var(--evt-border); border-radius: 18px; overflow: hidden; transition: box-shadow .22s, transform .22s; box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.jka-pollcard:hover { box-shadow: 0 14px 40px rgba(0,0,0,.13); transform: translateY(-5px); }
.jka-pollcard.closed { opacity: .7; }
.jka-pollcard-top { padding: 16px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Small icon badge, matching the design reference's top-left icon square
   -- NOT a full-bleed colored header band, just a compact marker. */
.jka-pollcard-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--jka-gold-shine); }
.jka-pollcard.jka-accent-red .jka-pollcard-icon { background: var(--jka-red-shine); }
.jka-pollcard.jka-accent-green .jka-pollcard-icon { background: var(--jka-green-shine); }
.jka-pollcard.jka-accent-blue .jka-pollcard-icon { background: var(--jka-blue-shine); }
.jka-pollcard.jka-accent-purple .jka-pollcard-icon { background: var(--jka-purple-shine); }
.jka-pollcard-top-stars { height: 34px; display: flex; align-items: center; }
.jka-pollcard-top-stars .jka-star-display-bg svg,
.jka-pollcard-top-stars .jka-star-display-fill svg { width: 17px; height: 17px; }
/* A light outline pill, not a solid fill -- this badge repeats on EVERY
   card (16 "OPEN"s on one page), so a solid green here stacked with CPT's
   own fixed green type badge was what made the grid read as "too much
   green" overall. Status is secondary info; the accent/type colors are
   the ones meant to carry visual weight. */
.jka-pollcard-status { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: transparent; border: 1.5px solid var(--jka-green); color: var(--jka-green); }
.jka-pollcard-status.closed { border-color: var(--evt-text-faint); color: var(--evt-text-soft); }
.jka-pollcard-body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.jka-pollcard-title { font-size: 15.5px; font-weight: 800; color: var(--evt-ink); line-height: 1.35; margin-bottom: 10px; }
/* Type + category badges — their OWN row under the title (not at the top
   next to status), each pulling from a DIFFERENT color so the two never
   match -- computed per-card in JS (jkaKindColor vs a catAccent chosen to
   exclude it), not a fixed per-category color, so same-category cards
   still read as visually distinct from each other. */
.jka-pollcard-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jka-pollcard-cat { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; color: #fff; white-space: nowrap; }
.jka-pollcard-county { font-size: 11.5px; color: var(--evt-text-soft); margin-bottom: 12px; }
.jka-pollcard-opts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; flex: 1; }
.jka-pollcard-opt-head { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 3px; }
.jka-pollcard-opt-head .name { font-weight: 700; color: var(--evt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.jka-pollcard-opt-head .pct { font-weight: 800; color: var(--jka-gold-vivid); }
.jka-pollcard.jka-accent-red .jka-pollcard-opt-head .pct { color: var(--jka-red); }
.jka-pollcard.jka-accent-green .jka-pollcard-opt-head .pct { color: var(--jka-green); }
.jka-pollcard.jka-accent-blue .jka-pollcard-opt-head .pct { color: var(--jka-blue); }
.jka-pollcard.jka-accent-purple .jka-pollcard-opt-head .pct { color: var(--jka-purple); }
.jka-pollcard-bar-wrap { height: 4px; background: var(--evt-border-soft); border-radius: 3px; overflow: hidden; }
.jka-pollcard-bar-fill { height: 100%; border-radius: 3px; background: var(--jka-gold-shine); }
.jka-pollcard.jka-accent-red .jka-pollcard-bar-fill { background: var(--jka-red-shine); }
.jka-pollcard.jka-accent-green .jka-pollcard-bar-fill { background: var(--jka-green-shine); }
.jka-pollcard.jka-accent-blue .jka-pollcard-bar-fill { background: var(--jka-blue-shine); }
.jka-pollcard.jka-accent-purple .jka-pollcard-bar-fill { background: var(--jka-purple-shine); }
.jka-pollcard-meta { font-size: 11.5px; color: var(--evt-text-soft); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jka-pollcard-meta.split { justify-content: space-between; }
.jka-pollcard-meta.split > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jka-pollcard-meta.split > span:last-child { flex-shrink: 0; }
.jka-pollcard-cta:hover { color: #fff; text-decoration: none; opacity: .9; }
.jka-pollcard-cta.ghost { background: transparent; border: 1px solid var(--evt-border); color: var(--evt-text-faint); }

/* ── Card footer — primary CTA + share icon, two reusable pieces ─────────── */
.jka-pollcard-actions { display: flex; gap: 8px; margin-top: auto; }
.jka-pollcard-cta { display: block; flex: 1; box-sizing: border-box; background: var(--jka-red-shine); color: #fff; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 9px; text-align: center; text-decoration: none; }
.jka-pollcard-share { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--evt-border); background: #fff; color: var(--evt-text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: border-color .15s ease, color .15s ease; position: relative; }
.jka-pollcard-share:hover { border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-pollcard-share .jka-copied-toast {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--jka-black); color: #fff; font-size: 10.5px; font-weight: 700;
    padding: 5px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
.jka-pollcard-share.copied .jka-copied-toast { opacity: 1; }

/* ── Reusable: type badge — Election/CPT/Survey/Rating, shine-colored ────── */
.jka-poll-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; color: #fff; white-space: nowrap; }
.jka-poll-type-badge.survey  { background: var(--jka-blue-shine); }
.jka-poll-type-badge.cpt     { background: var(--jka-green-shine); }
.jka-poll-type-badge.election{ background: var(--jka-red-shine); }
.jka-poll-type-badge.rating  { background: var(--jka-purple-shine); }
/* Position badge (Governor/MP/MCA/...) -- used instead of the kind+
   category badge pair on a single-kind/single-category scoped listing
   (e.g. the CPT page), where both of those would be constant on every
   card. Gold: the one tone not already claimed by jkaKindColor
   (election=red, cpt=green, survey=blue, rating=purple). */
.jka-poll-type-badge.position{ background: var(--jka-gold-shine); }

/* ── Reusable: countdown / status-urgency badge ───────────────────────────── */
.jka-poll-countdown { font-size: 10.5px; font-weight: 700; color: var(--evt-text-soft); display: inline-flex; align-items: center; gap: 4px; }
.jka-poll-countdown.urgent { color: var(--jka-red); }

/* ── Reusable: voting-tier lock chip ──────────────────────────────────────── */
.jka-poll-tier-chip { font-size: 10px; font-weight: 700; color: var(--jka-gold-vivid); display: inline-flex; align-items: center; gap: 3px; }

/* ── Reusable: read-only star display (avg score) — width-clipped overlay,
   precise to any fractional score, not just halves. Distinct from the
   interactive click-to-rate widget on poll.php but shares the same SVG
   star path so both read as the same visual language. ── */
.jka-star-display { position: relative; display: inline-flex; }
.jka-star-display-bg, .jka-star-display-fill { display: flex; gap: 1px; }
.jka-star-display-bg svg { fill: var(--evt-border); display: block; }
.jka-star-display-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.jka-star-display-fill svg { fill: var(--jka-gold-vivid); flex-shrink: 0; display: block; }

/* ── Listing grid: wider cards than the shared .jka-nomcard-grid default
   (220px) so badges/meta text have room -- scoped to this page only,
   other pages using .jka-nomcard-grid (nominees) keep their own sizing. ── */
#jka-poll-grid.jka-nomcard-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }

/* ── Pagination — Bootstrap's own .pagination/.page-item/.page-link, only
   the active/hover fills swapped for the site's shine tokens. ── */
.jka-poll-pagination { margin-top: 32px; }
.jka-poll-pagination .page-link { color: var(--evt-ink); border-color: var(--evt-border); font-weight: 700; }
.jka-poll-pagination .page-item.active .page-link { background: var(--jka-gold-shine); border-color: var(--jka-gold-vivid); color: #fff; }
.jka-poll-pagination .page-link:hover { background: var(--evt-bg); border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-poll-pagination .page-item.disabled .page-link { color: var(--evt-text-faint); }

/* ── Detail page: the H1 now lives in the white body wrapper, not the dark
   photo banner (moved per repeated feedback) -- .jka-pill-title's shared
   white/text-shadow styling is sitewide-correct for every OTHER inner page
   still using it inside the dark banner, so override color here instead of
   touching the shared rule. ── */
.jka-poll-title-onwhite { color: var(--evt-ink); text-shadow: none; }

/* ── Detail page — attribute chips under the hero title. Solid shine
   fills, not translucent-dark-on-photo -- the same "conspicuous, not
   pale" standard as everywhere else, and it actually pops MORE against
   the dark photo overlay than a see-through chip did. ── */
.jka-poll-chip-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.jka-poll-chip { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 6px 15px; border-radius: 100px; color: #fff; background: var(--jka-gold-shine); }
.jka-poll-chip.status-open { background: var(--jka-green-shine); }
.jka-poll-chip.status-closed { background: rgba(255,255,255,.2); }

/* ── Option/candidate rows on the detail page ────────────────────────────── */
/* No max-width here on purpose -- this used to cap the candidate list at
   680px while the stats bar/chart row below it filled the full 900px page
   wrapper, so the primary voting section visually read as narrower/
   different-width than its own analytics section. Both now span the same
   width, matching the page. */
.jka-poll-options { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.jka-poll-orow { display: flex; align-items: center; gap: 18px; border: 1px solid var(--evt-border); border-radius: 16px; padding: 20px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.jka-poll-orow:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.jka-poll-orow.voted { border-color: var(--jka-gold); background: rgba(var(--jka-gold-rgb),.05); }
.jka-poll-oavatar { width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; background: var(--jka-gold-shine); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; color: rgba(255,255,255,.85); }
.jka-poll-orow.jka-accent-red .jka-poll-oavatar { background: var(--jka-red-shine); }
.jka-poll-orow.jka-accent-green .jka-poll-oavatar { background: var(--jka-green-shine); }
.jka-poll-orow.jka-accent-blue .jka-poll-oavatar { background: var(--jka-blue-shine); }
.jka-poll-orow.jka-accent-purple .jka-poll-oavatar { background: var(--jka-purple-shine); }
.jka-poll-omid { flex: 1; min-width: 0; }
.jka-poll-oname { font-size: 15px; font-weight: 800; color: var(--evt-ink); margin-bottom: 5px; }
.jka-poll-obar-wrap { height: 6px; background: var(--evt-border-soft); border-radius: 4px; overflow: hidden; }
.jka-poll-obar-fill { height: 100%; border-radius: 4px; background: var(--jka-gold-shine); transition: width .5s cubic-bezier(.4,0,.2,1); }
.jka-poll-orow.jka-accent-red .jka-poll-obar-fill { background: var(--jka-red-shine); }
.jka-poll-orow.jka-accent-green .jka-poll-obar-fill { background: var(--jka-green-shine); }
.jka-poll-orow.jka-accent-blue .jka-poll-obar-fill { background: var(--jka-blue-shine); }
.jka-poll-orow.jka-accent-purple .jka-poll-obar-fill { background: var(--jka-purple-shine); }
.jka-poll-ostat { flex-shrink: 0; text-align: right; width: 64px; }
.jka-poll-ostat .pct { font-size: 19px; font-weight: 900; color: var(--jka-gold-vivid); line-height: 1; }
.jka-poll-orow.jka-accent-red .jka-poll-ostat .pct { color: var(--jka-red); }
.jka-poll-orow.jka-accent-green .jka-poll-ostat .pct { color: var(--jka-green); }
.jka-poll-orow.jka-accent-blue .jka-poll-ostat .pct { color: var(--jka-blue); }
.jka-poll-orow.jka-accent-purple .jka-poll-ostat .pct { color: var(--jka-purple); }
.jka-poll-ostat .votes { font-size: 10.5px; color: var(--evt-text-soft); margin-top: 3px; }
/* Vote button matches its own row's accent (not a fixed red) -- same
   "conspicuous, mixed colors" treatment as the rest of the page, bigger
   touch target, and a satisfying press-down feel on click, not just a
   flat color swap on hover. */
.jka-poll-vote-btn { flex-shrink: 0; border: 1.5px solid var(--jka-red); background: transparent; color: var(--jka-red); font-weight: 800; font-size: 13px; padding: 12px 22px; border-radius: 10px; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; }
.jka-poll-vote-btn:hover { background: var(--jka-red-shine); color: #fff; box-shadow: 0 4px 14px rgba(187,0,0,.25); }
.jka-poll-vote-btn:active { transform: scale(.95); }
.jka-poll-orow.jka-accent-gold .jka-poll-vote-btn { border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-poll-orow.jka-accent-gold .jka-poll-vote-btn:hover { background: var(--jka-gold-shine); color: #fff; box-shadow: 0 4px 14px rgba(var(--jka-gold-rgb),.3); }
.jka-poll-orow.jka-accent-green .jka-poll-vote-btn { border-color: var(--jka-green); color: var(--jka-green); }
.jka-poll-orow.jka-accent-green .jka-poll-vote-btn:hover { background: var(--jka-green-shine); color: #fff; box-shadow: 0 4px 14px rgba(var(--jka-green-rgb),.3); }
.jka-poll-orow.jka-accent-blue .jka-poll-vote-btn { border-color: var(--jka-blue); color: var(--jka-blue); }
.jka-poll-orow.jka-accent-blue .jka-poll-vote-btn:hover { background: var(--jka-blue-shine); color: #fff; box-shadow: 0 4px 14px rgba(var(--jka-blue-rgb),.3); }
.jka-poll-orow.jka-accent-purple .jka-poll-vote-btn { border-color: var(--jka-purple); color: var(--jka-purple); }
.jka-poll-orow.jka-accent-purple .jka-poll-vote-btn:hover { background: var(--jka-purple-shine); color: #fff; box-shadow: 0 4px 14px rgba(var(--jka-purple-rgb),.3); }
.jka-poll-vote-btn:disabled { opacity: .4; cursor: not-allowed; }
.jka-poll-voted-badge { flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--jka-green); }

/* ── Identify-to-vote panel (identified/verified tiers) ──────────────────── */
.jka-poll-verify { max-width: 680px; margin: 4px auto 0; border: 1px solid var(--evt-border); background: var(--evt-bg); border-radius: 14px; padding: 20px; }
.jka-poll-verify h4 { font-size: 13.5px; font-weight: 800; color: var(--evt-ink); margin-bottom: 6px; }
.jka-poll-verify p { font-size: 12.5px; color: var(--evt-text-soft); margin-bottom: 14px; }
.jka-poll-verify-field { display: flex; gap: 8px; flex-wrap: wrap; }
.jka-poll-verify-field select, .jka-poll-verify-field input { border: 1px solid var(--evt-border); border-radius: 9px; padding: 11px 14px; font-size: 14px; outline: none; background: #fff; }
.jka-poll-verify-field input { flex: 1; min-width: 160px; }
.jka-poll-verify-field select { flex: 0 0 96px; }
.jka-poll-verify-btn { border: none; background: var(--jka-gold-dark); color: #fff; font-weight: 700; font-size: 13px; padding: 0 18px; border-radius: 9px; cursor: pointer; }
.jka-poll-verify-btn:hover { opacity: .9; }
.jka-poll-verify-channels { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--evt-border); border-radius: 8px; padding: 3px; margin-bottom: 12px; }
.jka-poll-verify-channels button { border: none; background: transparent; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 6px; color: var(--evt-text-soft); cursor: pointer; }
.jka-poll-verify-channels button[data-active="1"] { background: var(--jka-black-shine); color: #fff; }
.jka-poll-otp-row { display: flex; gap: 8px; margin: 14px 0; }
.jka-poll-otp-box { width: 42px; height: 48px; text-align: center; font-size: 18px; font-weight: 800; border: 1.5px solid var(--evt-border); border-radius: 9px; outline: none; }
.jka-poll-otp-box:focus { border-color: var(--jka-gold); }

.jka-poll-toast { max-width: 680px; margin: 16px auto 0; padding: 13px 16px; background: rgba(27,92,52,.08); border: 1px solid rgba(27,92,52,.3); border-radius: 10px; font-size: 12.5px; color: var(--jka-green); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.jka-poll-toast.error { background: rgba(194,39,45,.08); border-color: rgba(194,39,45,.3); color: var(--jka-red); }

/* ── CPT leader profile + assessment form ────────────────────────────────── */
.jka-cpt-leader { display: flex; gap: 18px; align-items: center; border: 1px solid var(--evt-border); border-radius: 16px; padding: 18px; margin: 0 auto 24px; max-width: 680px; background: #fff; }
.jka-cpt-photo { width: 84px; height: 84px; border-radius: 14px; flex-shrink: 0; background: var(--jka-gold-shine); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; color: rgba(255,255,255,.85); }
.jka-cpt-leader h3 { font-size: 17px; font-weight: 800; margin: 0 0 3px; }
.jka-cpt-leader .role { font-size: 12.5px; color: var(--jka-gold-dark); font-weight: 700; margin-bottom: 8px; }

.jka-cpt-step { max-width: 680px; margin: 0 auto 26px; }
.jka-cpt-step-label { font-size: 12px; font-weight: 800; color: var(--evt-ink); margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.jka-cpt-step-num { width: 21px; height: 21px; border-radius: 50%; background: var(--jka-gold-shine); color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Unselected pills/yes-no buttons previously sat flat white-on-gray with
   no hover state at all -- read as "bare" next to the rest of the page's
   color use. A warm tint background + gold hover gives them presence
   even before the visitor picks an answer. */
.jka-cpt-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.jka-cpt-pills button { border: 1.5px solid var(--evt-border); background: rgba(var(--jka-gold-rgb),.05); color: var(--evt-text-soft); font-size: 12px; font-weight: 700; padding: 8px 15px; border-radius: 100px; cursor: pointer; transition: all .15s ease; }
.jka-cpt-pills button:hover:not([data-selected="1"]) { border-color: var(--jka-gold); color: var(--jka-gold-dark); background: rgba(var(--jka-gold-rgb),.1); }
.jka-cpt-pills button[data-selected="1"] { background: var(--jka-black-shine); border-color: var(--jka-black); color: #fff; }
.jka-cpt-pills.multi button[data-selected="1"] { background: var(--jka-green-shine); border-color: var(--jka-green); }

/* Legend line above the indicator list -- was a bare list of names with
   no context for what tapping a star does. */
.jka-cpt-indicator-legend { font-size: 12px; color: var(--evt-text-soft); margin: -4px 0 4px; }
.jka-cpt-indicator { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; max-width: 680px; margin: 0 auto; transition: background .15s ease; }
.jka-cpt-indicator:hover { background: rgba(var(--jka-gold-rgb),.05); }
.jka-cpt-indicator.rated { background: rgba(var(--jka-gold-rgb),.06); }
.jka-cpt-indicator-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--jka-gold-shine); color: #fff; font-size: 13px; }
.jka-cpt-indicator-name { font-size: 13px; font-weight: 700; color: var(--evt-ink); flex: 1; }
.jka-cpt-stars { display: flex; gap: 4px; flex-shrink: 0; }
.jka-cpt-stars button { border: none; background: none; padding: 2px; cursor: pointer; transition: transform .1s ease; }
.jka-cpt-stars button:hover { transform: scale(1.15); }
.jka-cpt-stars svg { width: 21px; height: 21px; display: block; }
.jka-cpt-indicator-hint { width: 64px; flex-shrink: 0; text-align: right; font-size: 11px; font-weight: 700; color: var(--evt-text-faint); }
.jka-cpt-indicator-hint.rated { color: var(--jka-gold-dark); }

.jka-cpt-yesno { display: flex; gap: 10px; max-width: 680px; margin: 0 auto; }
.jka-cpt-yesno button { flex: 1; border: 1.5px solid var(--evt-border); background: rgba(var(--jka-gold-rgb),.05); padding: 12px; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--evt-text-soft); cursor: pointer; transition: all .15s ease; }
.jka-cpt-yesno button:hover:not([data-selected="1"]) { border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-cpt-yesno button[data-selected="1"].yes { background: rgba(27,92,52,.1); border-color: var(--jka-green); color: var(--jka-green); }
.jka-cpt-yesno button[data-selected="1"].no { background: rgba(194,39,45,.08); border-color: var(--jka-red); color: var(--jka-red); }

.jka-cpt-submit-row { text-align: center; margin: 30px 0; }
.jka-cpt-submit-btn { border: none; background: var(--jka-red-shine); color: #fff; font-weight: 800; font-size: 14px; padding: 14px 34px; border-radius: 11px; cursor: pointer; }
.jka-cpt-submit-btn:hover { opacity: .9; }
.jka-cpt-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Soft elevation instead of flat border-on-white throughout this results
   block -- matches the reference artifact's more layered look instead of
   reading as a bordered spreadsheet. */
.jka-cpt-rank-card { max-width: 680px; margin: 0 auto 22px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; border: 1px solid var(--evt-border); border-radius: 16px; padding: 22px 24px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.jka-cpt-rank-score { text-align: center; }
.jka-cpt-rank-score b { font-size: 46px; font-weight: 900; display: block; line-height: 1; }
.jka-cpt-rank-stars { display: flex; justify-content: center; margin: 6px 0 4px; }
.jka-cpt-rank-stars .jka-star-display-bg svg,
.jka-cpt-rank-stars .jka-star-display-fill svg { width: 15px; height: 15px; }
/* Was a bare `span` selector, which also matched .jka-cpt-tier-pill
   below (also a span in this container) and won on specificity --
   the tier pill's own color:#fff lost to this gray, so its text
   rendered gray instead of white. Scoped to its own class instead. */
.jka-cpt-rank-caption { font-size: 11px; color: var(--evt-text-faint); font-weight: 700; text-transform: uppercase; }
/* Performance-tier pill -- a second, distinct color signal from the
   leader's real national rank percentile, separate from the score's own
   accent color above it. */
.jka-cpt-tier-pill { display: block; margin-top: 8px; padding: 3px 10px; border-radius: 100px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
/* Divider between the big score and the rank/respondent stats, matching
   the reference artifact's score-summary card. */
.jka-cpt-rank-score { padding-right: 22px; border-right: 1px solid var(--evt-border); }
.jka-cpt-rank-items { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; }
.jka-cpt-rank-items div b { display: block; font-size: 18px; font-weight: 800; color: var(--evt-ink); }
.jka-cpt-rank-items div span { font-size: 11px; color: var(--evt-text-faint); font-weight: 700; }

.jka-cpt-lb-heading { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--evt-text-soft); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.jka-cpt-lb-card { max-width: 680px; margin: 0 auto; border: 1px solid var(--evt-border); border-radius: 16px; padding: 22px 24px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.jka-cpt-leaderboard { display: flex; flex-direction: column; gap: 12px; }
.jka-cpt-lb-row { display: flex; align-items: center; gap: 10px; }
/* Rank badge + bar color are set inline per-row from JS, cycling the same
   5-tone accent palette used for candidate rows elsewhere on this page --
   was hardcoded gold/red/green via nth-child, which repeated gold for
   every rank past 3rd on a 10-row leaderboard. */
.jka-cpt-lb-rank { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jka-cpt-lb-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: #fff; }
.jka-cpt-lb-name { flex: 0 0 140px; font-size: 12.5px; font-weight: 700; color: var(--evt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jka-cpt-lb-county { font-weight: 600; color: var(--evt-text-faint); }
.jka-cpt-lb-bar-wrap { flex: 1; height: 8px; background: var(--evt-border-soft); border-radius: 4px; overflow: hidden; }
.jka-cpt-lb-bar-fill { height: 100%; border-radius: 4px; }
.jka-cpt-lb-score { width: 32px; text-align: right; font-size: 12px; font-weight: 800; color: var(--evt-ink); }
/* Honest stand-in for the artifact's target-sample/response-rate/
   confidence-interval block -- this is an open self-selected pilot
   assessment, not a formally sampled survey, so those figures would be
   fabricated. State what's actually true instead. */
.jka-cpt-disclaimer { margin: 18px 0 0; font-size: 11.5px; color: var(--evt-text-faint); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Same light-card/big-number/caption treatment as the artifact's
   methodology strip, filled with only real figures (see the JS comment
   at its call site for what was deliberately left out and why). */
.jka-cpt-meta-grid { max-width: 680px; margin: 18px auto 0; background: var(--evt-bg); border-radius: 14px; padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; text-align: center; }
.jka-cpt-meta-grid div b { display: block; font-size: 19px; font-weight: 900; color: var(--evt-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jka-cpt-meta-grid div span { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--evt-text-soft); }

@media (max-width: 640px) {
    .jka-poll-orow { flex-wrap: wrap; padding: 16px; gap: 14px; }
    .jka-poll-vote-btn { width: 100%; text-align: center; order: 3; margin-top: 6px; }
    .jka-cpt-leader { flex-direction: column; text-align: center; }
    .jka-cpt-rank-card { flex-direction: column; text-align: center; }
    .jka-cpt-rank-score { border-right: none; border-bottom: 1px solid var(--evt-border); padding-right: 0; padding-bottom: 14px; }
    .jka-cpt-lb-name { flex-basis: 90px; }
    .jka-cpt-meta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .jka-poll-oavatar { width: 42px; height: 42px; font-size: 15px; }
    .jka-poll-oname { font-size: 13.5px; }
    .jka-poll-ostat { width: auto; }
    .jka-poll-ostat .pct { font-size: 16px; }
    .jka-cpt-indicator-hint { display: none; }
    .jka-cpt-indicator-icon { width: 26px; height: 26px; font-size: 11px; }
    .jka-cpt-stars svg { width: 18px; height: 18px; }
}

/* ── Detail page: real digital watch counter. Everything else in this
   body wrapper (title, chip row, description, stat strip) is centered on
   the page, so this needs to be centered too or it reads as a stray
   left-floating element instead of part of the same layout rhythm. */
.jka-poll-watch {
    display: flex; align-items: center; gap: 9px; width: fit-content;
    background: var(--jka-ink); border: 1px solid rgba(var(--jka-gold-vivid-rgb),.5);
    border-radius: 10px; padding: 10px 16px; margin: 0 auto 22px;
    color: var(--jka-gold-vivid); font-size: 13px; font-weight: 700;
}
.jka-poll-watch i { color: var(--jka-gold-vivid); font-size: 13px; }
.jka-poll-watch #jkaWatchText { font-family: 'Courier New', ui-monospace, monospace; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 0 12px rgba(var(--jka-gold-vivid-rgb),.65); }
.jka-poll-watch-lbl { color: var(--jka-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.jka-poll-watch.urgent { border-color: rgba(var(--jka-red-rgb),.5); }
.jka-poll-watch.urgent i, .jka-poll-watch.urgent #jkaWatchText { color: var(--jka-red-light); text-shadow: 0 0 12px rgba(var(--jka-red-rgb),.5); }
@media (max-width: 480px) {
    .jka-poll-watch { padding: 8px 13px; gap: 7px; }
    .jka-poll-watch #jkaWatchText { font-size: 14px; }
    .jka-poll-watch-lbl { display: none; }
}

/* ── Detail page: compact stat strip — icons either side of a vertical
   divider ("pillar"), inside a thin bordered box ("fence"). ── */
.jka-poll-stat-strip {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    border: 1px solid var(--evt-border); border-radius: 12px;
    padding: 14px 22px; margin: 0 auto 40px; width: fit-content;
    font-size: 13px; font-weight: 700; color: var(--evt-ink);
}
.jka-poll-stat-strip i { color: var(--jka-gold-vivid); margin-right: 6px; }
.jka-poll-stat-strip-divider { width: 1px; height: 18px; background: var(--evt-border); }
@media (max-width: 480px) {
    .jka-poll-stat-strip { gap: 12px; padding: 12px 16px; font-size: 12px; flex-wrap: wrap; justify-content: center; }
}

/* ── Detail page: section divider — separates "vote here" from "poll
   analytics" now that the two are visually distinct blocks, not one
   continuous cramped column. ── */
.jka-poll-section-divider { display: flex; align-items: center; gap: 16px; margin: 48px 0 28px; }
.jka-poll-section-divider::before, .jka-poll-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--evt-border); }
.jka-poll-section-divider span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--evt-text-soft); white-space: nowrap; }

/* ── Detail page: stats bar (4 cards) -- real numbers, no fabricated
   registered-voter/turnout figures, since this is a live pilot poll. ── */
.jka-poll-stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-bottom: 40px; }
.jka-poll-stat-card { background: #fff; border: 1px solid var(--evt-border); border-radius: 16px; padding: 24px 18px; text-align: center; transition: box-shadow .2s ease; }
.jka-poll-stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.jka-poll-stat-card .icon { width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; background: var(--jka-gold-shine); }
.jka-poll-stat-card.jka-accent-red .icon { background: var(--jka-red-shine); }
.jka-poll-stat-card.jka-accent-green .icon { background: var(--jka-green-shine); }
.jka-poll-stat-card.jka-accent-blue .icon { background: var(--jka-blue-shine); }
.jka-poll-stat-card.jka-accent-purple .icon { background: var(--jka-purple-shine); }
.jka-poll-stat-card .val { font-size: 24px; font-weight: 900; color: var(--evt-ink); line-height: 1.25; }
.jka-poll-stat-card .lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--evt-text-soft); margin-top: 6px; }
@media (max-width: 480px) {
    .jka-poll-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .jka-poll-stat-card { padding: 18px 12px; }
    .jka-poll-stat-card .val { font-size: 20px; }
}

/* ── Detail page: reusable chart components (donut + bar), hand-rolled
   inline SVG -- same lightweight approach as the star-display widget,
   no charting library. ── */
.jka-poll-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 24px; }
.jka-poll-chart-card { background: #fff; border: 1px solid var(--evt-border); border-radius: 18px; padding: 28px; margin-bottom: 24px; }
.jka-poll-chart-card:last-child { margin-bottom: 0; }
.jka-poll-chart-row .jka-poll-chart-card { margin-bottom: 0; }
.jka-poll-chart-title { font-size: 14px; font-weight: 800; color: var(--evt-ink); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.jka-poll-trend-range { display: inline-flex; gap: 4px; }
.jka-poll-trend-range button { border: 1px solid var(--evt-border); background: #fff; color: var(--evt-text-soft); font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.jka-poll-trend-range button.active { background: var(--jka-black-shine); border-color: var(--jka-black); color: #fff; }
.jka-poll-chart-loading { padding: 40px 0; text-align: center; color: var(--evt-text-faint); font-size: 12.5px; }
.jka-donut-chart { display: flex; align-items: center; gap: 20px; }
.jka-donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; flex: 1; }
.jka-donut-legend-row { display: flex; align-items: center; gap: 8px; }
.jka-donut-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.jka-donut-legend-name { flex: 1; color: var(--evt-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jka-donut-legend-pct { font-weight: 800; color: var(--evt-ink); }
.jka-bar-chart { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding-top: 10px; }
.jka-bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.jka-bar-chart-val { font-size: 11px; font-weight: 800; color: var(--evt-ink); margin-bottom: 5px; }
.jka-bar-chart-bar { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; }
.jka-bar-chart-label { font-size: 10px; color: var(--evt-text-soft); margin-top: 7px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 700px) {
    .jka-poll-chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .jka-poll-chart-card { padding: 18px; }
    .jka-donut-chart { flex-direction: column; align-items: center; gap: 16px; }
    .jka-donut-legend { width: 100%; }
    .jka-bar-chart { height: 150px; gap: 8px; }
    .jka-poll-chart-title { flex-wrap: wrap; gap: 8px; }
}

/* ── Detail page: list/grid view toggle for the candidate rows ── */
.jka-poll-view-toggle { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 18px; }
.jka-poll-view-toggle button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--evt-border); background: #fff; color: var(--evt-text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.jka-poll-view-toggle button:hover { border-color: var(--jka-gold); color: var(--jka-gold-dark); }
.jka-poll-view-toggle button.active { background: var(--jka-black-shine); border-color: var(--jka-black); color: #fff; }

/* ── Detail page: grid-view candidate cards (alternate to .jka-poll-orow
   rows, same underlying option data, rendered client-side) ── */
.jka-poll-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.jka-poll-ocard { background: #fff; border: 1px solid var(--evt-border); border-radius: 16px; padding: 22px 20px 20px; text-align: center; transition: box-shadow .2s ease, transform .15s ease; }
.jka-poll-ocard:hover { box-shadow: 0 10px 28px rgba(0,0,0,.09); transform: translateY(-3px); }
/* Rank badge + circular vote-share ring wrapping the avatar photo --
   the ring IS the percentage (hand-rolled SVG, same technique as the
   donut/bar chart components, no library), so the old flat linear bar
   underneath the name is gone -- one progress indicator, not two. */
.jka-poll-ocard-rankwrap { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.jka-poll-ocard-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.jka-poll-ocard-ring circle { fill: none; }
.jka-poll-ocard-ring .track { stroke: var(--evt-border-soft); stroke-width: 6; }
.jka-poll-ocard-ring .fill { stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .7s cubic-bezier(.4,0,.2,1); }
.jka-poll-ocard-avatar { position: absolute; inset: 14px; width: auto; height: auto; border-radius: 50%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #fff; }
.jka-poll-ocard-rank {
    position: absolute; top: -2px; left: -2px; width: 27px; height: 27px; border-radius: 50%;
    color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: -.02em;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.jka-poll-ocard-name { font-size: 14.5px; font-weight: 800; color: var(--evt-ink); margin-bottom: 2px; }
.jka-poll-ocard-sub { font-size: 11.5px; color: var(--evt-text-soft); margin-bottom: 10px; }
.jka-poll-ocard-pct { font-size: 19px; font-weight: 900; color: var(--evt-ink); margin-bottom: 14px; }
.jka-poll-ocard-vote-btn { display: block; width: 100%; box-sizing: border-box; border: 1.5px solid var(--evt-border); background: transparent; padding: 9px; border-radius: 8px; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--evt-ink); transition: background .15s ease, color .15s ease; }
.jka-poll-ocard-vote-btn:hover { background: var(--evt-bg); }