/* ==========================================================================
   Base: reset, document, typography scale, focus, prose
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--xn-header-h) + var(--xn-space-4));
	background: var(--xn-bg);
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--xn-bg);
	color: var(--xn-text);
	font-family: var(--xn-font);
	font-size: var(--xn-fs-body);
	font-weight: var(--xn-fw-regular);
	line-height: var(--xn-lh-body);
	letter-spacing: var(--xn-ls-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;
	overflow-x: clip;
}
/* Reserve room so the floating bar never covers the end of the page. */
body:has(.xn-bar) { padding-bottom: var(--xn-bar-space); }
/* With a footer, the space lives inside it so no light strip shows below. */
body:has(.xn-bar):has(.xn-footer) { padding-bottom: 0; }
body:has(.xn-bar) .xn-footer { padding-bottom: var(--xn-bar-space); }

img, svg, video, picture, canvas { display: block; max-width: 100%; height: auto; }
img { border-radius: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--xn-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--xn-dur-1) var(--xn-ease); }
a:hover { color: var(--xn-secondary); }
[hidden] { display: none !important; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; height: 1px; background: var(--xn-border); margin-block: var(--xn-space-8); }

/* ---- Type scale -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--xn-text);
	font-weight: var(--xn-fw-heading);
	line-height: var(--xn-lh-heading);
	letter-spacing: var(--xn-ls-heading);
	text-wrap: balance;
}
.xn-display { font-size: var(--xn-fs-display); font-weight: var(--xn-fw-display); line-height: var(--xn-lh-display); letter-spacing: var(--xn-ls-display); margin: 0 0 0.3em; text-wrap: balance; }
h1, .xn-h1 { font-size: var(--xn-fs-h1); font-weight: var(--xn-fw-bold); line-height: var(--xn-lh-display); letter-spacing: var(--xn-ls-display); }
.xn-h1, .xn-h2, .xn-h3, .xn-h4 { font-weight: var(--xn-fw-heading); line-height: var(--xn-lh-heading); letter-spacing: var(--xn-ls-heading); text-wrap: balance; }
h2, .xn-h2 { font-size: var(--xn-fs-h2); }
h3, .xn-h3 { font-size: var(--xn-fs-h3); }
h4, .xn-h4 { font-size: var(--xn-fs-h4); }
p { margin: 0 0 1em; text-wrap: pretty; }
.xn-body-lg { font-size: var(--xn-fs-body-lg); line-height: var(--xn-lh-body); }
.xn-body-sm { font-size: var(--xn-fs-body-sm); }
.xn-caption { font-size: var(--xn-fs-caption); color: var(--xn-text-subtle); line-height: var(--xn-lh-tight); }
.xn-label { font-size: var(--xn-fs-label); font-weight: var(--xn-fw-medium); letter-spacing: var(--xn-ls-label); }
.xn-lead { font-size: var(--xn-fs-body-lg); color: var(--xn-text-muted); max-width: 60ch; }
.xn-meta { display: flex; align-items: center; gap: var(--xn-space-2); color: var(--xn-text-muted); font-size: var(--xn-fs-body-sm); }
.xn-num { font-family: var(--xn-font-numeric); font-variant-numeric: tabular-nums; }

/* Latin runs inside Arabic (numbers, plates, e-mail) */
[dir="ltr"], .xn-ltr { unicode-bidi: isolate; }

/* ---- Focus: always visible for keyboard users ------------------------ */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--xn-focus-ring);
	outline-offset: 3px;
	border-radius: var(--xn-radius-sm);
}
::selection { background: var(--xn-secondary); color: var(--xn-on-secondary); }

.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;
}

.xn-skip-link {
	position: fixed;
	inset-inline-start: var(--xn-space-4);
	top: -100px;
	z-index: calc(var(--xn-z-toast) + 1);
	padding: var(--xn-space-3) var(--xn-space-4);
	border-radius: var(--xn-radius-md);
	background: var(--xn-primary);
	color: var(--xn-on-primary);
	text-decoration: none;
}
.xn-skip-link:focus { top: var(--xn-space-3); color: var(--xn-on-primary); }

/* ---- Icons -------------------------------------------------------------- */
.xn-icon { flex: none; width: 1.25em; height: 1.25em; }
.xn-icon[width] { width: auto; height: auto; }
[dir="rtl"] .xn-icon--dir { transform: scaleX(-1); }

/* ---- Prose (editor content) --------------------------------------------- */
.xn-prose { max-width: 72ch; }
.xn-prose > * + * { margin-top: 1em; }
.xn-prose h2 { margin-top: 1.8em; }
.xn-prose h3 { margin-top: 1.5em; }
.xn-prose ul, .xn-prose ol { padding-inline-start: 1.25em; }
.xn-prose li + li { margin-top: 0.35em; }
.xn-prose img, .xn-prose figure { border-radius: var(--xn-radius-lg); }
.xn-prose blockquote {
	margin-inline: 0;
	padding-inline-start: var(--xn-space-5);
	border-inline-start: 2px solid var(--xn-accent);
	color: var(--xn-text-muted);
}
.xn-prose table { font-size: var(--xn-fs-body-sm); }
.xn-prose th, .xn-prose td { padding: var(--xn-space-3); border-bottom: 1px solid var(--xn-border); text-align: start; }
.xn-prose--legal { font-size: 0.9375rem; }

.xn-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--xn-space-3); }
.xn-checklist li { position: relative; padding-inline-start: 1.75em; }
.xn-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1em;
	top: 0.62em;
	width: 0.55em; height: 0.55em;
	border-radius: 2px;
	background: var(--xn-accent);
	transform: rotate(45deg);
}