/* ==========================================================================
   css/polls.css
   Polls inside articles (drawn by tnfPolls.cfc), in the same thin-grey-border
   style as the comment section (member-comments.css).

   Every rule starts with ".tnf-poll" so nothing here touches the rest of the
   article page. The poll uses no div / p / ul inside, so content.css's
   "25px under every div and p" rule doesn't reach it.
   ========================================================================== */

.tnf-poll-embed {
    scroll-margin-top: 90px;       /* room above the poll when jumping to it */
}

.tnf-poll {
    --tp-border:    #e5e7eb;
    --tp-border-2:  #d1d5db;
    --tp-surface:   #f9fafb;
    --tp-surface-2: #f3f4f6;
    --tp-ink:       #1a1c27;
    --tp-muted:     #6b7280;
    --tp-bar:       #b8bcc4;
    --tp-bar-lead:  #6b7280;
    --tp-error:     #b42318;

    position: relative;
    display: block;
    margin: 0;
    padding: 18px 20px 16px;
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-ink);
    background: #fff;
    color: var(--tp-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.tnf-poll [hidden] {
    display: none !important;
}


/* ----- Heading -------------------------------------------------------------- */

.tnf-poll .tnf-poll-head {
    display: block;
    margin: 0 0 14px;
}

.tnf-poll .tnf-poll-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tp-muted);
}

.tnf-poll .tnf-poll-kicker svg {
    flex-shrink: 0;
}

.tnf-poll .tnf-poll-status {
    margin-left: 4px;
    padding: 1px 7px;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface-2);
    font-size: 11px;
    letter-spacing: 0.03em;
}

.tnf-poll .tnf-poll-question {
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--tp-ink);
    overflow-wrap: anywhere;
}


/* ----- Choices (vote view) -------------------------------------------------- */

.tnf-poll .tnf-poll-form {
    margin: 0;
}

.tnf-poll fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.tnf-poll label.tnf-poll-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: none;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--tp-border);
    background: var(--tp-surface);
    color: var(--tp-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tnf-poll label.tnf-poll-choice:hover {
    border-color: var(--tp-border-2);
    background: #fff;
}

/* Selected choice: white with a dark border */
.tnf-poll label.tnf-poll-choice:has(input:checked) {
    border-color: var(--tp-ink);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--tp-ink);
}

.tnf-poll .tnf-poll-choice input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--tp-ink);
    cursor: pointer;
}

.tnf-poll .tnf-poll-choice input[type="radio"]:focus-visible {
    outline: 2px solid var(--tp-ink);
    outline-offset: 2px;
}

.tnf-poll .tnf-poll-choice-text {
    overflow-wrap: anywhere;
}


/* ----- Results ---------------------------------------------------------------- */

.tnf-poll .tnf-poll-results {
    display: block;
}

.tnf-poll .tnf-poll-row {
    display: block;
    margin: 0 0 12px;
}

.tnf-poll .tnf-poll-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
    font-size: 15px;
    line-height: 1.4;
}

.tnf-poll .tnf-poll-row-label {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tnf-poll .tnf-poll-row-pct {
    flex-shrink: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tnf-poll .tnf-poll-bar {
    display: block;
    height: 10px;
    background: var(--tp-surface-2);
    overflow: hidden;
}

.tnf-poll .tnf-poll-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tp-bar);
    transition: width 0.45s ease;
}

.tnf-poll .is-leader .tnf-poll-bar-fill {
    background: var(--tp-bar-lead);
}

/* The reader's own choice */
.tnf-poll .is-mine .tnf-poll-bar-fill {
    background: var(--tp-ink);
}

.tnf-poll .tnf-poll-mine {
    display: none;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--tp-ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: 2px;
    white-space: nowrap;
}

.tnf-poll .is-mine .tnf-poll-mine {
    display: inline-block;
}


/* ----- Footer: total, closing date, buttons -------------------------------- */

.tnf-poll .tnf-poll-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 6px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--tp-border);
}

.tnf-poll .tnf-poll-meta {
    font-size: 13px;
    line-height: 1.4;
    color: var(--tp-muted);
}

.tnf-poll .tnf-poll-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.tnf-poll .tnf-poll-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid var(--tp-ink);
    border-radius: 0;
    background: var(--tp-ink);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tnf-poll .tnf-poll-btn:hover,
.tnf-poll .tnf-poll-btn:focus {
    background: #2e3142;
    color: #fff;
}

.tnf-poll .tnf-poll-link {
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tp-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tnf-poll .tnf-poll-link:hover {
    color: var(--tp-ink);
}

.tnf-poll .tnf-poll-btn:focus-visible,
.tnf-poll .tnf-poll-link:focus-visible {
    outline: 2px solid var(--tp-ink);
    outline-offset: 2px;
}

.tnf-poll.is-busy .tnf-poll-btn {
    opacity: 0.6;
    cursor: wait;
}


/* ----- Messages ("Thanks, your vote was counted.") ------------------------- */

.tnf-poll .tnf-poll-msg {
    display: block;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tp-ink);
}

.tnf-poll .tnf-poll-msg:empty {
    display: none;
}

.tnf-poll .tnf-poll-msg.is-error {
    color: var(--tp-error);
}


/* ----- Hidden helpers ------------------------------------------------------- */

/* Honeypot field: off screen, people never see it */
.tnf-poll .tnf-poll-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Read by screen readers, not shown */
.tnf-poll .tnf-poll-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ----- Phones --------------------------------------------------------------- */

@media (max-width: 767px) {
    .tnf-poll                       { padding: 16px 14px 14px; }
    .tnf-poll .tnf-poll-question    { font-size: 18px; }
    .tnf-poll label.tnf-poll-choice { padding: 12px; font-size: 15px; }
    .tnf-poll .tnf-poll-foot        { flex-direction: column; align-items: stretch; }
    .tnf-poll .tnf-poll-actions     { justify-content: space-between; }
    .tnf-poll .tnf-poll-btn         { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tnf-poll label.tnf-poll-choice,
    .tnf-poll .tnf-poll-btn,
    .tnf-poll .tnf-poll-bar-fill { transition: none; }
}