/* ==========================================================================
   css/components/poll.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4696-4736.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
.poll-card { background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:12px;padding:14px 16px;margin-top:4px;max-width:420px }
.poll-question { font-weight:600;font-size:15px;margin-bottom:12px;color:var(--text-primary) }
.poll-option { margin-bottom:8px;cursor:pointer;padding:6px 8px;border-radius:8px;border:1px solid transparent;transition:border-color .15s }
.poll-option:not(.ended):hover { border-color:var(--accent) }
.poll-option.voted { border-color:var(--accent) }
.poll-option-label { display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px }
.poll-bar-track { height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden }
.poll-bar-fill { height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease }
.poll-option.voted .poll-bar-fill { background:#5dde8a }
.poll-footer { display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--text-muted) }
/* Poll pie/donut view (toggled). Slice colours = the validated categorical palette;
   the legend (label + count + %) is the direct-label secondary encoding. */
.poll-pie { display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); gap:16px; align-items:center; flex-wrap:wrap }
.poll-card.show-pie .poll-pie { display:flex }
.poll-pie-legend { display:flex; flex-direction:column; gap:5px; font-size:12px; flex:1; min-width:150px }
.poll-pie-legend-row { display:flex; align-items:center; gap:8px; color:var(--text-secondary) }
.poll-pie-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0 }
.poll-chart-toggle { background:none; border:1px solid var(--border-strong); color:var(--text-muted); border-radius:6px; padding:3px 9px; font-size:11px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; flex-shrink:0 }
.poll-chart-toggle:hover, .poll-chart-toggle.active { color:var(--text-primary); border-color:var(--accent) }
.poll-end-btn { background:rgba(255,70,70,.12);border:1px solid rgba(255,70,70,.35);color:#ff6b6b;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer }
.poll-end-btn:hover { background:rgba(255,70,70,.22) }
.poll-ended-badge { background:rgba(255,255,255,.07);border-radius:99px;padding:2px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px }
.poll-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;animation:overlay-in 0.15s ease }
.poll-modal { background:var(--bg-surface);border-radius:14px;padding:24px;min-width:380px;max-width:480px;width:90%;border:1px solid var(--border-strong);animation:modal-pop 0.22s var(--ease-out, ease) }
.poll-modal h3 { margin:0 0 16px;font-size:16px;font-weight:700 }
.poll-modal label { display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px }
.poll-modal input[type=text],.poll-modal select { width:100%;box-sizing:border-box;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px;outline:none;margin-bottom:12px }
.poll-modal input[type=text]:focus,.poll-modal select:focus { border-color:var(--accent) }
.poll-answer-row { display:flex;gap:6px;align-items:center;margin-bottom:6px }
.poll-answer-row input { margin-bottom:0;flex:1 }
.poll-answer-rm { background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px }
.poll-answer-rm:hover { color:var(--red,#ed4245) }
.poll-add-answer { background:none;border:1px dashed var(--border-strong);border-radius:8px;color:var(--text-muted);font-size:12px;cursor:pointer;padding:6px;width:100%;margin-bottom:12px }
.poll-add-answer:hover { border-color:var(--accent);color:var(--accent) }
.poll-modal-actions { display:flex;gap:8px;justify-content:flex-end;margin-top:4px }
.poll-modal-actions button { border-radius:8px;border:none;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer }
.poll-cancel-btn { background:var(--bg-elevated);color:var(--text-secondary) }
.poll-submit-btn { background:var(--accent);color:#fff }
.poll-submit-btn:disabled { opacity:.5;cursor:not-allowed }
.poll-multi-row { display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px }