/* Skip link: first focusable element of every page, visible only on keyboard focus (WCAG 2.4.1). */
.cr-skip-link {
    position: absolute;
    left: 0.5rem;
    top: -100px;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: #18181b;
    border: 2px solid #18181b;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: underline;
}

.cr-skip-link:focus {
    top: 0.5rem;
}

/* One visible focus ring for keyboard users everywhere (WCAG 2.4.7). It wins over component rules that remove
   the outline (`outline: none` on selects, remove buttons, language pickers). :focus-visible matches keyboard
   focus only, so mouse users see no change. Text fields are left out: browsers show :focus-visible on them for
   mouse clicks too, and they carry their own focus border. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #18181b !important;
    outline-offset: 2px !important;
}

/* Bootstrap's muted grey (#6c757d) drops below 4.5:1 on the light grey surfaces used here (WCAG 1.4.3). */
.text-muted {
    color: #5f6b75 !important;
}

.form-text {
    color: #5f6b75;
}

/* The skip link's target receives focus programmatically; it is not a control. */
main:focus {
    outline: none;
}

/* Bootstrap's code pink (#d63384) is 4.16:1 on the wallet's grey page background (WCAG 1.4.3). In the accessibility
   statement and report, code names are part of the running text. */
.cr-accessibility-document code {
    color: inherit;
}