/* ==========================================================================
   Polls — THE standard (My Benfica, owner 5 Oct 2026), Oct 2026
   --------------------------------------------------------------------------
   One look for every poll on the site:
     - the home sidebar Fan Poll (includes/poll_functions.php renderSidebarPollWidget(),
       index.php, widgets/base/poll.php) and its vote.php re-render;
     - the polls page cards and single view (includes/content_pages_ui.php cmPollCard());
     - feed / profile post polls (includes/post_render_functions.php renderPollWidget());
     - forum topic polls (includes/forum_poll_functions.php renderForumPoll()).
   Linked by pollStdAssets() (poll_functions.php) next to the markup, so a panel built as
   a string carries its own stylesheet. Everything is scoped to .pl-std.

   The values are mybenfica-modern.css's (as --pl-*): the .mb-box frame, THE row (2rem
   visual | .84rem/800 title over one .7rem meta line | side), flat .mb-pill buttons
   (soft fill, 1px line, .28rem .8rem, .76rem/800, no shadow) and .mb-cap captions.
   Rows reach their card's edges; only text keeps its inset. Colours are theme tokens only
   (light, dark via data-bs-theme, every skin).

   Layers: A. tokens  B. pills + head actions  C. frame  D. question row + lines
           E. result rows + bars  F. ballot rows  G. edges (sidebar panel, frames)
           H. phones  I. reduced motion
   ========================================================================== */

/* ==========================================================================
   A. Tokens (the --mb-* set)
   ========================================================================== */
.pl-std {
    --pl-card-bg: var(--theme-surface, var(--bs-body-bg));
    --pl-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --pl-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --pl-line: var(--theme-border, var(--bs-border-color));
    --pl-ring: rgba(0, 0, 0, .07);
    --pl-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --pl-radius: var(--theme-radius-lg, 1.1rem);
    --pl-ink: var(--theme-ink, var(--bs-body-color));
    --pl-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --pl-primary: var(--theme-primary, var(--bs-primary));
    --pl-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --pl-primary-ink: color-mix(in oklab, var(--pl-primary) 80%, var(--pl-ink));
    --pl-accent: var(--theme-accent, var(--bs-warning));
    --pl-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --pl-accent-ink: color-mix(in oklab, var(--pl-accent) 62%, var(--pl-ink));
    --pl-ok: var(--theme-success, var(--bs-success));
    --pl-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --pl-ok-ink: var(--theme-success-strong, var(--bs-success));
    --pl-bad: var(--theme-danger, var(--bs-danger));
    --pl-bad-rgb: var(--theme-danger-rgb, 220, 53, 69);
    --pl-bad-ink: var(--theme-danger-strong, var(--bs-danger));
    --pl-on: var(--theme-on-primary, #fff);
    --pl-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
    --pl-rule: color-mix(in oklab, var(--pl-line) 60%, transparent);
}
[data-bs-theme="dark"] .pl-std {
    --pl-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --pl-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--pl-card-bg));
    --pl-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--pl-card-bg));
    --pl-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --pl-ring: rgba(255, 255, 255, .08);
    --pl-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --pl-primary-ink: var(--theme-link, var(--pl-ink));
    --pl-accent-ink: var(--pl-accent);
    --pl-ok-ink: color-mix(in oklab, var(--pl-ok) 58%, white);
    --pl-bad-ink: color-mix(in oklab, var(--pl-bad) 58%, white);
}

/* ==========================================================================
   B. Flat pills (.mb-pill's values) and the panel-head actions
   ========================================================================== */
.pl-std .mb-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .28rem .8rem;
    border: 1px solid var(--pl-line); border-radius: 999px;
    background: var(--pl-soft); color: var(--pl-ink);
    font-size: .76rem; font-weight: 800; line-height: 1.25; text-decoration: none; white-space: nowrap;
    box-shadow: none; cursor: pointer;
    transition: background-color .2s ease, transform .15s ease;
}
.pl-std .mb-pill i { font-size: .85em; }
.pl-std .mb-pill:hover { background: var(--pl-soft-2); color: var(--pl-ink); }
.pl-std .mb-pill:active { transform: scale(.98); }
.pl-std .mb-pill:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }
.pl-std .mb-pill--solid { background: var(--pl-primary); border-color: transparent; color: var(--pl-on); }
.pl-std .mb-pill--solid:hover { background: color-mix(in oklab, var(--pl-primary) 88%, black); color: var(--pl-on); }
.pl-std .mb-pill--solid:disabled { opacity: .65; cursor: progress; }
.pl-std .mb-pill--solid i { color: var(--theme-accent-on-primary, var(--pl-on)); }
.pl-std .mb-pill:not(.mb-pill--solid) i { color: var(--pl-accent-ink); }

