/*
 * FlowInteract poll block styles (com_flowinteract.poll style asset).
 *
 * Direction B ("rows that turn into result bars in place"), approved by James 2026-10-24; rules lifted from Prism's mock
 * docs/plans/poll-redesign-2026-10/02-direction-b-morph.html. Every colour, radius, font and spacing value is a `--fi-*` token
 * (ADR-0009 section 4: block CSS never carries a literal colour); the only derived colours are the two tints below, computed with
 * color-mix() from the tokens. The outer card frame is the shared `.fi-block` (flowinteract.css); this file styles the poll only.
 * Layout follows CONTAINER queries on `.fi-poll` itself (container-name fipoll), never the viewport.
 */

/* ---- the poll ---- */
.fi-poll {
    container-type: inline-size;
    container-name: fipoll;
    --fip-tint: color-mix(in srgb, var(--fi-accent) 10%, var(--fi-surface));
    --fip-tint2: color-mix(in srgb, var(--fi-accent) 24%, var(--fi-surface));
    --fip-ease: cubic-bezier(.2, .8, .2, 1);
}

.fi-poll fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fi-poll legend { padding: 0; margin: 0; float: left; width: 100%; }
.fi-poll legend + * { clear: both; }

.fi-poll__q {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
    color: var(--fi-text);
    text-wrap: balance;
}

@container fipoll (max-width: 400px) {
    .fi-poll__q { font-size: 1.1rem; }
}

.fi-poll__desc { margin: 0.35rem 0 0; color: var(--fi-text-muted); }

.fi-poll__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    font-size: 0.85rem;
    color: var(--fi-text-muted);
    margin: 0.35rem 0 0.9rem;
}

.fi-poll__meta b { color: var(--fi-text); font-weight: 600; }

/* the real radio stays in the DOM and focusable; the whole row is its label */
.fi-poll__in { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.fi-poll__ring {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--fi-text-muted);
    display: grid;
    place-items: center;
    background: var(--fi-surface);
    transition: border-color 0.15s;
}

.fi-poll__ring::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fi-accent);
    transform: scale(0);
    transition: transform 0.18s var(--fip-ease);
}

.fi-poll__opts { display: grid; gap: 0.55rem; }

.fi-poll__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--fi-border);
    border-radius: calc(var(--fi-radius) + 4px);
    background: var(--fi-surface);
    cursor: pointer;
    line-height: 1.3;
    font-weight: 600;
    transition: border-color 0.15s, background-color 0.15s, transform 0.1s;
}

.fi-poll__opt:hover { border-color: var(--fi-accent); background: var(--fip-tint); }
.fi-poll__opt:active { transform: scale(0.985); }
.fi-poll__opt:has(.fi-poll__in:checked) { border-color: var(--fi-accent); background: var(--fip-tint); }
.fi-poll__opt:has(.fi-poll__in:checked) .fi-poll__ring { border-color: var(--fi-accent); }
.fi-poll__opt:has(.fi-poll__in:checked) .fi-poll__ring::after { transform: scale(1); }
.fi-poll__opt:has(.fi-poll__in:focus-visible) { outline: 3px solid var(--fi-accent); outline-offset: 2px; }

.fi-poll__txt { min-width: 0; overflow-wrap: anywhere; }

.fi-poll__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1rem; }

.fi-poll__submit {
    min-height: 48px;
    padding: 0.5rem 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--fi-accent);
    color: var(--fi-accent-contrast);
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.1s, filter 0.15s;
}

.fi-poll__submit:hover { filter: brightness(0.93); }
.fi-poll__submit:active { transform: scale(0.97); }
.fi-poll__submit:focus-visible { outline: 3px solid var(--fi-accent); outline-offset: 3px; }

.fi-poll__fine { font-size: 0.8rem; color: var(--fi-text-muted); margin: 0; }

@container fipoll (max-width: 400px) {
    .fi-poll__submit { width: 100%; }
    .fi-poll__actions { gap: 0.4rem; }
}

.fi-poll__err { color: var(--fi-error); font-size: 0.85rem; margin: 0.4rem 0 0; }
.fi-poll__err:empty { display: none; }

/* thanks line (a live region) */
.fi-poll__thanks { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; font-weight: 600; font-size: 0.95rem; }
.fi-poll__thanks:empty { display: none; }

.fi-poll__tick {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fi-success);
    color: var(--fi-surface);
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.fi-poll__thanks.go .fi-poll__tick { animation: fip-pop 0.5s var(--fip-ease); }

@keyframes fip-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.fi-poll__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: var(--fi-surface-alt);
    color: var(--fi-text);
    border: 1px solid var(--fi-border);
}

/* where next: the approved related article */
.fi-poll__next {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius);
    background: var(--fi-surface-alt);
    color: var(--fi-text);
    text-decoration: none;
    min-height: 48px;
}

