/* Shared mobile width and text-reflow safeguards for every Build.Voto route. */

@media (max-width: 760px) {
    html {
        width: 100%;
        overflow-x: hidden;
        scrollbar-width: none;
    }

    html::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .topbar,
    .topbar-inner,
    .shell {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .topbar-inner,
    .shell {
        padding-inline: 16px;
    }

    .topbar-inner > *,
    .shell > :not(.home-hero),
    .shell :is(.grid, .form-row, .auth-wrap, .create-grid, .manage-grid, .api-doc-layout, .dashboard-summary, .dashboard-create-grid, .project-card-head, .service-row-head, .staff-account-head, .paid-service-head, .catalog-toolbar, .owner-section-heading, .quick-links, .preset-actions, .email-tools) > * {
        min-width: 0;
        max-width: 100%;
    }

    .shell :is(h1, h2, h3, h4, p, li, dt, dd, label, small, .muted, .notice, .error, .result, .project-card, .summary-domain, .domain-preview, .api-result, .email-reader, .owner-option-card, .service-row, .paid-service-card, .staff-account-head) {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .shell :is(.page-title, .section-title, .form-section-title, .owner-section-heading h2, .owner-section-heading h3, .project-card h3, .preset-card h2) {
        text-wrap: balance;
    }

    .shell :is(img, video, canvas, iframe) {
        max-width: 100%;
    }

    .shell :is(input, select, textarea, button) {
        min-width: 0;
        max-width: 100%;
    }

    .shell :is(code, kbd, samp) {
        overflow-wrap: anywhere;
    }

    .shell table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}