/*
 * 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; }

/* The vote form and the results view are given the same total height (the server prints the option count as --fip-n), so a reader who
   voted before sees the results swap in without the page below moving. Measured: an option row is 3.25rem, a result row 3.76rem (it
   carries a second line of text), the gap is 0.55rem, and the form's button row costs 2.13rem more than the results' counts line. The
   shorter side is padded up to the taller one; where the natural height is already taller, these do nothing. */
.fi-poll__opts { min-height: calc(var(--fip-n, 0) * 3.76rem + (var(--fip-n, 0) - 1) * 0.55rem - 2.13rem); }
.fi-poll__bars { min-height: calc(max(var(--fip-n, 0) * 3.76rem, var(--fip-n, 0) * 3.25rem + 2.13rem) + (var(--fip-n, 0) - 1) * 0.55rem); }

/* A capped placement (the showcase's Join in) folds the options past the first N into a native <details>: "See N more options" in the
   form, "See all results" under the bars. --fip-n is the SHOWN count, so the reserved height is for the rows that are showing; the
   fold line costs the same in both views, which keeps the form and the results the same height. No script is involved. */
.fi-poll__rest { margin-top: 0.55rem; }
.fi-poll__rest > summary {
    display: block;
    min-height: 1.6rem;
    padding: 0.1rem 0;
    color: var(--fi-accent);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}
.fi-poll__rest > summary::-webkit-details-marker { display: none; }
/* a drawn chevron, not a text glyph: U+25BE is missing from some fonts and prints as an empty box */
.fi-poll__rest > summary::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin: 0 0 0.18em 0.5em;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fi-poll__rest > summary:focus-visible { outline: 3px solid var(--fi-accent); outline-offset: 2px; }
.fi-poll__rest[open] > summary { display: none; }
.fi-poll__rest[open] { margin-top: 0; }
.fi-poll__rest > .fi-poll__opts--rest, .fi-poll__rest > .fi-poll__bars--rest { min-height: 0; margin-top: 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: var(--fi-radius);
    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: var(--fi-radius);
    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: var(--fi-radius);
    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: var(--fi-radius);
    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: var(--fi-radius);
    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; }
}