/**
 * R2 Site Feedback — Base styles (v2.0.0)
 *
 * Scoped reset + typography + focus + keyframes + a11y utilities, all under
 * .r2fb-v2 so host themes are untouched.
 */

/* === Scoped reset === */
.r2fb-v2,
.r2fb-v2 *,
.r2fb-v2 *::before,
.r2fb-v2 *::after {
	box-sizing: border-box;
}

.r2fb-v2 {
	font-family: var(--r2fb-font-sans);
	font-size: var(--r2fb-fs-md);
	line-height: var(--r2fb-lh-body);
	color: var(--r2fb-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.r2fb-v2 h1,
.r2fb-v2 h2,
.r2fb-v2 h3,
.r2fb-v2 h4,
.r2fb-v2 h5,
.r2fb-v2 h6 {
	font-family: var(--r2fb-font-sans);
	font-weight: var(--r2fb-fw-semi);
	line-height: var(--r2fb-lh-tight);
	letter-spacing: -0.01em;
	margin: 0;
}

.r2fb-v2 h1 { font-size: var(--r2fb-fs-3xl); }
.r2fb-v2 h2 { font-size: var(--r2fb-fs-2xl); }
.r2fb-v2 h3 { font-size: var(--r2fb-fs-xl); }
.r2fb-v2 h4 { font-size: var(--r2fb-fs-lg); }

.r2fb-v2 p {
	margin: 0 0 var(--r2fb-s-3) 0;
	line-height: var(--r2fb-lh-body);
}

.r2fb-v2 a {
	color: var(--r2fb-accent);
	text-decoration: none;
	transition: color var(--r2fb-dur) var(--r2fb-ease);
}

.r2fb-v2 a:hover {
	color: var(--r2fb-accent-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.r2fb-v2 code,
.r2fb-v2 kbd,
.r2fb-v2 pre,
.r2fb-v2 samp {
	font-family: var(--r2fb-font-mono);
	font-size: .92em;
}

.r2fb-v2 code {
	background: var(--r2fb-bg-muted);
	padding: 1px 5px;
	border-radius: var(--r2fb-r-xs);
}

.r2fb-v2 strong { font-weight: var(--r2fb-fw-semi); }
.r2fb-v2 em { font-style: italic; }

/* === Serif display for empty states / quoted text === */
.r2fb-v2 .r2fb-serif-display {
	font-family: var(--r2fb-font-serif);
	font-weight: var(--r2fb-fw-medium);
	letter-spacing: -0.01em;
}

/* === Focus ring — never remove without replacement === */
.r2fb-v2 :focus {
	outline: none;
}

.r2fb-v2 :focus-visible {
	outline: 2px solid var(--r2fb-accent);
	outline-offset: 2px;
	border-radius: var(--r2fb-r-xs);
}

.r2fb-v2 button:focus-visible,
.r2fb-v2 [role="button"]:focus-visible,
.r2fb-v2 a:focus-visible,
.r2fb-v2 input:focus-visible,
.r2fb-v2 textarea:focus-visible,
.r2fb-v2 select:focus-visible {
	outline: 2px solid var(--r2fb-accent);
	outline-offset: 2px;
}

/* === a11y utilities === */
.r2fb-v2 .r2fb-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Skip link — hidden off-screen until focused, then becomes a visible
   button in the top-left. Lives OUTSIDE .r2fb-v2 scope intentionally
   since it's the first focusable element on the page (before the
   portal wrapper is even entered). */
.r2fb-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2147483647;
	padding: 10px 16px;
	background: #1F1D1A;
	color: #FFF;
	font-family: var(--r2fb-font-sans, system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 0;
	transform: translateY(-110%);
	transition: transform 160ms ease;
}

.r2fb-skip-link:focus,
.r2fb-skip-link:focus-visible {
	transform: translateY(0);
	outline: 2px solid #E8624A;
	outline-offset: 2px;
}

/* === Keyframes (used by skeleton, spinner, shake) === */
@keyframes r2fb-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes r2fb-spin {
	to { transform: rotate(360deg); }
}

@keyframes r2fb-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

@keyframes r2fb-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes r2fb-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes r2fb-breath {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.015); }
}

@keyframes r2fb-pop-in {
	0%   { opacity: 0; transform: scale(.96) translateY(8px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes r2fb-slide-up {
	from { transform: translateY(8px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}