/* Shared touch and viewport rules for every public and administrative page. */
:where(a[href]) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    min-width: 48px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
:where(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 48px;
    max-width: 100%;
}
:where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    min-width: 48px;
}
:where(input[type="checkbox"] + label, input[type="radio"] + label) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    min-width: 48px;
}
:where(button, a[href], input, select, textarea):focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}
@media (max-width: 480px) {
    :where(.modal-overlay) { padding: 12px; }
    :where(.modal-content, .modal-box) { max-width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; }
}