.fi-poll__next:hover { border-color: var(--fi-accent); }
.fi-poll__next small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fi-text-muted); font-weight: 700; }
.fi-poll__next span { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.fi-poll__cta { flex: none; font-size: 0.85rem; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.fi-poll__cta::after { content: " \2192"; }

.fi-poll__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.7rem; font-size: 0.8rem; color: var(--fi-text-muted); }
.fi-poll__foot a { color: var(--fi-text); }

/* ---- Direction B: the results rows ---- */
.fi-poll__bars { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; }

.fi-poll__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.55rem 0.9rem;
    border: 2px solid var(--fi-border);
    border-radius: calc(var(--fi-radius) + 4px);
    overflow: hidden;
    background: var(--fi-surface);
    line-height: 1.3;
    font-weight: 600;
}

.fi-poll__bar > *:not(.fi-poll__fill) { position: relative; }

.fi-poll--b .fi-poll__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p);
    background: var(--fip-tint);
    transition: width 0.8s var(--fip-ease) calc(var(--i) * 60ms);
}

.fi-poll--b.pre .fi-poll__fill { width: 0; transition: none; }
.fi-poll__bar.is-lead .fi-poll__fill { background: var(--fip-tint2); }
.fi-poll__bar.is-mine { border-color: var(--fi-accent); }

.fi-poll__ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; }
.is-mine .fi-poll__ico { background: var(--fi-accent); color: var(--fi-accent-contrast); }
.is-anim .is-mine .fi-poll__ico { animation: fip-pop 0.5s var(--fip-ease) 0.5s both; }

.fi-poll__bar .fi-poll__txt small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--fi-text-muted); margin-top: 0.1rem; }

.fi-poll__top {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0 0.45rem;
    margin-left: 0.4rem;
    vertical-align: 0.12em;
    white-space: nowrap;
}

.fi-poll__pct { margin-left: auto; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

@container fipoll (max-width: 400px) {
    .fi-poll__next { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
    .fi-poll__next > span { flex-basis: 100%; }
    .fi-poll__bar:not(.is-mine) .fi-poll__ico { display: none; }
    .fi-poll__bar, .fi-poll--b .fi-poll__opt { padding: 0.5rem 0.7rem; gap: 0.55rem; }
    .fi-poll__bar .fi-poll__txt, .fi-poll--b .fi-poll__txt { font-size: 0.92rem; }
    .fi-poll__pct { font-size: 1rem; }
    .fi-poll__top { display: table; margin: 0.15rem 0 0; }
}

/* reduced motion: no transitions or animations */
@media (prefers-reduced-motion: reduce) {
    .fi-poll *, .fi-poll *::before, .fi-poll *::after { animation: none !important; transition: none !important; }
}

/* ---- notices, a refused vote, the honeypot, consent ---- */
.fi-poll__notice, .fi-poll__login-prompt { margin-block: 0.5em; color: var(--fi-text-muted); }

.fi-poll__flash {
    margin-block: 0 var(--fi-gap);
    padding: 0.55em 0.85em;
    border-radius: var(--fi-radius);
    border: 1px solid transparent;
    font-size: 0.95em;
    background-color: var(--fi-surface-alt);
}

.fi-poll__flash--success { color: var(--fi-success); border-color: var(--fi-success); }
.fi-poll__flash--warning { color: var(--fi-error); border-color: var(--fi-error); }

/* Honeypot - visually hidden, never display:none (some bots skip display:none inputs specifically); kept fully off-screen instead. */
.fi-poll__hp {
    position: absolute;
    inset-inline-start: -9999px;
    inset-block-start: auto;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

.fi-poll__consent { margin-block-start: var(--fi-gap-lg); padding-block-start: var(--fi-gap); border-block-start: 1px solid var(--fi-border); }
.fi-poll__consent fieldset { border: 0; margin: 0; padding: 0; }
.fi-poll__consent-option { display: flex; align-items: center; gap: var(--fi-gap); margin-block-end: 0.5em; }
.fi-poll__consent-email { display: flex; flex-direction: column; gap: 0.3em; max-inline-size: 22rem; margin-block: 0.5em var(--fi-gap); }

.fi-poll__consent-email input[type="email"] {
    padding: 0.5em 0.6em;
    border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius);
    font-size: 1em;
    background-color: var(--fi-surface);
    color: var(--fi-text);
}

.fi-poll__consent-submit {
    min-height: 44px;
    padding: 0.5em 1.2em;
    border: 0;
    border-radius: var(--fi-radius);
    background: var(--fi-accent);
    color: var(--fi-accent-contrast);
    font: inherit;
    cursor: pointer;
}

@media print {
    .fi-poll__form, .fi-poll__consent, .fi-poll__hp { display: none; }
}