/**
 * dvm360 Connect — Community Poll
 * =============================================================================
 * Skin for [element_poll], from the Figma frame "Poll"
 * (connect.dvm360-Homepage, node 101:1902) — a 336x490 side-rail card.
 *
 * Applied by adding .eg-poll-connect to .poll-container; the markup itself is
 * unchanged apart from the optional eyebrow line. micro-poll.css is a locked
 * file and the shortcode also prints a per-instance <style> block scoped by
 * #id, which lands after every enqueued sheet. Neither uses !important, so the
 * declarations here win on importance rather than on source order — that is
 * why almost everything below is !important even where it looks unnecessary.
 *
 * Every configurable value arrives as a CSS custom property written on the
 * container, with the Figma measurement as the var() fallback. The knobs are
 * declared once in includes/settings/skin-style-schema.php, which is also what
 * generates the admin page and the shortcode attributes — so a value that is
 * hard-coded here is a value nobody can change. Prefer a var() with the design
 * value as its fallback over a bare literal, and add the matching knob to the
 * schema in the same commit.
 *
 * The narrow breakpoint is deliberately NOT in this file. A media query
 * condition cannot read a custom property, so element_games_poll_responsive_css()
 * prints it inline against this stylesheet's own handle. Putting it back here
 * would mean both match on a narrow screen and the later one silently wins.
 *
 * The per-answer "+5 PTS" chip is a ::after whose content comes from
 * --eg-poll-pts. Figma puts the chip on every answer, but the point value is a
 * property of the question, not of the answer — the JS that builds the answer
 * list never sees it. A pseudo-element keeps the value in one place, needs no
 * change to micro-poll-db.js, and stays out of the accessibility tree, so a
 * screen reader is not told "+5 pts" once per option.
 */

/* ── Card ────────────────────────────────────────────────────────────────── */

