/* ogapoll-details.css — /poll/details/{id} in Core: the Studio's console (ogapoll.css .ogapoll-details,
   .ogapoll-dt-*, .ogapoll-cm-*, .ogapoll-pt-*, .ogapoll-an-*) in the site's look: the site's zoom (--mo-zoom) and
   ONE width for the title, the tabs and every pane — the site's wide width (--mo-wide, 1300px on screen, as the
   header); the Poll / Results / Participants cards centred inside it at the column width (--mo-column, 780px). */
.ogapoll.ogapoll-details.ogapoll-dtcore { zoom: var(--mo-zoom, 1); max-width: calc(var(--mo-wide, 1300px) / var(--mo-zoom, 1)); margin: 24px auto 60px; padding: 0 20px 24px; }
.ogapoll.ogapoll-dtcore .ogapoll-dt-pane.ogapoll-dt-narrow { zoom: 1; max-width: calc(var(--mo-column, 780px) / var(--mo-zoom, 1)); margin-left: auto; margin-right: auto; }
.ogapoll-dtcore .ogapoll-dt-top { margin-bottom: 16px; }
.ogapoll-dtcore .ogapoll-dt-top .ogapoll-flash { margin: 12px 0 14px; }
.ogapoll-dtcore .ogapoll-dt-head { margin-bottom: 10px; }
.ogapoll-dtcore .ogapoll-dt-title { font-size: 19px; }
.ogapoll-dtcore .ogapoll-dt-head .ogapoll-pill { flex: none; }
.ogapoll-dtcore .ogapoll-dt-tabs button { font-size: 15px; padding: 12px 10px; }
.ogapoll-dtcore .ogapoll-dt-wide { max-width: none; margin: 0; }
/* Analytics: the same width, its inside not zoomed (Chart.js reads the mouse in unzoomed pixels: tooltips stay
   under the pointer, the canvases stay sharp) */
.ogapoll-dtcore .ogapoll-dt-wide { zoom: calc(1 / var(--mo-zoom, 1)); }
.ogapoll-dtcore a.ogapoll-dt-back:hover { background: var(--navy2); }

/* the voter's card and the Results / answers cards: inside the zoomed column, not zoomed again */
.ogapoll-dtcore .ogapoll-core { zoom: 1; max-width: none; margin: 0 0 4px; }
.ogapoll-dtcore .ogapoll-dt-card .ogapoll-pcard { padding-top: 14px; }
.ogapoll-dtcore .ogapoll-dt-card .ogapoll-pc-q { position: relative; }
.ogapoll-dtcore .ogapoll-rs-tools { margin-bottom: 12px; }

/* the composer's avatar: the viewer's place (a person), not someone's picture */
.ogapoll-cm-you { display: grid; place-items: center; background: var(--section); border: 1px solid var(--border); }
.ogapoll-cm-you img { width: 18px; height: 18px; opacity: .7; }
.ogapoll-cm-empty { padding: 20px; }

/* a visitor: log in to comment */
.ogapoll-cm-login { display: block; width: 100%; margin: 0 0 16px; padding: 12px; border: 1.5px dashed var(--border); border-radius: 14px; background: var(--section2); color: var(--blue); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.ogapoll-cm-login:hover { border-color: var(--cyan); }

/* Results not shown to this viewer (log in / vote first) */
.ogapoll-dt-note { padding: 28px 20px; text-align: center; }
.ogapoll-dt-note p { margin: 0 0 14px; font-weight: 700; color: var(--muted); }

/* Participants / Analytics without the poll plan: what it gives, and where to take it */
.ogapoll-plan-up { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 26px 22px; text-align: center; }
.ogapoll-plan-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--section); color: var(--navy); }
.ogapoll-plan-up h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 17px; color: var(--navy); margin: 0 0 8px; }
.ogapoll-plan-up p { margin: 0 0 10px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
.ogapoll-plan-up ul { list-style: none; padding: 0; margin: 0 auto 18px; max-width: 420px; text-align: left; }
.ogapoll-plan-up li { position: relative; padding: 6px 0 6px 26px; font-weight: 700; font-size: 13.5px; color: var(--navy); }
.ogapoll-plan-up li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 12px; height: 7px; border-left: 2.5px solid #1E9E55; border-bottom: 2.5px solid #1E9E55; transform: rotate(-45deg); }
.ogapoll-plan-up .ogapoll-btn { display: inline-block; text-decoration: none; }

/* the poll plan window (the paid SMS's modal, ogapoll-core.css) */
.ogapoll-plan-save { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E7F7EE; color: #1E7A45; font-size: 11px; font-weight: 800; }
.ogapoll-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 10px; color: var(--navy, #0B2C57); }
.ogapoll-plan-price b { font: 800 34px 'Poppins', sans-serif; line-height: 1; }
.ogapoll-plan-price span { font-weight: 800; color: var(--muted, #6C8098); }
.ogapoll-plan-coin { width: 28px; height: 28px; align-self: center; }
.ogapoll-plan-gives { margin: 0 0 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted, #6C8098); line-height: 1.5; }
.ogapoll-plan-until { margin: 0 0 10px; text-align: center; font-size: 12.5px; font-weight: 800; color: #1E7A45; }

/* not found / no rights */
.ogapoll-dt-error { text-align: center; padding-bottom: 24px !important; }
.ogapoll-dt-error p { font-weight: 700; color: var(--muted); margin: 8px 0 16px; }

@media (max-width: 767px) {
    .ogapoll.ogapoll-details.ogapoll-dtcore { margin-top: 12px; padding: 0 8px 16px; }
    .ogapoll.ogapoll-dtcore .ogapoll-dt-pane.ogapoll-dt-narrow { max-width: none; }
    .ogapoll-dtcore .ogapoll-dt-tabs button { font-size: 13.5px; padding: 11px 8px; }
}

/* a jump to the comments (#comments, the card's comments icon) stops below the sticky site header */
#pollComments { scroll-margin-top: calc(var(--mo-hdr-h, 64px) / var(--mo-zoom, 1) + 16px); }

/* a participant: where they voted from (city, country) and their phone, masked */
.ogapoll-pt-place, .ogapoll-pt-phone { display: inline-flex; align-items: center; gap: 5px; }
.ogapoll-pt-place::before, .ogapoll-pt-phone::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; opacity: .8; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ogapoll-pt-place { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E"); }
.ogapoll-pt-phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E"); font-variant-numeric: tabular-nums; }

/* the Poll tab on a desktop: the card and its comments side by side (the whole width); a phone / tablet: one column */
@media (min-width: 992px) {
    /* jQuery's show() writes display:block inline: the grid wins unless the pane is hidden */
    .ogapoll.ogapoll-dtcore .ogapoll-dt-pane.ogapoll-dt-narrow.ogapoll-dt-split { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    .ogapoll.ogapoll-dtcore .ogapoll-dt-split:not([style*="none"]) { display: grid !important; }
    .ogapoll-dt-split .ogapoll-cm { margin-top: 0; }
}