/* RosRTU Client owns this foundation layer. Shared umbrella styles are not an input. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--rtu-color-background);
    color: var(--rtu-color-text);
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    margin: 0;
    background: var(--rtu-color-background);
    color: var(--rtu-color-text);
    font-family: Inter, "Segoe UI", sans-serif;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
}

:where(p, h1, h2, h3, h4, h5, h6, dd, td, th, label, button, a, strong, span) {
    overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
    font: inherit;
}

:where(main, section, article, form, fieldset, header, footer, nav, div) {
    min-width: 0;
}

:where(h1, h2, h3, p, small, strong, label, code, a, button) {
    overflow-wrap: break-word;
}

:where(.rtu-touch-target, .mud-button-root, .mud-icon-button) {
    min-width: var(--rtu-touch-target-min);
    min-height: var(--rtu-touch-target-min);
}

body .mud-button-root,
body .mud-icon-button {
    min-height: var(--rtu-touch-target-min) !important;
}

:where(button, a, [role="button"], input, select, textarea):focus-visible {
    outline: 3px solid var(--rtu-color-focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    :where(button, a, [role="button"], input, select, textarea):focus-visible {
        outline-color: Highlight;
    }
}

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