/* ============================================================
   Subscriber Vote – Stylesheet
   ============================================================ */

:root {
    --sv-yes:        #16a34a;
    --sv-yes-light:  #dcfce7;
    --sv-no:         #dc2626;
    --sv-no-light:   #fee2e2;
    --sv-abs:        #6b7280;
    --sv-abs-light:  #f3f4f6;
    --sv-bg:         #ffffff;
    --sv-surface:    #f9fafb;
    --sv-border:     #e5e7eb;
    --sv-text:       #111827;
    --sv-muted:      #6b7280;
    --sv-radius:     12px;
    --sv-shadow:     0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
    --sv-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Wrapper ── */
.sv-poll-wrap {
    font-family: var(--sv-font);
    color: var(--sv-text);
    max-width: 680px;
    margin: 2rem auto;
}

/* ── Poll card ── */
.sv-poll-card {
    background: var(--sv-bg);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

/* ── Question ── */
.sv-poll-question {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.sv-poll-icon {
    display: none !important;
}

.sv-poll-wrap .sv-poll-question h2 {
    font-size: .95rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 .35rem !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.sv-poll-desc {
    color: var(--sv-muted);
    font-size: .9rem;
    margin: 0;
}

/* ── Vote buttons ── */
.sv-poll-wrap .sv-vote-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .75rem !important;
    margin-bottom: 1.5rem !important;
    justify-items: center !important;
}

.sv-vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .75rem;
    border: 2px solid var(--sv-border);
    border-radius: var(--sv-radius);
    background: var(--sv-surface);
    cursor: pointer;
    transition: all .18s ease;
    user-select: none;
}

.sv-vote-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sv-btn-icon {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.sv-btn-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Yes */
.sv-vote-btn--yes:hover,
.sv-vote-btn--yes.is-selected {
    border-color: var(--sv-yes);
    background: var(--sv-yes-light);
    color: var(--sv-yes);
}

/* No */
.sv-vote-btn--no:hover,
.sv-vote-btn--no.is-selected {
    border-color: var(--sv-no);
    background: var(--sv-no-light);
    color: var(--sv-no);
}

/* Abstain */
.sv-vote-btn--abstain:hover,
.sv-vote-btn--abstain.is-selected {
    border-color: var(--sv-abs);
    background: var(--sv-abs-light);
    color: var(--sv-abs);
}

/* ── Comment ── */
.sv-comment-wrap {
    margin-bottom: 1.25rem;
}

.sv-comment-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .4rem;
    color: var(--sv-muted);
}

.sv-poll-wrap .sv-comment {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: .65rem .85rem !important;
    border: 1px solid var(--sv-border) !important;
    border-radius: 8px !important;
    font-family: var(--sv-font) !important;
    font-size: .9rem !important;
    resize: vertical !important;
    transition: border-color .15s !important;
}

.sv-comment:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}

/* ── Submit button ── */
.sv-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.5rem;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--sv-font);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.sv-submit-btn:hover  { background: #1e40af; }
.sv-submit-btn:active { transform: scale(.97); }

.sv-submit-btn.is-loading { opacity: .7; pointer-events: none; }

/* ── Feedback ── */
.sv-feedback {
    margin-top: .75rem;
    font-size: .88rem;
    min-height: 1.2em;
    font-weight: 500;
}
.sv-feedback.is-success { color: var(--sv-yes); }
.sv-feedback.is-error   { color: var(--sv-no); }

/* ── Info message ── */
.sv-message {
    padding: .85rem 1.1rem;
    border-radius: 8px;
    font-size: .9rem;
}
.sv-message--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ============================================================
   Results section
   ============================================================ */
.sv-results-wrap {
    background: var(--sv-bg);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    box-shadow: var(--sv-shadow);
    padding: 1.75rem 2rem;
}

.sv-results-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sv-muted);
}

.sv-total {
    font-weight: 400;
    font-size: .8rem;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    padding: .2rem .55rem;
    border-radius: 99px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sv-muted);
}

/* ── Result groups ── */
.sv-group {
    margin-bottom: 1.25rem;
}
.sv-group:last-child { margin-bottom: 0; }

.sv-group-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}

.sv-group-label {
    font-weight: 700;
    font-size: .9rem;
    min-width: 56px;
}

.sv-group-count {
    font-size: .85rem;
    font-weight: 600;
    background: var(--sv-surface);
    border: 1px solid var(--sv-border);
    border-radius: 99px;
    padding: .1rem .5rem;
    min-width: 24px;
    text-align: center;
}

.sv-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--sv-border);
    border-radius: 4px;
    overflow: hidden;
}

.sv-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}

.sv-pct {
    font-size: .8rem;
    color: var(--sv-muted);
    min-width: 36px;
    text-align: right;
}

/* Group accent colours */
.sv-group--yes    .sv-group-label { color: var(--sv-yes); }
.sv-group--yes    .sv-bar          { background: var(--sv-yes); }

.sv-group--no     .sv-group-label { color: var(--sv-no); }
.sv-group--no     .sv-bar          { background: var(--sv-no); }

.sv-group--abstain .sv-group-label { color: var(--sv-abs); }
.sv-group--abstain .sv-bar          { background: var(--sv-abs); }

/* ── Voter list ── */
.sv-voter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-left: .5rem;
    border-left: 3px solid var(--sv-border);
}

.sv-group--yes     .sv-voter-list { border-left-color: var(--sv-yes-light); }
.sv-group--no      .sv-voter-list { border-left-color: var(--sv-no-light); }
.sv-group--abstain .sv-voter-list { border-left-color: var(--sv-abs-light); }

.sv-voter {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.sv-voter img {
    border-radius: 50%;
    flex-shrink: 0;
}

.sv-voter-info { flex: 1; }

.sv-voter-name {
    font-size: .88rem;
    display: block;
    line-height: 1.4;
}

.sv-voter-comment {
    margin: .2rem 0 0;
    font-size: .83rem;
    color: var(--sv-muted);
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .sv-poll-card,
    .sv-results-wrap { padding: 1.25rem; }

    .sv-vote-buttons { grid-template-columns: 1fr; }
}