/* Polls-specific overrides to avoid global layout collisions and center hero */

/* Reset the global full-screen/main fixed layout for poll pages */
.poll-page-body main,
.poll-page-body main * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Make sure poll page container is centered and scrollable */
.poll-page-body .poll-page {
    max-width: 1100px;
    margin: 20px auto 60px;
    padding: 28px 20px 80px;
    box-sizing: border-box;
}

/* Keep header static and above content; let global theme rules set visuals */
.poll-page-body header {
    position: static !important;
    z-index: 1100;
}

/* ── Poll navigation tray (mirrors .button-tray / .button-group from index) ── */
.poll-nav-tray {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 5px;
}

.poll-nav-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 6px 6px;
    border-radius: 8px;
    width: 100%;
}

.poll-nav-group::before {
    content: attr(data-label);
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
    pointer-events: none;
}

.poll-nav-btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: background-color 0.2s, border-color 0.2s, transform 0.05s;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: 'Comic Sans Fallback', "Comic Sans MS", "Comic Sans", cursive !important;
}

/* ── Light theme nav ── */
.theme-light .poll-nav-group {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #c9d6e8;
}
.theme-light .poll-nav-group::before { color: #5b6b7f; }
.theme-light .poll-nav-btn {
    background: #ffffff;
    color: #1b2838;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #c9d6e8;
}
.theme-light .poll-nav-btn:hover {
    background: #eef5ff;
    border-color: #b3ccf8;
}
.theme-light .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #c9d6e8;
}

/* ── Dark theme nav ── */
.theme-dark .poll-nav-group {
    background: #262d36;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #1a2028;
}
.theme-dark .poll-nav-group::before { color: #9aa5b5; }
.theme-dark .poll-nav-btn {
    background: #2f3742;
    color: #e8eef5;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #1a2028;
}
.theme-dark .poll-nav-btn:hover {
    background: #3a4451;
    border-color: #4a5461;
}
.theme-dark .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #1a2028;
}

/* ── Midnight theme nav ── */
.theme-midnight .poll-nav-group {
    background: #1a2f45;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #0d2030;
}
.theme-midnight .poll-nav-group::before { color: #7a9ab8; }
.theme-midnight .poll-nav-btn {
    background: #1f3a55;
    color: #d4e6f5;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #0d2030;
}
.theme-midnight .poll-nav-btn:hover {
    background: #2a4a68;
    border-color: #3a5a78;
}
.theme-midnight .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #0d2030;
}

/* ── Sunset theme nav ── */
.theme-sunset .poll-nav-group {
    background: #fff4e6;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #f5d5a8;
}
.theme-sunset .poll-nav-group::before { color: #8b6f47; }
.theme-sunset .poll-nav-btn {
    background: #fffaf0;
    color: #3d2817;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #f5d5a8;
}
.theme-sunset .poll-nav-btn:hover {
    background: #fff0d6;
    border-color: #e8c090;
}
.theme-sunset .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #f5d5a8;
}

/* ── Forest theme nav ── */
.theme-forest .poll-nav-group {
    background: #e8f5e8;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #b8d8b7;
}
.theme-forest .poll-nav-group::before { color: #4a6549; }
.theme-forest .poll-nav-btn {
    background: #f0faf0;
    color: #1f3a1e;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #b8d8b7;
}
.theme-forest .poll-nav-btn:hover {
    background: #d8f0d8;
    border-color: #8ec08d;
}
.theme-forest .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #b8d8b7;
}

/* ── Purple theme nav ── */
.theme-purple .poll-nav-group {
    background: #f8f4fc;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #d4c5e8;
}
.theme-purple .poll-nav-group::before { color: #6a4c93; }
.theme-purple .poll-nav-btn {
    background: #ffffff;
    color: #311b92;
    border: 1px solid var(--border-light);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 2px 0 #d4c5e8;
}
.theme-purple .poll-nav-btn:hover {
    background: #ede7f6;
    border-color: #ab8cd9;
}
.theme-purple .poll-nav-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #d4c5e8;
}

