/*
 * Focus rings. Bootstrap 3 paints a thick "auto" outline (5px) on links, buttons and check boxes as soon as they are
 * clicked. That is removed here for mouse and touch; text fields keep their own soft glow. Only when someone is
 * navigating with the keyboard does a thin dotted outline show, so tabbing through a page stays possible.
 * Loaded last on every page (mirrored pages, client dashboard, admin) by PageServer::transform() and the admin layouts.
 */
*:focus,
*:active,
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus,
a:focus, a:active,
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
    outline: 0 !important;
    outline-offset: 0 !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 1px dotted #8c7a4c !important;
    outline-offset: 2px !important;
}

a, button, .btn, [role="button"], label, select, input {
    -webkit-tap-highlight-color: transparent;
}