/*
 * Reset, typography and layout primitives.
 * The whole system is Arabic RTL, so spacing uses logical properties only —
 * inline-start / inline-end, never left / right.
 */

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

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

body.xn-body {
	margin: 0;
	/* The drawer sits off-canvas until opened; clipping the inline axis
	   guarantees it can never produce a horizontal scrollbar. */
	overflow-x: hidden;
	min-height: 100vh;
	background: var(--xn-bg);
	color: var(--xn-text);
	font-family: var(--xn-font);
	font-size: var(--xn-text-body);
	font-weight: var(--xn-weight-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--xn-primary-light);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* One visible focus treatment everywhere: keyboard users must never lose
   their place, including on the login screen. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--xn-accent);
	outline-offset: 2px;
	border-radius: var(--xn-radius-sm);
}

.xn-title {
	font-size: var(--xn-text-page);
	font-weight: var(--xn-weight-display);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.xn-lead {
	color: var(--xn-text-muted);
	margin-block-start: var(--xn-space-2);
}

.xn-muted {
	color: var(--xn-text-muted);
}

.xn-small {
	font-size: var(--xn-text-small);
}

.xn-mono {
	font-family: var(--xn-font-mono);
	font-size: 0.85em;
	direction: ltr;
	unicode-bidi: isolate;
}

.xn-stack-top {
	margin-block-start: var(--xn-space-4);
}

/* Visually hidden but available to screen readers. */
.xn-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* The hidden attribute ------------------------------------------------- */

/*
 * A class that sets display beats the browser's own [hidden] rule, because a
 * class selector outranks it. Every component that laid out its box with
 * display therefore stayed on screen after the script hid it — which is why
 * a loading card sat on top of data that had already arrived, and why each
 * such component needed its own [hidden] patch.
 *
 * Stated once, with !important, because this attribute means one thing and no
 * layout rule should be able to argue with it.
 */
[hidden] {
	display: none !important;
}