/*
 * Keyboard focus, visible (UX research 2026-10-18, P1).
 *
 * The theme takes focus away from every element: `* { outline: none !important }`
 * (app.css, and app-dark.css), besides `a:focus { outline: 0 }` and
 * `.btn:focus { box-shadow: none }` -- so someone on the keyboard could not see
 * where they were. `:focus-visible` gives it back to the keyboard only: a mouse
 * click draws nothing, as before. An !important rule is beaten only by another
 * !important one, so these are !important too; their selectors are more specific
 * than `*`, which is what decides between two of them. Do not drop the
 * !important while the theme keeps its own.
 *
 * The ring is the theme's primary (Ledger Blue, Dark Ledger Blue in the dark
 * theme), 2px, 2px off the control (DESIGN.md: blue is for action and focus).
 * Text inputs keep their own focus: the border shifts, no ring (DESIGN.md).
 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: 2px;
}

/* inside a menu the ring stays inside the menu, which clips what overflows */
.dropdown-item:focus-visible {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: -2px;
}

/* the icon rail is Ledger Blue itself: a blue ring would not show on it */
.main-icon-menu :focus-visible {
    outline-color: #fff !important;
}

/* "Skip to content": the first stop of the keyboard, hidden until reached */
.skip-link:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    font-weight: 500;
}

#main-content:focus {
    outline: none;
}