/* Ensure hero stays contained and centered */
.poll-page-body .poll-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    background: var(--panel, #ffffff);
    border-radius: 24px;
    padding: 24px;
    position: relative;
    overflow: visible;
    z-index: 2;
}

.poll-page-body .poll-hero > div {
    flex: 1 1 320px;
    min-width: 220px;
}

.poll-page-body .poll-hero-card {
    flex: 0 0 320px;
    max-width: 360px;
    margin: 0;
    align-self: center;
    background: var(--panel, #ffffff);
    color: var(--panel-accent-contrast, var(--ink));
    border-radius: 20px;
    padding: 20px;
}

/* Ensure other sections can scroll into view when revealed */
.poll-page-body .poll-options-container {
    /* keep options in a scrollable window so the full list doesn't expand the page */
    display: block !important;
    box-sizing: border-box !important;
    max-height: calc(66vh - 200px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 12px !important;
    margin-top: 20px !important;
    background: transparent !important;
    position: relative !important;
}

.poll-page-body .poll-history {
    overflow: visible !important;
}

/* Ensure grid items don't stretch the container: let rows size to content */
.poll-page-body .poll-options-grid {
    display: grid !important;
    grid-auto-rows: min-content !important;
    gap: 20px !important;
}

/* Safety: cap individual option card height to avoid runaway growth */
.poll-page-body .poll-option-card {
    max-height: 420px !important;
    overflow: hidden !important;
}

/* Remove any accidental full-page overflow hiding */
.poll-page-body { overflow: visible !important; }

@media (max-width: 720px) {
    .poll-page-body .poll-hero { padding: 16px; gap: 12px; }
    .poll-page-body .poll-hero-card { width: 100%; max-width: 100%; }
}

/* Theme-aware overrides: use site variables so polls page follows active theme */
.poll-page-body .poll-hero-card {
    background: var(--panel, #ffffff);
    color: var(--panel-accent-contrast, var(--ink));
    border: 2px solid rgba(255,255,255,0.45);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.poll-option-card {
    background: var(--panel, #fff) !important;
    border: 2px solid var(--panel-border, rgba(159, 177, 221, 0.4)) !important;
    box-shadow: 0 12px 32px rgba(27, 40, 56, 0.12);
}

.poll-leaderboard-list,
.poll-history-tally,
.poll-info-panel {
    background: var(--panel, #ffffff);
    border: 1px solid var(--panel-border, rgba(159, 177, 221, 0.5));
    color: var(--ink, #1b2838);
}

/* Make history text theme-aware */
.poll-history-tally {
    background: var(--panel, #ffffff);
    border: 1px solid var(--panel-border, rgba(159,177,221,0.5));
    box-shadow: 0 12px 30px var(--panel-shadow, rgba(27,40,56,0.12));
    color: var(--ink);
}

.poll-history-tally li {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: var(--ink);
}

.poll-history-tally .placeholder { color: var(--ink-soft); }
.placeholder { color: var(--ink-soft); }
.history-date { color: var(--ink-soft); font-weight: 600; }
.history-name { color: var(--accent); font-weight: 600; }

.poll-option-placeholder {
    background: var(--panel, #ffffff);
    color: var(--ink-soft, #0d5f74);
}

.ghost-btn {
    border: 1px dashed rgba(22, 125, 146, 0.7);
    background: var(--panel, #ffffff);
    color: var(--ink);
}

/* Page-level theme background: use panel/bg variables so active theme applies */
.poll-page-body {
    background: var(--bg, #f2f5f9);
}

/* Ensure poll content inherits the appropriate color from theme/main */
.poll-page, .poll-page * {
    color: inherit;
}

/* (poll nav styling now handled via .poll-nav-tray / .poll-nav-group / .poll-nav-btn above) */

/* Primary action buttons in option cards use accent variables */
.poll-option-content .primary-btn {
    border: 1px solid var(--accent, #0ba7c1);
    background: var(--panel, #ffffff);
    color: var(--panel-accent-contrast, var(--ink));
    box-shadow: 0 4px 0 rgba(91, 43, 120, 0.12);
}

.poll-option-content .primary-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Ensure leaderboard/history panels readable in dark/midnight */
.poll-leaderboard-list li,
.poll-history-tally li {
    background: transparent;
    color: var(--ink);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Theme-specific header tweaks: make header distinct but matched to active theme */
.theme-sunset .poll-page-body header {
    background: var(--panel, #ffffff);
    color: var(--ink);
    border-bottom: 1px solid var(--edge);
}

.theme-forest .poll-page-body header {
    background: var(--panel, #ffffff);
    color: var(--ink);
    border-bottom: 1px solid var(--edge);
}

.theme-purple .poll-page-body header {
    background: var(--panel, #ffffff);
    color: var(--ink);
    border-bottom: 1px solid var(--edge);
}

/* Theme-specific hero card (current leader) styling */
.theme-dark .poll-hero-card {
    background: var(--panel, #1f1f1f);
    color: var(--panel-accent-contrast, #e8eef5);
    border: 2px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.theme-midnight .poll-hero-card {
    background: var(--panel, #1a2a3a);
    color: var(--panel-accent-contrast, #d4e6f5);
    border: 2px solid rgba(180,210,240,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

/* Ensure poll-history text matches theme colors even though it's outside <main> */
body.theme-dark .poll-history,
body.theme-dark .poll-history * {
    color: #e8eef5;
}

body.theme-midnight .poll-history,
body.theme-midnight .poll-history * {
    color: #d4e6f5;
}

body.theme-sunset .poll-history,
body.theme-sunset .poll-history * {
    color: #3d2817;
}

body.theme-forest .poll-history,
body.theme-forest .poll-history * {
    color: #1f3a1e;
}

body.theme-purple .poll-history,
body.theme-purple .poll-history * {
    color: #311b92;
}

/* Dark theme overrides for poll option cards */
body.theme-dark .poll-option-card,
body.theme-dark .poll-option-content {
    background: var(--panel, #1f2630) !important;
}

body.theme-dark .poll-option-content h4,
body.theme-dark .poll-option-content .votes {
    color: #d0dae6 !important;
}

body.theme-dark .poll-option-content .pitch {
    color: #8a95a5 !important;
}

body.theme-midnight .poll-option-card,
body.theme-midnight .poll-option-content {
    background: var(--panel, #0f1e2d) !important;
}

body.theme-midnight .poll-option-content h4,
body.theme-midnight .poll-option-content .votes {
    color: #c0d8ec !important;
}

body.theme-midnight .poll-option-content .pitch {
    color: #6a8aa8 !important;
}

/* Comprehensive dark-theme pass for poll page */
body.theme-dark .poll-page-body,
body.theme-midnight .poll-page-body {
    color: var(--ink, #e8eef5);
    background: var(--bg, #0f1418);
}

body.theme-dark .poll-page,
body.theme-midnight .poll-page,
body.theme-dark .poll-history,
body.theme-midnight .poll-history {
    color: var(--ink, #e8eef5);
}

body.theme-dark .poll-hero,
body.theme-midnight .poll-hero,
body.theme-dark .poll-hero-card,
body.theme-midnight .poll-hero-card,
body.theme-dark .poll-option-card,
body.theme-midnight .poll-option-card,
body.theme-dark .poll-option-content,
body.theme-midnight .poll-option-content,
body.theme-dark .poll-leaderboard-list,
body.theme-midnight .poll-leaderboard-list,
body.theme-dark .poll-leaderboard-list li,
body.theme-midnight .poll-leaderboard-list li,
body.theme-dark .poll-history-tally,
body.theme-midnight .poll-history-tally,
body.theme-dark .poll-history-tally li,
body.theme-midnight .poll-history-tally li,
body.theme-dark .poll-info-panel,
body.theme-midnight .poll-info-panel,
body.theme-dark .poll-toast,
body.theme-midnight .poll-toast,
body.theme-dark .ghost-btn,
body.theme-midnight .ghost-btn {
    background: var(--panel, #171c20) !important;
    color: var(--ink, #e8eef5) !important;
    border-color: var(--panel-border, rgba(255,255,255,0.08)) !important;
}

body.theme-dark .poll-hero::after,
body.theme-midnight .poll-hero::after {
    mix-blend-mode: normal;
    opacity: 0.12;
}

body.theme-dark .poll-option-content h4,
body.theme-midnight .poll-option-content h4,
body.theme-dark .poll-option-content .votes,
body.theme-midnight .poll-option-content .votes,
body.theme-dark .poll-current-leader,
body.theme-midnight .poll-current-leader,
body.theme-dark #poll-current-leader,
body.theme-midnight #poll-current-leader,
body.theme-dark #poll-current-leader-score,
body.theme-midnight #poll-current-leader-score,
body.theme-dark .history-date,
body.theme-midnight .history-date,
body.theme-dark .poll-footer,
body.theme-midnight .poll-footer,
body.theme-dark .poll-countdown,
body.theme-midnight .poll-countdown,
body.theme-dark .poll-info-panel .lead,
body.theme-midnight .poll-info-panel .lead,
body.theme-dark .poll-info-panel ul,
body.theme-midnight .poll-info-panel ul,
body.theme-dark .poll-info-panel .meta,
body.theme-midnight .poll-info-panel .meta,
body.theme-dark .poll-info-close,
body.theme-midnight .poll-info-close,
body.theme-dark .placeholder,
body.theme-midnight .placeholder,
body.theme-dark .poll-history-tally .placeholder,
body.theme-midnight .poll-history-tally .placeholder {
    color: var(--ink, #e8eef5) !important;
}

body.theme-dark .poll-hero .eyebrow,
body.theme-midnight .poll-hero .eyebrow,
body.theme-dark .poll-vote .eyebrow,
body.theme-midnight .poll-vote .eyebrow,
body.theme-dark .poll-leaderboard .eyebrow,
body.theme-midnight .poll-leaderboard .eyebrow,
body.theme-dark .poll-history .eyebrow,
body.theme-midnight .poll-history .eyebrow,
body.theme-dark .poll-history-tally .history-name,
body.theme-midnight .poll-history-tally .history-name,
body.theme-dark .poll-leaderboard-list .rank,
body.theme-midnight .poll-leaderboard-list .rank,
body.theme-dark .wiki-link,
body.theme-midnight .wiki-link {
    color: var(--accent, #64b5f6) !important;
}

body.theme-dark .poll-option-content .pitch,
body.theme-midnight .poll-option-content .pitch {
    color: var(--ink-muted, #9aa5b5) !important;
}

body.theme-dark .poll-option-content .primary-btn,
body.theme-midnight .poll-option-content .primary-btn,
body.theme-dark .ghost-btn,
body.theme-midnight .ghost-btn {
    background: var(--panel-bg-start, #13171b) !important;
    color: var(--ink, #e8eef5) !important;
    border: 1px solid var(--panel-border, rgba(255,255,255,0.12)) !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.35) !important;
}

body.theme-dark .poll-option-content .primary-btn:hover:not(:disabled),
body.theme-midnight .poll-option-content .primary-btn:hover:not(:disabled),
body.theme-dark .ghost-btn:hover,
body.theme-midnight .ghost-btn:hover {
    background: var(--panel-bg-mid, #171c20) !important;
}

body.theme-dark .poll-option-content .primary-btn:disabled,
body.theme-midnight .poll-option-content .primary-btn:disabled {
    color: var(--ink-muted, #9aa5b5) !important;
    border-color: var(--panel-border, rgba(255,255,255,0.08)) !important;
}

body.theme-dark .poll-toast.success,
body.theme-midnight .poll-toast.success {
    color: #8ce99a !important;
}

body.theme-dark .poll-toast.error,
body.theme-midnight .poll-toast.error {
    color: #ff9b9b !important;
}

body.theme-dark .poll-history-tally li,
body.theme-midnight .poll-history-tally li,
body.theme-dark .poll-leaderboard-list li,
body.theme-midnight .poll-leaderboard-list li {
    border-bottom: 1px solid var(--panel-border, rgba(255,255,255,0.08)) !important;
}