@import url('./mobile-page-overrides.css');

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --navbar-height: 64px;
    --navbar-height-mobile: 56px;
    --visual-viewport-height: 100vh;
    --visual-viewport-top: 0px;
    --keyboard-inset: 0px;
    --touch-target-min: 44px;
    --page-padding-x: 16px;
    --page-padding-x-tablet: 24px;
    --page-padding-x-desktop: 32px;
}

@supports (height: 100dvh) {
    :root {
        --visual-viewport-height: 100dvh;
    }
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body[data-scroll-locked] {
    overflow: hidden;
    overscroll-behavior: none;
}

.scroll-container {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.scroll-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.safe-area-inline {
    padding-inline: max(var(--page-padding-x), var(--safe-area-left))
        max(var(--page-padding-x), var(--safe-area-right));
}

.safe-area-bottom {
    padding-bottom: var(--safe-area-bottom);
}

.viewport-height {
    min-height: var(--visual-viewport-height, 100vh);
}

.responsive-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
}

:where(button, [role="button"], input, select, textarea):focus-visible,
:where(a[href], [tabindex]):focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

@media (max-width: 1179px) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
        font-size: max(16px, 1em);
    }

    :where(img, video, iframe) {
        max-width: 100%;
    }
}

@media (pointer: coarse) {
    :where(button, [role="button"], input, select, textarea) {
        min-height: var(--touch-target-min);
    }

    :where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
        min-width: var(--touch-target-min);
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    :where(button, a, input, select, textarea, dialog, [role="dialog"], [data-animated]) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}