/*
 * Base: reset, typography, layout stage, theme-transition.
 */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The [hidden] attribute must always win, even over components (buttons,
 * flex/grid rows) that set their own `display`. Without `!important` here,
 * any `.sbp-btn { display: inline-flex }`-style rule silently un-hides
 * elements toggled via JS (`el.hidden = true` / removeAttribute('hidden')).
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	background-image: var(--bg-grad);
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Animated token swap on theme change (calmed under reduced motion). */
body,
.sbp-card, .sbp-btn, .sbp-input, .sbp-surface {
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a {
	color: var(--accent-text);
	text-decoration: none;
}
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Layout stage */
.sbp-stage {
	width: 100%;
	padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
	padding-top: calc(clamp(1.5rem, 5vw, 4rem) + var(--safe-top));
}

.sbp-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
}

.sbp-wrap--narrow { max-width: var(--wrap-narrow); }

/* Micro label */
.sbp-label {
	font-size: var(--fs-cap);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 500;
}

/* Accessibility helpers */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.sbp-skip-link {
	position: absolute;
	left: 50%; top: 0.5rem;
	transform: translateX(-50%) translateY(-150%);
	background: var(--surface-raised);
	color: var(--text);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	z-index: 200;
	transition: transform var(--dur) var(--ease);
}
.sbp-skip-link:focus { transform: translateX(-50%) translateY(0); }