@layer layout {
	.tf-container {
		inline-size: 100%;
		max-inline-size: var(--tf-container-max);
		margin-inline: auto;
		padding-inline: var(--tf-container-gutter);
	}

	.tf-main {
		display: block;
	}

	.tf-visually-hidden:not(:focus):not(:active) {
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	/* Skip-to-content link (Accessibility Audit Phase 17, fix M2). It
	 * already worked before this — the base rule above reveals it on
	 * focus, and the sitewide `a:focus-visible` rule (elements.css)
	 * already gives it the standard --tf-focus-ring, since it's a plain
	 * <a>. What it lacked was a deliberate look: it just became bare
	 * text at the top of the page, the only interactive element on the
	 * site without some visual chrome around it. This only ever adds
	 * that chrome on focus, so it changes nothing for a mouse-only or
	 * screen-reader visit — a sighted mouse user never sees this state.
	 * inset-inline-start (not left) keeps it pinned to the reading-start
	 * corner in both languages automatically. */
	.tf-skip-link:focus {
		position: fixed;
		inset-block-start: var(--tf-space-s);
		inset-inline-start: var(--tf-space-s);
		z-index: 1000;
		padding: var(--tf-space-2xs) var(--tf-space-s);
		background-color: var(--tf-surface);
		color: var(--tf-text);
		border-radius: var(--tf-radius-m);
		font-weight: 600;
		text-decoration: none;
	}

	/* Directional icons mirror in RTL; brand marks never do. */
	[dir="rtl"] .tf-icon--directional {
		transform: scaleX(-1);
	}
}