/* Blazor removed conditional elements from the DOM. Razor/JS uses native
   hidden instead; preserve that semantic against existing display rules. */
[hidden] { display: none !important; }

#submission-overlay { z-index: 11000; }
#submission-overlay .submission-overlay__box { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    #submission-overlay .submission-overlay__dots span { animation: none; opacity: 1; }
}

/* Native advertising participates in the grid, never floats above the content. */
[data-ad-card] { min-width: 0; overflow: hidden; isolation: isolate; }
[data-ad-card] .ad-card-body { min-width: 0; overflow: hidden; }
.ad-placement { width: 100%; min-width: 0; min-height: 360px; overflow: hidden; }
.ad-frame { display: block; width: 100%; height: 640px; max-width: 100%; border: 0; }
.ad-ready .ad-placement { min-height: 0; }
.ad-pending .ad-placement { height: 0; min-height: 0; visibility: hidden; pointer-events: none; }
.ad-fallback { display: flex; min-height: 18rem; padding: 1.5rem .5rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; }
.ad-fallback h3, .ad-fallback p { margin: 0; }
.ad-fallback p { line-height: 1.6; }
.ad-sponsor-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--surface-active-bg); font-size: 2rem; }
.full-poll-block.ad-card--banner { padding: 0; }
.ad-card--banner .ad-card-body { padding: 24px; }
.ad-card--banner .ad-placement { width: 160px; min-height: 600px; margin-inline: auto; }
.ad-card--banner .ad-frame { width: 160px; height: 600px; }
.ad-card--banner.ad-pending .ad-placement { min-height: 0; }
.ad-card--banner .ad-fallback .btn { max-width: 100%; white-space: normal; text-align: center; }

