/* MTGCardsmith Forum Polls — display widget, editor button and creator modal.
   Reuses the forum's home2 design tokens (--gold/--text/--muted/--ux-hair/
   --sans/--serif) with dark-theme fallbacks so it matches whatever surrounds it.
   Everything is scoped to .mtgcs-poll* so it cannot leak into the rest of the
   forum. */

.mtgcs-poll {
    --pl-gold: var(--gold, #f3ad33);
    --pl-text: var(--text, #f4f5ec);
    --pl-muted: var(--muted, #c3dad2);
    --pl-hair: var(--ux-hair, rgba(151, 214, 202, .16));
    --pl-surface: rgba(255, 255, 255, .03);
    --pl-track: rgba(255, 255, 255, .08);

    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--pl-hair);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(243, 173, 51, .06), var(--pl-surface));
    font-family: var(--sans, "Trebuchet MS", Arial, sans-serif);
    color: var(--pl-text);
}
.mtgcs-poll *,
.mtgcs-poll-modal * { box-sizing: border-box; }

/* ---- head ---- */
.mtgcs-poll-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mtgcs-poll-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--pl-gold);
    background: rgba(243, 173, 51, .12);
    padding: 4px 10px; border-radius: 999px;
}
.mtgcs-poll-closed {
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--pl-muted); background: rgba(255, 255, 255, .07);
    padding: 4px 8px; border-radius: 999px;
}
.mtgcs-poll-ico {
    display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--pl-ico-chart) center/contain no-repeat;
    mask: var(--pl-ico-chart) center/contain no-repeat;
    --pl-ico-chart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='12' width='4' height='9'/><rect x='10' y='6' width='4' height='15'/><rect x='17' y='9' width='4' height='12'/></svg>");
}
.mtgcs-poll-ico-check {
    -webkit-mask: var(--pl-ico-check) center/contain no-repeat;
    mask: var(--pl-ico-check) center/contain no-repeat;
    --pl-ico-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---- question ---- */
.mtgcs-poll-q {
    font-family: var(--serif, Georgia, serif);
    font-weight: 700; font-size: 18px; line-height: 1.35;
    color: var(--pl-text); margin-bottom: 12px;
}

/* ---- options (vote view) ---- */
.mtgcs-poll-options { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.mtgcs-poll-option {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--pl-hair); border-radius: 10px;
    background: var(--pl-surface);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mtgcs-poll-option:hover { border-color: var(--pl-gold); background: rgba(243, 173, 51, .06); }
.mtgcs-poll-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mtgcs-poll-dot {
    width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--pl-muted);
    flex: 0 0 auto; position: relative; transition: border-color .15s ease;
}
.mtgcs-poll-option:has(input:checked) { border-color: var(--pl-gold); box-shadow: 0 0 0 1px var(--pl-gold) inset; }
.mtgcs-poll-option:has(input:checked) .mtgcs-poll-dot { border-color: var(--pl-gold); }
.mtgcs-poll-option:has(input:checked) .mtgcs-poll-dot::after {
    content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--pl-gold);
}
.mtgcs-poll-option input:focus-visible + .mtgcs-poll-dot { outline: 2px solid var(--pl-gold); outline-offset: 2px; }
.mtgcs-poll-option input:disabled ~ .mtgcs-poll-label { cursor: default; }
.mtgcs-poll-label { font-size: 15px; color: var(--pl-text); }

