/*
 * Fleet Trust accessibility styles (SPEC.md section 8).
 *
 * 1. Focus guardrail (accessibility.focus_outline): a clear 3px focus ring for keyboard users, with a 5px white
 *    halo under it (box-shadow), so it shows on dark backgrounds too (#0b57d0 alone on navy is under 3:1). The
 *    element list sits in :where(), so only :focus-visible counts (0,1,0): a theme's own, more specific focus
 *    styles (a:focus-visible, .button:focus, ...) win; when a theme sets only its outline, the halo still separates
 *    it from the background. Colour: --ft-focus (default #0b57d0).
 * 2. Skip link (accessibility.skip_link), inserted after <body> only when the theme has none. Everything from the
 *    "ft:skip-link" marker on is also printed inline when the guardrail is off; keep that marker.
 */

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--ft-focus, #0b57d0);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* ft:skip-link */
.ft-skip-link {
	position: absolute !important;
	top: 8px;
	left: 8px;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ft-skip-link:focus {
	position: fixed !important;
	z-index: calc(var(--ft-z, 2147483000) + 1);
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	border: 2px solid var(--ft-bg, #fff);
	border-radius: 4px;
	background: var(--ft-fg, #1f2328);
	color: var(--ft-bg, #fff);
	box-shadow: var(--ft-shadow, 0 8px 30px rgb(0 0 0 / 0.18));
	font-family: inherit;
	font-size: max(16px, 1rem);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	outline: 3px solid var(--ft-focus, #0b57d0);
	outline-offset: 2px;
}