/* v60: mobile edge-to-edge interactive-question option buttons.
   This is mobile-only and leaves desktop/tablet unchanged. */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Make the interactive question block use the full mobile card width instead of looking inset. */
    #fintter-main-content [data-post-card] [data-interactive-question-card].ft-iq-card,
    #feed-posts-list [data-post-card] [data-interactive-question-card].ft-iq-card,
    #feed-posts-list article [data-interactive-question-card].ft-iq-card,
    [data-interactive-question-card].ft-iq-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        padding-left: .62rem !important;
        padding-right: .62rem !important;
    }

    /* Let the option rail stretch to the true edge of the question card. */
    [data-interactive-question-card] form[data-interactive-question-form],
    [data-interactive-question-card] [data-iq-guest-options] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    [data-interactive-question-card] [data-iq-options-list],
    [data-interactive-question-card] [data-iq-guest-options] {
        width: calc(100% + 1.24rem) !important;
        max-width: calc(100% + 1.24rem) !important;
        margin-left: -.62rem !important;
        margin-right: -.62rem !important;
        gap: .75rem !important;
        display: grid !important;
    }

    [data-interactive-question-card] [data-iq-option-label].ft-iq-option,
    [data-interactive-question-card] a[data-iq-login-required].ft-iq-option,
    [data-interactive-question-card] .ft-iq-option {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 1.18rem !important;
        padding: 1rem .95rem !important;
        min-height: 4.9rem !important;
        display: flex !important;
        align-items: center !important;
    }

    [data-interactive-question-card] .ft-iq-option-letter,
    [data-interactive-question-card] .ft-iq-answer-letter {
        width: 2.18rem !important;
        height: 2.18rem !important;
        min-width: 2.18rem !important;
    }

    [data-interactive-question-card] .ft-iq-option span.min-w-0,
    [data-interactive-question-card] [data-iq-option-label] span.min-w-0,
    [data-interactive-question-card] a[data-iq-login-required] span.min-w-0 {
        font-size: .98rem !important;
        line-height: 1.45rem !important;
        overflow-wrap: anywhere !important;
    }

    /* Keep the selected/result panels aligned with the new option width. */
    [data-interactive-question-card] .ft-iq-result,
    [data-interactive-question-card] .ft-iq-answer,
    [data-interactive-question-card] .ft-iq-explanation {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Very small phones: use every safe pixel without causing sideways scroll. */
@media (max-width: 420px) {
    [data-interactive-question-card].ft-iq-card {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    [data-interactive-question-card] [data-iq-options-list],
    [data-interactive-question-card] [data-iq-guest-options] {
        width: calc(100% + 1rem) !important;
        max-width: calc(100% + 1rem) !important;
        margin-left: -.5rem !important;
        margin-right: -.5rem !important;
    }

    [data-interactive-question-card] [data-iq-option-label].ft-iq-option,
    [data-interactive-question-card] a[data-iq-login-required].ft-iq-option,
    [data-interactive-question-card] .ft-iq-option {
        border-radius: 1.05rem !important;
        padding-left: .86rem !important;
        padding-right: .86rem !important;
    }
}