.poll-container.eg-poll-connect {
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: var(--eg-poll-pad, 32px) !important;
    border: 1px solid var(--eg-poll-border, #d6e9f5) !important;
    border-radius: var(--eg-poll-radius, 24px) !important;
    background: var(--eg-poll-bg, #e1f0fa) !important;
    box-shadow: none !important;
    font-family: 'DM Sans', 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
}

/* The masked flourish in the bottom-left corner. Figma rotates the group 180
   degrees and bleeds it 1px past both edges; the card clips it. Decorative
   only, so it is a background rather than an <img> and never a hit target.
   The scale is applied after the rotation and about the default centre origin,
   so a larger flourish bleeds further out of all four sides and stays clipped
   to the card rather than sliding away from its corner. */
.poll-container.eg-poll-connect::before {
    content: '' !important;
    position: absolute !important;
    left: -1px !important;
    bottom: -1px !important;
    width: 283px !important;
    height: 302px !important;
    max-width: 100% !important;
    background-image: var(--eg-poll-flourish, none) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: 100% 100% !important;
    transform: rotate(180deg) scale(var(--eg-poll-flourish-scale, 100%)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.poll-container.eg-poll-connect.eg-no-flourish::before {
    display: none !important;
}

/* Everything real sits above the flourish. */
.poll-container.eg-poll-connect > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.poll-container.eg-poll-connect .poll-header {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
}

/* The eyebrow and the counter are the same line in Figma, which shows only a
   static label. The counter ("Poll 2 of 4") is real information the design
   does not account for, so it keeps the eyebrow treatment when it is the only
   line and steps back to a caption when an explicit eyebrow is set. */
.poll-container.eg-poll-connect .poll-eyebrow,
.poll-container.eg-poll-connect .poll-counter {
    display: block !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: var(--eg-poll-eyebrow-size, 14px) !important;
    font-weight: 600 !important;
    line-height: 1.143 !important;
    letter-spacing: var(--eg-poll-eyebrow-tracking, 2px) !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

.poll-container.eg-poll-connect .poll-eyebrow + .poll-counter {
    margin-top: -16px !important;
    margin-bottom: 20px !important;
    font-size: calc(var(--eg-poll-eyebrow-size, 14px) * 0.785) !important;
    font-weight: 500 !important;
    letter-spacing: calc(var(--eg-poll-eyebrow-tracking, 2px) * 0.5) !important;
    opacity: 0.66 !important;
}

.poll-container.eg-poll-connect .poll-question {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: var(--eg-poll-question-size, 18px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
}

/* Figma has no floating badge — the points live on each answer instead, so the
   show_point_badge toggle is off by default and this class is normally
   present. The element stays in the DOM either way because it carries the
   hover hint text the shortcode builds from the point_hint_text setting. */
.poll-container.eg-poll-connect.eg-no-badge .point-badge {
    display: none !important;
}

/* ── Answers ─────────────────────────────────────────────────────────────── */

.poll-container.eg-poll-connect .poll-options {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--eg-poll-answer-gap, 12px) !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.poll-container.eg-poll-connect .poll-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: var(--eg-poll-answer-pad, 12px) !important;
    /* An inset shadow, not a border. Figma draws the 1px stroke inside the
       48px frame; a CSS border sits outside the padding box and made every
       answer 50px tall, which compounds down a four-answer list. */
    border: none !important;
    border-radius: var(--eg-poll-answer-radius, 8px) !important;
    background: var(--eg-poll-answer-bg, rgba(255, 255, 255, 0.46)) !important;
    /* Figma blurs the card art behind each answer. Safari needs the prefix and
       everything else degrades to a flat translucent panel, which is fine. */
    -webkit-backdrop-filter: blur(var(--eg-poll-answer-blur, 2px)) !important;
    backdrop-filter: blur(var(--eg-poll-answer-blur, 2px)) !important;
    box-shadow: inset 0 0 0 1px var(--eg-poll-answer-border, rgba(255, 255, 255, 0.39)) !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: var(--eg-poll-answer-size, 14px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

.poll-container.eg-poll-connect .poll-option:hover {
    background: var(--eg-poll-answer-bg-selected, rgba(255, 255, 255, 0.66)) !important;
}

.poll-container.eg-poll-connect .poll-option.selected {
    background: var(--eg-poll-answer-bg-selected, rgba(255, 255, 255, 0.66)) !important;
    box-shadow: inset 0 0 0 1px var(--eg-poll-answer-border-selected, rgba(255, 255, 255, 0.49)),
                0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
    font-weight: 500 !important;
}

/* ── Points chip ─────────────────────────────────────────────────────────── */

/* Gated on a class rather than on the property being empty: content:"" still
   paints the chip's padding and background, so a poll worth no points would
   grow four empty blue capsules. */
.poll-container.eg-poll-connect.eg-poll-has-pts .poll-option::after {
    content: var(--eg-poll-pts, '') !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 4px 8px !important;
    border-radius: 14px !important;
    background: var(--eg-poll-chip-bg, rgba(190, 224, 245, 0.5)) !important;
    color: var(--eg-poll-chip-text, #262b67) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.poll-container.eg-poll-connect.eg-poll-has-pts .poll-option.selected::after {
    background: var(--eg-poll-chip-bg-selected, rgba(190, 224, 245, 0.82)) !important;
}

/* Ties with the rule above on specificity and wins on source order. Declared
   after it for that reason — moving it up silently disables the toggle. */
.poll-container.eg-poll-connect.eg-no-answer-pts .poll-option::after {
    content: none !important;
    display: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* body[data-button-style] is Salient's own global button selector at (0,1,1,0);
   a plain class loses to it even with !important, so the rule is repeated
   under that prefix. See the Salient section of CLAUDE.md. */
.poll-container.eg-poll-connect .poll-button,
body[data-button-style] .poll-container.eg-poll-connect .poll-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    /* Figma's button node carries both h-[44px] and py-[16px]; the explicit
       height wins there, so 16px padding would render it 56px tall here. The
       padding is set to whatever leaves 44px around a 24px line box, and
       min-height rather than height so a label that wraps still fits. */
    min-height: var(--eg-poll-btn-height, 44px) !important;
    margin: 0 !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: var(--eg-poll-btn-radius, 8px) !important;
    background: var(--eg-poll-btn-bg, #1c2f69) !important;
    background-color: var(--eg-poll-btn-bg, #1c2f69) !important;
    background-image: none !important;
    color: var(--eg-poll-btn-text, #ffffff) !important;
    font-family: inherit !important;
    font-size: var(--eg-poll-btn-size, 14px) !important;
    font-weight: 700 !important;
    line-height: 1.714 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 6px -4px rgba(84, 96, 128, 0.1), 0 10px 15px -3px rgba(84, 96, 128, 0.1) !important;
    cursor: pointer !important;
    transition: filter 0.18s ease !important;
}

.poll-container.eg-poll-connect .poll-button:hover:not(:disabled),
body[data-button-style] .poll-container.eg-poll-connect .poll-button:hover:not(:disabled) {
    background: var(--eg-poll-btn-bg, #1c2f69) !important;
    color: var(--eg-poll-btn-text, #ffffff) !important;
    filter: brightness(1.12) !important;
}

.poll-container.eg-poll-connect .poll-button:disabled,
body[data-button-style] .poll-container.eg-poll-connect .poll-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: none !important;
}

/* ── Results views ───────────────────────────────────────────────────────── */

/* Figma only draws the question state. These keep the other two views in the
   same card rather than letting micro-poll.css show through underneath. */
.poll-container.eg-poll-connect .chart-container,
.poll-container.eg-poll-connect .results-content {
    margin: 0 0 16px !important;
}

.poll-container.eg-poll-connect .chart-bar {
    background: var(--eg-poll-answer-bg, rgba(255, 255, 255, 0.46)) !important;
    border: 1px solid var(--eg-poll-answer-border, rgba(255, 255, 255, 0.39)) !important;
    border-radius: var(--eg-poll-answer-radius, 8px) !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
}

.poll-container.eg-poll-connect .total-votes {
    margin: 0 0 24px !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
    text-align: left !important;
}

.poll-container.eg-poll-connect .nav-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.poll-container.eg-poll-connect .nav-button,
body[data-button-style] .poll-container.eg-poll-connect .nav-button {
    padding: 8px 14px !important;
    border: 1px solid var(--eg-poll-border, #d6e9f5) !important;
    border-radius: var(--eg-poll-btn-radius, 8px) !important;
    background: var(--eg-poll-answer-bg-selected, rgba(255, 255, 255, 0.66)) !important;
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.poll-container.eg-poll-connect .nav-indicator {
    color: var(--eg-poll-text, #0e1c4d) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
}