/* a11y.css — shared accessibility primitives, loaded on every page.
*
* Kept separate from tailwind.css (which is a generated build artifact —
* see css:build in package.json) so these rules survive a Tailwind rebuild
* and are trivially auditable in one place. Load AFTER tailwind.css so
* focus-visible etc. aren't overridden by a utility class.
*/
/* ── Skip link ──
* Hidden off-screen until keyboard-focused, then jumps above everything.
* Pair with Skip to main content
* as the first element inside , and id="main-content" on the page's
* main landmark. */
.skip-link {
position: absolute;
top: -100px;
left: 8px;
z-index: 10000;
background: #166534;
color: #fff;
padding: 10px 16px;
border-radius: 0 0 8px 8px;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: top 0.15s ease;
}
.skip-link:focus {
top: 0;
outline: 3px solid #bbf7d0;
outline-offset: 2px;
}
/* ── Visible focus ring everywhere ──
* Several pages set `outline: none` on inputs/buttons and replace it with a
* box-shadow only on inputs — interactive elements with no custom focus
* style (nav buttons, icon buttons, links) were left with no visible focus
* indicator at all when tabbed to. :focus-visible only fires for keyboard/
* programmatic focus, not mouse clicks, so this doesn't add a ring around
* every mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
/* ── Screen-reader-only text ──
* For labeling icon-only controls without changing their visual layout.
* Usage: