/*
 * Drawn from the shared palette, so this follows whatever template is running
 * and whatever colours the owner picked, without knowing anything about either.
 */

.votes-title { margin: 0 0 10px; }

.votes-lede {
    margin: 0 0 22px;
    max-width: var(--cms-measure, 68ch);
    color: var(--cms-dim, #9AA1B1);
}

.votes-said {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: var(--cms-radius, 14px);
    border: 1px solid var(--cms-line, #272C3A);
    font-size: 14px;
}
.votes-said-good { border-color: var(--cms-good, #3BA55D); }
.votes-said-bad { border-color: var(--cms-bad, #D2432A); }

.votes-streak {
    margin: 0 0 16px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cms-dim, #9AA1B1);
}
.votes-streak strong {
    color: var(--cms-accent, #D2432A);
    font-size: 17px;
}

.votes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.votes-site {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--cms-pane, #1C202B);
    border: 1px solid var(--cms-line, #272C3A);
    border-radius: var(--cms-radius, 14px);
}

/* Still on cooldown: present, legible, plainly not actionable. */
.votes-site.is-waiting { opacity: .62; }

.votes-site-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.votes-site-name {
    font-weight: 600;
    color: var(--cms-txt, #E9EAEE);
    overflow-wrap: anywhere;
}

.votes-site-pay {
    font-size: 13px;
    font-weight: 700;
    color: var(--cms-accent, #D2432A);
    white-space: nowrap;
}

.votes-site-do { display: flex; align-items: center; gap: 10px; }
.votes-site-do form { margin: 0; }

.votes-note {
    font-size: 13px;
    color: var(--cms-dim, #9AA1B1);
    white-space: nowrap;
}

.votes-board {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--cms-line, #272C3A);
}

.votes-board h3 {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cms-dim, #9AA1B1);
}

.votes-board ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    counter-reset: votes;
}

.votes-board li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    counter-increment: votes;
    font-size: 14px;
}

.votes-board li::before {
    content: counter(votes);
    min-width: 1.4em;
    font-variant-numeric: tabular-nums;
    color: var(--cms-dim, #9AA1B1);
}

.votes-board-name { color: var(--cms-txt, #E9EAEE); overflow-wrap: anywhere; }

.votes-board-count {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    color: var(--cms-accent, #D2432A);
    font-weight: 700;
}

@media (max-width: 520px) {
    .votes-site { align-items: stretch; flex-direction: column; }
    .votes-site-do { justify-content: flex-start; }
}