/* ---- actions ---- */
.mtgcs-poll-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mtgcs-poll-vote {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--pl-gold); color: #1a1205;
    font-weight: 700; font-size: 14px; padding: 9px 18px; border: 0; border-radius: 8px;
    transition: filter .15s ease, transform .05s ease;
}
.mtgcs-poll-vote:hover { filter: brightness(1.05); }
.mtgcs-poll-vote:active { transform: translateY(1px); }
.mtgcs-poll-vote:disabled { opacity: .55; cursor: not-allowed; }
.mtgcs-poll-vote .mtgcs-poll-ico { width: 13px; height: 13px; color: #1a1205; }
.mtgcs-poll-signin {
    display: inline-flex; align-items: center;
    font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px;
    border: 1px solid var(--pl-gold); color: var(--pl-gold) !important; text-decoration: none;
}
.mtgcs-poll-signin:hover { background: rgba(243, 173, 51, .1); color: var(--pl-gold) !important; }
.mtgcs-poll-link {
    background: none; border: 0; cursor: pointer; color: var(--pl-muted);
    font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 0;
    font-family: inherit;
}
.mtgcs-poll-link:hover { color: var(--pl-gold); }
.mtgcs-poll-link[hidden] { display: none; }
.mtgcs-poll-flash { margin-top: 10px; font-size: 13px; font-weight: 600; color: #ff9a8b; }
.mtgcs-poll-flash[hidden] { display: none; }

/* ---- results view ---- */
.mtgcs-poll-results { display: none; }
.mtgcs-poll.is-results .mtgcs-poll-results { display: block; }
.mtgcs-poll.is-results .mtgcs-poll-vote-view { display: none; }
.mtgcs-poll-result { margin-bottom: 11px; }
.mtgcs-poll-result-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.mtgcs-poll-result-label { font-size: 15px; color: var(--pl-text); }
.mtgcs-poll-result-pct { font-weight: 700; color: var(--pl-text); font-variant-numeric: tabular-nums; }
.mtgcs-poll-you {
    font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--pl-gold); background: rgba(243, 173, 51, .14);
    padding: 1px 6px; border-radius: 999px; margin-left: 6px;
}
.mtgcs-poll-bar { height: 9px; border-radius: 999px; background: var(--pl-track); overflow: hidden; }
.mtgcs-poll-bar-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--pl-gold), #ffce6a);
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.mtgcs-poll-result.is-mine .mtgcs-poll-bar-fill { background: linear-gradient(90deg, var(--pl-gold), var(--pl-gold)); }
.mtgcs-poll-result-votes { font-size: 12px; color: var(--pl-muted); margin-top: 4px; }
.mtgcs-poll-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pl-hair);
}
.mtgcs-poll-total { font-size: 13px; font-weight: 600; color: var(--pl-muted); }

