html,
body {
    max-width: 100%;
    overflow-wrap: break-word;
}

main,
section,
article,
form,
.main-content,
.admin-content,
.hub-shell {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid color-mix(in srgb, #f97316 72%, white);
    outline-offset: 3px;
}

dialog,
[role="dialog"],
.version-form,
.req-form-modal {
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    max-width: calc(100vw - max(24px, env(safe-area-inset-left)) - max(24px, env(safe-area-inset-right)));
    overscroll-behavior: contain;
}

dialog,
.version-form,
.req-form-modal {
    overflow-y: auto;
}

.ops-table-wrap,
.requirements-table-wrap,
.task-board-body,
.board-body,
.version-board-viewport {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    :where(button, input:not([type="hidden"]), select, textarea, summary, [role="button"], .button, .btn-primary, .btn-secondary) {
        min-height: 44px;
    }

    :where(input, select, textarea) {
        font-size: 16px;
    }

    :where(dialog, [role="dialog"], .version-form, .req-form-modal) {
        width: calc(100vw - 24px);
        margin: max(12px, env(safe-area-inset-top)) auto max(12px, env(safe-area-inset-bottom));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    :where(.form-actions, .hub-inline-actions, .ops-actions, .comment-actions) {
        align-items: stretch;
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    :where(.form-actions, .hub-inline-actions, .ops-actions, .comment-actions) > :where(button, a, form) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 140px;
        min-width: min(100%, 140px);
    }

    :where(.form-actions, .hub-inline-actions, .ops-actions, .comment-actions) > form > :where(button, a) {
        width: 100%;
    }

    .app-flash-container {
        inset: max(12px, env(safe-area-inset-top)) 12px auto;
        width: auto;
    }

    [data-mobile-create-header] {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.75rem;
    }

    [data-mobile-create-header] > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    [data-mobile-create-header] > :where(.project-actions, .context-actions, .lab-header-actions, .board-actions) {
        display: flex !important;
        flex: 0 1 auto !important;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
        width: auto !important;
        max-width: calc(100% - 56px);
        margin-left: auto;
    }

    [data-mobile-create-header] > :where(.project-actions, .context-actions, .lab-header-actions, .board-actions) > :where(a, button) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    [data-mobile-create-action] {
        display: inline-grid !important;
        place-items: center;
        order: 99;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #ff8c00 !important;
        border-radius: 10px !important;
        background: #ff8c00 !important;
        color: #fff !important;
        box-shadow: 0 5px 12px rgb(255 140 0 / 18%);
        font-size: 0 !important;
        line-height: 1 !important;
    }

    [data-mobile-create-action]:hover:not(:disabled) {
        border-color: #e97800 !important;
        background: #e97800 !important;
    }

    [data-mobile-create-action]::before {
        content: "+";
        font-size: 1.55rem;
        font-weight: 500;
        line-height: 1;
    }

    [data-mobile-create-action] > svg,
    [data-mobile-create-action] > span {
        display: none !important;
    }
}

@media (max-width: 430px) {
    :where(.form-actions, .hub-inline-actions, .ops-actions, .comment-actions) > :where(button, a, form) {
        flex-basis: 100%;
        width: 100%;
    }
}

@media (hover: none), (pointer: coarse) {
    :where(.overview-entity-card, .task, .version-node) :where(button, .overview-action-btn, .task-action-edit, .task-action-delete) {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    dialog,
    [role="dialog"],
    .version-form,
    .req-form-modal {
        max-height: calc(100dvh - 16px);
        margin-block: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}