/*
 * Mobile and tablet corrections for the Ultimate DBot Builder.
 *
 * Kept out of utt-builder.css so that file stays byte-identical to the copy
 * used on ultimateblocks.tools and can still be md5-compared between the two.
 * Enqueued after it, so equal-specificity rules here win on load order.
 *
 * The root problem was a grid blowout, not text overflow. The desktop rule in
 * utt-builder.css is safe:
 *
 *     .grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) }
 *
 * but its own mobile override drops the floor:
 *
 *     @media(max-width:1080px){ .grid { grid-template-columns: 1fr } }
 *
 * A bare 1fr means minmax(auto, 1fr), and that auto minimum is the item's
 * min-content. The generated strategy is 80KB on one unbreakable line, so the
 * XML <pre> dragged the single column out to ~1450px inside a 375px viewport
 * and left the Build button off-screen.
 */

@media (max-width: 1080px) {
    /* Restore the floor the mobile rule above drops. */
    .utt-builder .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Grid and flex items default to min-width:auto, which is what lets one wide
       child stretch the whole track. */
    .utt-builder .grid > *,
    .utt-builder .pane,
    .utt-builder .card,
    .utt-builder .cols,
    .utt-builder .cols3 {
        min-width: 0;
    }

    /* Let the strategy scroll inside its own box rather than widen the page. */
    .utt-builder pre,
    .utt-builder code,
    .utt-builder #out {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Sticky pins the output over the controls on a short screen. */
    .utt-builder .sticky {
        position: static;
    }
}

@media (max-width: 768px) {
    .utt-builder .wrap {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 32px;
    }

    /* The header ate a third of a phone screen before any content. */
    .utt-builder .utt-head {
        gap: 10px;
        margin-bottom: 4px;
    }

    .utt-builder .utt-head h2 {
        font-size: 20px;
    }

    .utt-builder #mark {
        width: 36px;
        height: 36px;
    }

    .utt-builder .utt-lede {
        font-size: 13px;
    }

    .utt-builder .card {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    /* iOS zooms the page whenever a focused input is under 16px, which leaves
       the layout scrolled sideways with no obvious way back. */
    .utt-builder input[type='text'],
    .utt-builder input[type='number'],
    .utt-builder select,
    .utt-builder textarea,
    .utt-builder button {
        font-size: 16px;
    }

    .utt-builder .btn,
    .utt-builder .tab,
    .utt-builder .arch,
    .utt-builder .ex {
        min-height: 44px;
    }

    .utt-builder .btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .utt-builder .btns .btn {
        flex: 1 1 auto;
    }

    /* Every two-up row goes single file. */
    .utt-builder #archetypes,
    .utt-builder .cols,
    .utt-builder .cols3,
    .utt-builder #upgInfo,
    .utt-builder .stats,
    .utt-builder #stats {
        grid-template-columns: 1fr;
    }

    /* AI Describe: typing fills the screen with keyboard, and the Build button
       sat below a ten-item example list - unreachable without dismissing the
       keyboard and scrolling. Pin it to the bottom of the pane instead. */
    .utt-builder #pane-ai textarea#ai {
        min-height: 128px;
        max-height: 40vh;
        width: 100%;
        resize: vertical;
        font-size: 16px;
        line-height: 1.5;
    }

    .utt-builder #pane-ai .btns {
        position: sticky;
        bottom: 8px;
        z-index: 5;
        margin: 10px -4px 0;
        padding: 8px 4px;
        background: var(--ut-bg, #0a0d12);
        border-radius: 10px;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.45);
    }

    .utt-builder #pane-ai .btns #aiGo {
        flex: 1 1 auto;
        min-height: 48px;
        font-size: 16px;
    }

    /* Useful on a desktop, a wall of text on a phone. */
    .utt-builder #examples {
        /* The vendored grid sizes its only column to the widest child, and .ex
           is nowrap - one 638px line inside a 375px screen. That turned the
           list into a sideways scroller with every example clipped mid
           sentence. Pin the track to the container so the text has to wrap. */
        grid-template-columns: minmax(0, 1fr);
        max-height: 168px;
        overflow-y: auto;
    }

    .utt-builder .ex {
        min-width: 0;
        white-space: normal;
        text-align: left;
        line-height: 1.45;
    }
}