/* Responsive refinements for controls created dynamically by vanilla JavaScript. */

@media (max-width: 40rem) {
    dialog {
        max-width: min(calc(100vw - 1rem), 30rem);
    }

    dialog[open] {
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
    }
}

/* Honor the visitor's motion preference for native smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}