/* Head actions ride the panel title, after its colour line (.bn-panel h3::after). */
/* The title never wraps or truncates; when its pills truly cannot share the row (a long
   label: "Resultados Completos"), they drop to their own row, right-aligned. */
.benfica-layout .bn-panel.pl-std > h3 { min-width: 0; flex-wrap: wrap; row-gap: .55rem; white-space: nowrap; }
.benfica-layout .bn-panel.pl-std > h3 .pl-hacts {
    order: 10; display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; margin-left: auto;
    font-size: 1rem; /* the pills set their own .76rem */
}
.benfica-layout .bn-panel.pl-std > h3::after { min-width: 1.25rem; }
.pl-std .pl-hacts .mb-pill { font-weight: 800; }
.pl-std .pl-hacts .mb-pill i { margin: 0; }
/* Icons only where the words do not fit: phones, and a narrow panel holding two pills. */
.benfica-layout .bn-panel.pl-std { container-type: inline-size; }
@container (max-width: 21rem) {
    .pl-std .pl-hacts.is-two .pl-hl { display: none; }
    .pl-std .pl-hacts.is-two .mb-pill { padding: .28rem .6rem; }
}
@container (max-width: 15rem) {
    .pl-std .pl-hacts .pl-hl { display: none; }
    .pl-std .pl-hacts .mb-pill { padding: .28rem .6rem; }
}

/* ==========================================================================
   C. The frame (.mb-box) for polls that are not a sidebar panel
   ========================================================================== */
.pl-std.pl-box {
    display: block; padding: .3rem .7rem; overflow: hidden;
    border: 1px solid var(--pl-ring); border-radius: var(--pl-radius);
    background: var(--pl-card-bg); box-shadow: var(--pl-shadow); color: var(--pl-ink);
}
/* Inside a post card (feed / profile) the poll is a quiet inner frame: no second shadow. */
.pl-std.pl-box.pl-embed { box-shadow: none; border-color: var(--pl-line); }
:where(.pl-std.pl-box.pl-embed) { margin: .6rem 0 .2rem; } /* a page's own inset wins (feed-modern.css G) */
.pl-std .pl-cap {
    margin: .55rem 0 .2rem;
    color: var(--pl-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* ==========================================================================
   D. The question row (THE row) and the one-line states under it
   ========================================================================== */
.pl-std .pl-q {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    padding: .45rem .1rem;
    border-bottom: 1px solid var(--pl-rule);
    color: var(--pl-ink);
}
.pl-std .pl-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: .6rem;
    background: rgba(var(--pl-primary-rgb), .1); color: var(--pl-primary-ink);
    font-size: .85rem;
}
.pl-std .pl-q-main { display: flex; flex-direction: column; min-width: 0; }
/* The question wraps (it is the content); answers stay compact. */
.pl-std .pl-q-title { margin: 0; overflow-wrap: anywhere; color: var(--pl-ink); font-size: .84rem; font-weight: 800; line-height: 1.3; }
.pl-std .pl-q-title a { color: inherit; text-decoration: none; }
.pl-std .pl-q-title a:hover { color: var(--pl-primary-ink); }
.pl-std .pl-q-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; color: var(--pl-muted); font-size: .7rem; font-weight: 600; line-height: 1.3; }
.pl-std .pl-q-side { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; }
.pl-std.is-detail .pl-q-title { font-size: .95rem; font-weight: 900; }

/* Status chip (open / ended / inactive). */
.pl-std .pl-chip {
    display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto;
    padding: .1rem .5rem; border-radius: 999px;
    background: var(--pl-soft-2); color: var(--pl-muted);
    font-size: .62rem; font-weight: 900; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; white-space: nowrap;
}
.pl-std .pl-chip.is-open { background: rgba(var(--pl-ok-rgb), .14); color: var(--pl-ok-ink); }
.pl-std .pl-chip.is-warn { background: rgba(var(--pl-accent-rgb), .2); color: var(--pl-accent-ink); }
.pl-std .pl-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--pl-ok); box-shadow: 0 0 0 3px rgba(var(--pl-ok-rgb), .2); }

/* The voted state: ONE slim line (no alert box). */
.pl-std .pl-ok,
.pl-std .pl-line {
    display: flex; align-items: center; gap: .4rem; min-width: 0; margin: 0;
    padding: .4rem .1rem;
    border-bottom: 1px solid var(--pl-rule);
    font-size: .74rem; font-weight: 800; line-height: 1.3;
}
.pl-std .pl-ok { color: var(--pl-ok-ink); }
.pl-std .pl-ok i { flex: 0 0 auto; }
.pl-std .pl-line { color: var(--pl-muted); font-weight: 700; }
.pl-std .pl-line i { flex: 0 0 auto; color: var(--pl-accent-ink); }
.pl-std .pl-line > span, .pl-std .pl-ok > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A refused vote, a missing pick: one line in the danger ink. */
.pl-std .pl-msg {
    margin: .35rem 0 0; padding: .35rem .6rem; border-radius: .6rem;
    background: rgba(var(--pl-bad-rgb), .1); color: var(--pl-bad-ink);
    font-size: .74rem; font-weight: 700; line-height: 1.35;
}
.pl-std .pl-msg[hidden], .pl-std .pl-msg.d-none { display: none; }
.pl-std .pl-empty {
    display: flex; align-items: center; gap: .45rem .6rem;
    padding: .7rem .2rem; margin: 0;
    color: var(--pl-muted); font-size: .8rem; line-height: 1.4;
}
.pl-std .pl-empty > i { color: var(--pl-primary-ink); opacity: .7; }