/* Poll ads stay in the page flow. Only the placement for this viewport is loaded. */
.poll-page-ad-layout > *, .poll-page-ad { min-width: 0; }
.poll-page-content { min-width: 0; container: poll-content / inline-size; }
.poll-page-ad--desktop { display: none; }
.poll-page-ad .full-poll-block { width: 100%; }
.poll-page-ad .ad-card-body { height: auto; }
.ranking-ad-layout > *, .ranking-page-ad { min-width: 0; }
.ranking-page-ad--desktop { display: none; }
.ranking-page-ad--mobile { grid-column: 1 / -1; }
.ranking-page-ad .full-poll-block { width: 100%; }
.ranking-page-ad .ad-card-body { height: auto; }
.poll-page-navigation--bottom { margin: 0; }
.comment-signin { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.comment-signin > .section-description { width: 100%; margin: 0; }
.comment-signin > [data-action="login"] { width: 100%; }
@media (min-width: 1024px) {
    .poll-page--advertising { width: min(100%, 90rem); }
    .poll-page--advertising.poll-page--with-description { width: min(100%, 112rem); }
    .poll-page--advertising .poll-page-ad-layout, .ranking--advertising .ranking-ad-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr) 208px; gap: 1.5rem; align-items: start; }
    .poll-page--advertising .poll-page-grid { grid-template-columns: minmax(0, 1fr); }
    .poll-page--with-description .poll-page-grid { grid-template-columns: minmax(0, 1fr); }
    /* Each card keeps at least 320px, plus the actual gap between them. */
    @container poll-content (min-width: calc(640px + 1.5rem)) {
        .poll-page--with-description .poll-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .poll-page--with-description .poll-page-grid > [data-poll] { align-self: stretch; }
    .poll-page-ad--desktop { display: block; }
    .poll-page-ad--mobile, .poll-page-navigation--bottom { display: none; }
    .ranking-page-ad--desktop { display: block; }
    .ranking-page-ad--mobile { display: none; }
    .ranking--advertising .ranking-container { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1440px) { .ranking--advertising .ranking-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Rotate the supplied illustration's blue-green tint with the active theme. */
.poll-page-description { position: relative; isolation: isolate; overflow: hidden; }
.poll-page-description .poll-detail-eyebrow { position: relative; z-index: 1; margin: 0 0 1.5rem; color: color-mix(in srgb, var(--theme-primary) 70%, var(--surface-text)); font-size: 1rem; font-weight: 750; line-height: 1.5; letter-spacing: .09em; }
.poll-page-description .poll-detail-eyebrow::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .75rem; border-radius: 2px; background: var(--theme-accent); }
.poll-page-description .poll-description { position: relative; z-index: 1; margin: 0; padding: 1.25rem 1.25rem 1.25rem 2.25rem; border-radius: 1rem; background: color-mix(in srgb, var(--theme-primary) 5%, var(--surface-active-bg)); }
.poll-page-description .poll-description::before { content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: 1rem; width: 4px; border-radius: 2px; background: var(--theme-accent); }
.poll-page-description .poll-description__text { line-height: 1.65; }
.poll-about-orbits { position: absolute; z-index: 0; width: 100%; height: auto; left: 0; bottom: 0; pointer-events: none; mask-image: linear-gradient(to bottom, transparent 32%, #000 40%); filter: hue-rotate(calc((var(--theme-primary-h) - 192) * 1deg)); }
.poll-about-tagline { position: relative; z-index: 1; max-width: 15rem; margin: auto 0 0; padding-top: 8rem; font-size: .7rem; line-height: 1.9; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--theme-primary) 65%, var(--surface-text)); }
.poll-about-tagline::after { content: ""; display: block; width: 2.25rem; height: 4px; margin-top: .75rem; border-radius: 2px; background: var(--theme-accent); opacity: .5; }
@media (min-width: 1024px) {
    .poll-page-description { display: flex; flex-direction: column; min-height: 32rem; background: var(--surface-active-bg); }
}
@container poll-content (width < calc(640px + 1.5rem)) {
    .poll-page-description { display: block; min-height: 0; }
    .poll-about-orbits, .poll-about-tagline { display: none; }
}
@media (max-width: 1023px) {
    .poll-page-description { display: block; padding: 1rem; border: 1px solid var(--surface-border); border-radius: 1rem; background: var(--surface-active-bg); color: var(--surface-text); }
    .poll-page-description .poll-detail-eyebrow { margin-bottom: 1rem; }
    .poll-page-description .poll-description { padding: 1rem 1rem 1rem 2rem; }
    .poll-about-orbits, .poll-about-tagline { display: none; }
}

/* Razor's native validation uses the same error colour as the original forms. */
form [aria-invalid="true"]:is(input,select,textarea,[contenteditable],.correct-answer-image-options) {
    border: 2px solid var(--color-error);
    scroll-margin-block: 6rem;
}
/* Join the focus outline to the error border: one thicker contour, no layout shift. */
form [aria-invalid="true"]:is(input,select,textarea,[contenteditable],.correct-answer-image-options):focus-visible {
    outline: 2px solid var(--color-error);
    outline-offset: 0;
    box-shadow: none;
}
.field-validation-error { display: block; font-size: .875rem; color: var(--color-error); }
.form-checkbox:has([aria-invalid="true"]) .checkmark,
.toggle-input[aria-invalid="true"] + .toggle,
.upload-button:has([aria-invalid="true"]) .upload-button-label {
    border: 2px solid var(--color-error);
}
.option-item > .form-group-plain:has(.field-validation-error) {
    display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .25rem;
}
.filter-content-type-toggle:has(.field-validation-error) { flex-wrap: wrap; }
.filter-content-type-toggle > .field-validation-error { flex-basis: 100%; order: 3; }
.comment-form { flex-wrap: wrap; }
.comment-form > .comment-input { flex-basis: 0; min-width: 0; }
.comment-form > :is(.field-validation-error,[data-error]:not(:empty)) { flex-basis: 100%; order: 3; }
@media (max-width: 479px) { .comment-form > .comment-input { flex-basis: 100%; } }

/* Use the browser's accessible top layer with the existing confirmation styles. */
dialog[data-author-confirm] {
    border: 0;
    color: var(--color-text);
    width: min(27rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
}
dialog[data-author-confirm]::backdrop { background: rgb(0 0 0 / .55); }
body:has(dialog[data-author-confirm][open]) { overflow: hidden; }
[data-authoring] .btn-remove-option-translation svg { width: 1rem; height: 1rem; }

/* Razor authoring allows descriptions up to 150% of the original 15-line limit. */
[data-authoring] .description-editor__content {
    max-height: calc(23 * 1.5rem + 1.5rem);
    font-family: "Twemoji Mozilla", var(--font-family-base);
}
[data-authoring] [data-emoji-toggle][aria-expanded="true"] {
    background: var(--theme-primary);
    color: #fff;
}
.description-editor__emoji-panel {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    width: min(22rem, calc(100vw - 1rem));
    height: min(26rem, calc(100dvh - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--control-border);
    border-radius: .75rem;
    background: var(--control-bg);
    color: var(--control-text);
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / .25);
}
.description-editor__emoji-panel emoji-picker {
    display: block;
    width: 100%;
    height: 100%;
    --background: var(--control-bg);
    --border-color: var(--control-border);
    --input-font-color: var(--control-text);
    --indicator-color: var(--theme-primary);
    --outline-color: var(--theme-primary);
    --emoji-font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.description-editor__emoji-status {
    display: grid;
    min-height: 12rem;
    padding: 1rem;
    place-items: center;
    color: var(--color-text-muted, currentColor);
    text-align: center;
}

/* Image answers fill two cells; the trailing drop zone fills the row whenever
   there is no image beside it (0, 2 or 4 completed images). */
[data-authoring] .options-list-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    justify-items: stretch;
}
[data-authoring] .options-list-image > .option-item-image:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
[data-authoring] .option-item-image > .form-group-plain,
[data-authoring] .option-item-image [data-image-field] {
    width: 100%;
    min-width: 0;
}
[data-authoring] .upload-button--dropzone {
    display: block;
    width: 100%;
}
[data-authoring] .upload-button-label--dropzone {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 10rem;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem;
    border: 2px dashed var(--theme-primary);
    border-radius: var(--border-radius, 1rem);
    background: #fff;
    color: var(--theme-primary);
    text-align: center;
}
[data-authoring] .upload-button-label--dropzone:hover,
[data-authoring] .upload-button-label--dropzone.is-dragging {
    border-color: var(--theme-primary);
    background: color-mix(in srgb, var(--theme-primary) 12%, var(--control-bg));
}
[data-authoring] .upload-button-label--dropzone:focus-within {
    outline: 2px solid var(--theme-primary);
    outline-offset: 3px;
}
[data-authoring] .upload-button-label--dropzone > svg {
    width: 2.75rem;
    height: 2.75rem;
}
[data-authoring] .upload-dropzone__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    font-size: 1rem;
    line-height: 1.4;
}
[data-authoring] .upload-dropzone__title { font-weight: 700; }
[data-authoring] .upload-dropzone__browse { text-decoration: underline; }
[data-authoring] .btn-remove-option-image { color: #111; }

/* Country flags are regional-indicator emoji. Windows has no native flag
   glyphs, so descriptions use the flag sprite while retaining the Unicode. */
.poll-description__text .description-flag {
    margin-inline: .12em;
    color: transparent;
    font-size: 0;
    vertical-align: -.08em;
}

@media (max-width: 34rem) {
    [data-authoring] .options-list-image { grid-template-columns: minmax(0, 1fr); }
    [data-authoring] .options-list-image > .option-item-image:last-child:nth-child(odd) { grid-column: auto; }
}

/* The native dialog handles focus and the top layer; keep the existing panel design. */
dialog[data-filter-dialog] {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(30.5rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    color: var(--color-text);
}
dialog[data-filter-dialog][open] { display: flex; }
dialog[data-filter-dialog]::backdrop {
    background: hsl(var(--theme-primary-h) 45% 12% / .54);
    backdrop-filter: blur(1px);
}
body:has(dialog[data-filter-dialog][open]) { overflow: hidden; }
.pollmenu-subcategory-list { max-height: calc(100dvh - var(--header-h) - 2rem); }

@media (max-width: 1023px) {
    dialog[data-filter-dialog] .pollmenu-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
    dialog[data-filter-dialog] .pollmenu-filter-reset {
        grid-row: 1;
        grid-column: 1 / -1;
        justify-self: start;
    }
    dialog[data-filter-dialog] .pollmenu-filter-close { grid-row: 2; grid-column: 1; width: 100%; }
    dialog[data-filter-dialog] [type=submit] { grid-row: 2; grid-column: 2; width: 100%; }
}