/* ---- card answers (vote view) ---- */
.mtgcs-poll-option.is-card { align-items: center; }
.mtgcs-poll-card { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mtgcs-poll-cardimg {
    width: 104px; height: auto; aspect-ratio: 495 / 693; display: block; flex: 0 0 auto;
    border-radius: 8px; border: 1px solid var(--pl-hair);
    background: rgba(255, 255, 255, .03);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.mtgcs-poll-cardname {
    font-size: 15px; font-weight: 600; line-height: 1.3;
    color: var(--pl-text) !important; text-decoration: none; word-break: break-word;
}
a.mtgcs-poll-cardname:hover { color: var(--pl-gold) !important; text-decoration: underline; }
.mtgcs-poll-cardlink { color: var(--pl-text) !important; text-decoration: none; }
a.mtgcs-poll-cardlink:hover { color: var(--pl-gold) !important; text-decoration: underline; }

/* ---- card answers (results view) ---- */
.mtgcs-poll-result.is-card .mtgcs-poll-result-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mtgcs-poll-result-thumb { flex: 0 0 auto; display: inline-block; line-height: 0; }
.mtgcs-poll-result-thumb img {
    width: 34px; height: auto; aspect-ratio: 495 / 693; display: block;
    border-radius: 4px; border: 1px solid var(--pl-hair);
}
.mtgcs-poll-result-name { color: var(--pl-text) !important; text-decoration: none; }
a.mtgcs-poll-result-name:hover { color: var(--pl-gold) !important; text-decoration: underline; }

/* ============================================================ editor button */
.editor .mtgcs-poll-button { cursor: pointer; }
.mtgcs-poll-button::before {
    content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--pl-btn-ico) center/contain no-repeat;
    mask: var(--pl-btn-ico) center/contain no-repeat;
    --pl-btn-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='12' width='4' height='9'/><rect x='10' y='6' width='4' height='15'/><rect x='17' y='9' width='4' height='12'/></svg>");
}

/* ================================================================== modal */
.mtgcs-poll-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 12, 16, .66); padding: 16px;
}
.mtgcs-poll-modal.open { display: flex; }
.mtgcs-pm-box {
    width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
    background: #07242b; color: var(--text, #f4f5ec);
    border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2)); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    font-family: var(--sans, "Trebuchet MS", Arial, sans-serif);
}
.mtgcs-pm-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 16px 8px;
}
.mtgcs-pm-head h3 {
    margin: 0; font-family: var(--serif, Georgia, serif); font-size: 19px; font-weight: 700;
    color: var(--text, #f4f5ec);
}
.mtgcs-pm-x {
    background: none; border: 0; color: var(--muted, #c3dad2); font-size: 26px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
.mtgcs-pm-x:hover { color: var(--gold, #f3ad33); }
.mtgcs-pm-body { padding: 8px 16px 4px; }
.mtgcs-pm-l { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #c3dad2); margin: 10px 0 6px; }
.mtgcs-pm-l-row { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.mtgcs-pm-l-row .mtgcs-pm-l { margin: 0; }
.mtgcs-pm-help { font-size: 12px; color: var(--muted, #c3dad2); opacity: .8; text-transform: none; letter-spacing: 0; }
.mtgcs-pm-input {
    width: 100%; padding: 10px 12px; font-size: 15px;
    background: rgba(255, 255, 255, .04); color: var(--text, #f4f5ec);
    border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2)); border-radius: 9px;
    font-family: inherit;
}
.mtgcs-pm-input::placeholder { color: var(--muted, #c3dad2); opacity: .6; }
.mtgcs-pm-input:focus { outline: none; border-color: var(--gold, #f3ad33); box-shadow: 0 0 0 1px var(--gold, #f3ad33); }
.mtgcs-pm-answers { display: flex; flex-direction: column; gap: 8px; }
.mtgcs-pm-answer { display: flex; align-items: center; gap: 8px; }
.mtgcs-pm-answer .mtgcs-pm-input { flex: 1 1 auto; }
.mtgcs-pm-del {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .04); color: var(--muted, #c3dad2);
    border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2)); font-size: 18px; line-height: 1;
}
.mtgcs-pm-del:hover { color: #ff9a8b; border-color: #ff9a8b; }
.mtgcs-pm-add {
    margin-top: 10px; cursor: pointer; font-family: inherit;
    background: rgba(243, 173, 51, .08); color: var(--gold, #f3ad33);
    border: 1px solid var(--gold, #f3ad33); border-radius: 8px;
    font-size: 13px; font-weight: 700; padding: 8px 14px;
}
.mtgcs-pm-add:hover { background: rgba(243, 173, 51, .16); }
.mtgcs-pm-err { margin-top: 12px; font-size: 13px; font-weight: 600; color: #ff9a8b; }
.mtgcs-pm-err[hidden] { display: none; }
.mtgcs-pm-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 16px 16px; margin-top: 8px;
}
.mtgcs-pm-btn { cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 9px; border: 0; }
.mtgcs-pm-ghost { background: rgba(255, 255, 255, .05); color: var(--text, #f4f5ec); border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2)); }
.mtgcs-pm-ghost:hover { background: rgba(255, 255, 255, .1); }
.mtgcs-pm-primary { background: var(--gold, #f3ad33); color: #1a1205; }
.mtgcs-pm-primary:hover { filter: brightness(1.05); }
.mtgcs-pm-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ---- answer rows + live card preview ---- */
.mtgcs-pm-answer-row { display: flex; flex-direction: column; gap: 8px; }
.mtgcs-pm-cardprev {
    display: flex; align-items: center; gap: 12px; padding: 8px;
    border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2)); border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}
.mtgcs-pm-cardprev[hidden] { display: none; }
.mtgcs-pm-cardprev-img {
    width: 44px; height: auto; aspect-ratio: 495 / 693; display: block; flex: 0 0 auto;
    border-radius: 4px; border: 1px solid var(--ux-hair, rgba(151, 214, 202, .2));
}
.mtgcs-pm-cardprev-name { font-size: 14px; font-weight: 600; color: var(--text, #f4f5ec); word-break: break-word; }
.mtgcs-pm-cardprev-msg { font-size: 13px; color: var(--muted, #c3dad2); }
.mtgcs-pm-cardprev.is-err .mtgcs-pm-cardprev-msg { color: #ff9a8b; }

/* ---- mobile ---- */
@media (max-width: 600px) {
    .mtgcs-poll { padding: 14px; }
    .mtgcs-poll-q { font-size: 16px; }
    .mtgcs-pm-box { max-width: 100%; border-radius: 14px; }
    .mtgcs-poll-modal { padding: 10px; align-items: flex-end; }
    .mtgcs-poll-cardimg { width: 84px; }
    .mtgcs-poll-card { gap: 8px; }
}