/**
 * RF base styles.
 *
 * Everything is scoped to body.rf, which exists only on pages rendered by an RF
 * template, so none of this can reach legacy pages. :where() keeps element-level
 * rules at zero specificity: any component class overrides them without !important.
 */

/* ---------------------------------------------------------------- Document */
html:has(body.rf) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-gutter: stable;          /* no layout jump when an overlay locks scrolling */
	scroll-padding-top: 6rem;          /* anchors clear the sticky header */
}

html.rf-scroll-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.rf) {
		scroll-behavior: smooth;
	}
}

:where(body.rf),
:where(body.rf) *,
:where(body.rf) *::before,
:where(body.rf) *::after {
	box-sizing: border-box;
}

body.rf {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--type-body-font);
	font-size: var(--type-body-size);
	font-weight: var(--type-body-weight);
	line-height: var(--type-body-leading);
	letter-spacing: var(--type-body-tracking);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.rf ::selection {
	background: var(--color-selection);
	color: var(--color-text);
}

/* ---------------------------------------------------------------- Elements */
:where(body.rf) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
	margin: 0;
}

:where(body.rf) :where(ul, ol)[role="list"] {
	list-style: none;
	padding: 0;
}

:where(body.rf) :where(img, picture, video, canvas, svg) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(body.rf) :where(hr) {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

/* Links: quiet by default; an underline appears on hover and stays in running text (.rf-prose). */
:where(body.rf) :where(a) {
	color: inherit;
	text-decoration-line: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

:where(body.rf) :where(a:hover) {
	text-decoration-line: underline;
}

/* ------------------------------------------------------------------ Buttons */
:where(body.rf) :where(button) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.rf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: 2.75rem;               /* 44px touch target */
	padding: 0 var(--space-m);
	border: 1px solid var(--color-button-bg);
	background: var(--color-button-bg);
	color: var(--color-button-text);
	font-family: var(--type-button-font);
	font-size: var(--type-button-size);
	font-weight: var(--type-button-weight);
	line-height: var(--type-button-leading);
	letter-spacing: var(--type-button-tracking);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.rf-button:hover {
	background: var(--color-background);
	color: var(--color-button-bg);
	text-decoration: none;
}

.rf-button--secondary {
	background: transparent;
	color: var(--color-text);
}

.rf-button--secondary:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

.rf-button--text {
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.rf-button--text:hover {
	background: none;
	color: inherit;
	text-decoration-color: transparent;
}

.rf-button:disabled,
.rf-button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ Form controls */
:where(body.rf) :where(input, select, textarea) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.rf-input,
.rf-select,
.rf-textarea {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: var(--color-bg);
	color: var(--color-text);
	appearance: none;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.rf-input:hover,
.rf-select:hover,
.rf-textarea:hover {
	border-color: var(--color-text-muted);
}

.rf-input:focus-visible,
.rf-select:focus-visible,
.rf-textarea:focus-visible {
	border-color: var(--color-text);
	outline: 1px solid var(--color-text);
	outline-offset: 0;
}

.rf-input[aria-invalid="true"] {
	border-color: var(--color-error);
}

.rf-label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--type-caption-size);
	letter-spacing: var(--type-caption-tracking);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------- Focus */
/* Always visible for keyboard users; never removed without a replacement. */
:where(body.rf) :focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

:where(body.rf) :focus:not(:focus-visible) {
	outline: none;
}

/* Dialogs, and the button focus returns to after a dialog opened by tap/click,
   never draw a ring; keyboard focus keeps it (see modules/dialog.js). */
:where(body.rf) dialog:focus,
:where(body.rf) [data-rf-pointer-focus]:focus {
	outline: none;
}

:where(body.rf) [hidden] {
	display: none !important;
}