/*
 * Loom Blank — base accessibility stylesheet (#47).
 *
 * Intentionally tiny and design-neutral: it provides ONLY the keyboard-accessibility
 * affordances the render shim's markup needs (the skip-to-content link + a visible
 * keyboard-focus ring). All actual design still lives in the plugin's compiled,
 * token-driven stylesheets; this file references the Loom accent token (with a sensible
 * fallback) so the focus ring matches the brand when tokens.css is present.
 */

/* Skip-to-content link: off-screen until it receives keyboard focus, then it slides
   into the top-left as the first actionable element on the page. */
.lm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.5rem 1rem;
	background: var(--lm-color-surface, #f8fafc);
	color: var(--lm-color-text, #1e293b);
	text-decoration: none;
	border-radius: var(--lm-radius-md, 8px);
}

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

/* The <main> landmark is focusable (tabindex="-1") so the skip link can move focus into
   it; it must not show a focus ring of its own when targeted programmatically. */
#lm-main:focus {
	outline: none;
}

/* Visible keyboard focus — token-driven so it matches the brand accent. Applies only to
   :focus-visible (keyboard/AT), so mouse clicks don't draw a ring. Covers links, buttons,
   form controls, and the pagination controls a loop emits. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.lm-pagination a:focus-visible,
.lm-pagination button:focus-visible {
	outline: 2px solid var(--lm-color-accent, #2563eb);
	outline-offset: 2px;
	border-radius: var(--lm-radius-sm, 4px);
}