/* The foot: a note and the action(s). */
.pl-std .pl-foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .45rem .5rem;
    padding: .55rem .1rem .45rem;
}
.pl-std .pl-foot-note { flex: 1 1 6rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pl-muted); font-size: .7rem; font-weight: 600; }
.pl-std .pl-foot-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; margin-left: auto; }
.pl-std .pl-foot-meta { color: var(--pl-muted); font-size: .7rem; font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   E. Result rows: number tile | answer over a slim bar | the share
   ========================================================================== */
.pl-std .pl-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pl-std .pl-row {
    position: relative;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    padding: .45rem .1rem;
    border-bottom: 1px solid var(--pl-rule);
    color: var(--pl-ink);
}
.pl-std .pl-rows > .pl-row:last-child { border-bottom: 0; }
.pl-std .pl-vis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .6rem;
    background: var(--pl-soft); color: var(--pl-muted);
    font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.pl-std .pl-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pl-std .pl-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere; font-size: .84rem; font-weight: 800; line-height: 1.3;
}
.pl-std .pl-bar { position: relative; display: block; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--pl-soft-2); }
.pl-std .pl-fill {
    position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
    border-radius: inherit;
    background: color-mix(in oklab, var(--pl-primary) 55%, var(--pl-soft-2));
    transform-origin: 0 50%;
    /* The fill grows in when the card is revealed (paused below while the panel waits for
       the scroll reveal); the final width is in the markup, so no script is needed. */
    animation: plFill .9s var(--pl-ease) both; animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes plFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* includes/js/poll-std.js holds a list that starts below the fold until it is seen. */
.pl-std .pl-rows.pl-await .pl-fill,
.benfica-layout .bn-reveal:not(.is-in) .pl-std .pl-fill,
.benfica-layout .bn-reveal.pl-std:not(.is-in) .pl-fill { animation-play-state: paused; }
.pl-std .pl-side {
    display: inline-flex; align-items: baseline; justify-content: flex-end; gap: .35rem; min-width: 2.6rem;
    color: var(--pl-ink); font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pl-std .pl-side small { color: var(--pl-muted); font-size: .66rem; font-weight: 700; }
/* The leader: the full primary bar and a primary share. */
.pl-std .pl-row.is-lead .pl-fill { background: var(--pl-primary); }
.pl-std .pl-row.is-lead .pl-side { color: var(--pl-primary-ink); }
/* Your pick: an accent tile with a check, an accent bar and share. */
.pl-std .pl-row.is-mine .pl-vis { background: rgba(var(--pl-accent-rgb), .2); color: var(--pl-accent-ink); font-size: .8rem; }
.pl-std .pl-row.is-mine .pl-fill { background: var(--pl-accent); }
.pl-std .pl-row.is-mine .pl-side { color: var(--pl-accent-ink); }
.pl-std .pl-row.is-mine {
    background: linear-gradient(90deg, rgba(var(--pl-accent-rgb), .1), transparent 70%);
}
[data-bs-theme="dark"] .pl-std .pl-row.is-mine { background: linear-gradient(90deg, rgba(var(--pl-accent-rgb), .14), transparent 70%); }
.pl-std .pl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   F. Ballot rows: the mark | the answer — the whole row is the label
   ========================================================================== */
.pl-std form { margin: 0; }
.pl-std .pl-opt {
    position: relative;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; column-gap: .6rem;
    margin: 0; padding: .45rem .1rem;
    border-bottom: 1px solid var(--pl-rule);
    color: var(--pl-ink); cursor: pointer;
    transition: background-color .18s ease;
}
.pl-std .pl-opt:hover { background: color-mix(in oklab, var(--pl-soft) 70%, transparent); }
.pl-std .pl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl-std .pl-mark {
    justify-self: center;
    width: 1.05rem; height: 1.05rem;
    border: 2px solid color-mix(in oklab, var(--pl-muted) 60%, transparent); border-radius: 50%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pl-std .pl-opt input[type="checkbox"] + .pl-mark { border-radius: .3rem; }
.pl-std .pl-opt:has(input:checked) { background: rgba(var(--pl-primary-rgb), .06); }
.pl-std .pl-opt input:checked + .pl-mark { border-color: var(--pl-primary); box-shadow: inset 0 0 0 3px var(--pl-card-bg), inset 0 0 0 10px var(--pl-primary); }
.pl-std .pl-opt input:focus-visible + .pl-mark { outline: 2px solid var(--pl-primary); outline-offset: 2px; }
.pl-std .pl-opt-txt { min-width: 0; overflow-wrap: anywhere; font-size: .84rem; font-weight: 800; line-height: 1.3; }
.pl-std .pl-opt-list { display: flex; flex-direction: column; }

/* A fresh rendering after a vote: a short ok glow. */
.pl-std.is-fresh { animation: plFresh .9s var(--pl-ease); }
@keyframes plFresh { from { box-shadow: 0 0 0 3px rgba(var(--pl-ok-rgb), .45); } }

/* ==========================================================================
   G. Edges: rows, lines and the question reach the card's sides; the first row sits on
      the top edge and the last on the bottom edge where nothing follows them.
   ========================================================================== */
/* In a frame (.pl-box: padding .3rem .7rem). */
.pl-std.pl-box :is(.pl-q, .pl-ok, .pl-line, .pl-row, .pl-opt) { margin-left: -.7rem; margin-right: -.7rem; padding-left: .8rem; padding-right: .8rem; }
.pl-std.pl-box > .pl-q:first-child { margin-top: -.3rem; padding-top: calc(.45rem + .3rem); }
.pl-std.pl-box > .pl-rows:last-child > .pl-row:last-child,
.pl-std.pl-box > form:last-child .pl-opt-list:last-child > .pl-opt:last-child { margin-bottom: -.3rem; padding-bottom: calc(.45rem + .3rem); border-bottom: 0; }
.pl-std.pl-box .pl-foot { padding-left: .1rem; padding-right: .1rem; }
/* A foot under result rows is ruled off like the rows above it (the ballot's last row
   already carries its rule). */
.pl-std .pl-rows + .pl-foot { border-top: 1px solid var(--pl-rule); }
.pl-std.pl-box .pl-rows + .pl-foot { margin: 0 -.7rem; padding: .55rem .8rem .45rem; }
.pl-std.pl-box > .pl-empty:only-child { padding: .7rem .1rem; }

/* In a sidebar panel (.bn-panel pads 1rem): the widget's rows run edge to edge. */
.benfica-layout .bn-panel.pl-std { overflow: hidden; }
.benfica-layout .bn-panel.pl-std .pl-w :is(.pl-q, .pl-ok, .pl-line, .pl-row, .pl-opt) { margin-left: -1rem; margin-right: -1rem; padding-left: 1.05rem; padding-right: 1.05rem; }
.benfica-layout .bn-panel.pl-std .pl-w > .pl-q:first-child { border-top: 1px solid var(--pl-rule); }
.benfica-layout .bn-panel.pl-std > .pl-w:last-of-type > .pl-rows:last-child > .pl-row:last-child { margin-bottom: -1rem; padding-bottom: calc(.45rem + .1rem); }
.benfica-layout .bn-panel.pl-std > .pl-w:last-of-type > .pl-rows:last-child { margin-bottom: 0; }
.benfica-layout .bn-panel.pl-std .pl-w .pl-foot { padding: .75rem 0 0; }
/* The sidebar ballot's Vote is the panel's one action: a full-width solid pill
   (.mb-pill--block's values, like the polls page's own sidebar button). */
.benfica-layout .bn-panel.pl-std .pl-w .pl-go { display: flex; width: 100%; padding: .4rem .8rem; }
.benfica-layout .bn-panel.pl-std .pl-w > .pl-empty { padding: .3rem 0 0; }
/* The panel title's bottom margin is the gap above the first rule. */
.benfica-layout .bn-panel.pl-std > h3 { margin-bottom: .75rem; }

/* ==========================================================================
   H. Phones: head pills show their icons only; answers keep two lines.
   ========================================================================== */
@media (max-width: 575.98px) {
    .pl-std .pl-hacts .pl-hl { display: none; }
    .pl-std .pl-hacts .mb-pill { padding: .28rem .6rem; }
    .pl-std .pl-foot-acts .mb-pill { padding: .28rem .7rem; }
}
@media (max-width: 379.98px) {
    .pl-std .pl-q, .pl-std .pl-row, .pl-std .pl-opt { column-gap: .5rem; }
    .pl-std .pl-q-side .pl-chip { padding: .1rem .4rem; }
}

/* ==========================================================================
   I. Reduced motion: the bars print final, nothing pulses or glows.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pl-std .pl-fill, .pl-std.is-fresh { animation: none !important; }
    .pl-std .pl-opt, .pl-std .mb-pill, .pl-std .pl-mark { transition: none !important; }
}