/*
 * Dalil — standalone documentation shell.
 *
 * Loaded only on guide pages, where the theme's own stylesheet has been
 * dequeued. Everything a page needs is here, including the reset, so nothing
 * depends on what the site happens to be running.
 *
 * Arabic-first: logical properties throughout, so an LTR guide mirrors with no
 * second stylesheet.
 */

/* ------------------------------------------------------------------ tokens */

:root {
	--d-bg: #fff;
	--d-bg-subtle: #fafafa;
	--d-surface: #f6f6f7;
	--d-surface-2: #f0f0f2;
	--d-fg: #16161a;
	--d-fg-muted: #5c5c66;
	--d-fg-subtle: #8a8a93;
	--d-line: #e8e8ea;
	--d-line-strong: #d4d4d9;
	--d-accent: #2f6bff;
	--d-accent-fg: #fff;
	--d-accent-soft: color-mix(in srgb, var(--d-accent) 10%, transparent);
	--d-warn: #d4380d;
	--d-ok: #17803d;

	/*
	 * Thmanyah ships with the plugin (assets/css/fonts.css). The system stack
	 * behind it is a real fallback, not decoration: it renders instantly while
	 * the woff2 loads, and carries the page if a file ever 404s.
	 *
	 * Available cuts — Sans 300/400/500/700/900, Serif Display 400/700/900.
	 * Nothing in this file asks for a weight outside that set, so the browser
	 * never has to fake one.
	 */
	--d-sans: "Thmanyah Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Noto Sans Arabic", Tahoma, Arial, sans-serif;
	--d-display: "Thmanyah Serif Display", "Thmanyah Sans", Georgia, serif;
	--d-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
		Consolas, monospace;

	--d-radius: 8px;
	--d-radius-sm: 5px;
	--d-bar-h: 58px;
	--d-side-w: 288px;
	--d-max: 1400px;

	/*
	 * The WordPress admin bar's height, and 0 when it is absent or scrolls away.
	 * One variable, so the sticky bar and the drawer both offset correctly for a
	 * logged-in visitor without hard-coding 32px in five places. Overridden per
	 * breakpoint below, matching WordPress's own 782px / 600px switches.
	 */
	--d-admin-h: 0px;

	--d-shadow: 0 1px 2px rgb(16 16 20 / 4%), 0 4px 16px rgb(16 16 20 / 6%);
	--d-shadow-lg: 0 8px 40px rgb(16 16 20 / 12%);

	color-scheme: light;
}

.dalil-html[data-theme="dark"],
.dalil-html.is-dark {
	--d-bg: #0c0c0f;
	--d-bg-subtle: #121217;
	--d-surface: #17171d;
	--d-surface-2: #1e1e25;
	--d-fg: #ececef;
	--d-fg-muted: #9d9da7;
	--d-fg-subtle: #70707a;
	--d-line: #23232b;
	--d-line-strong: #33333d;
	--d-accent-fg: #fff;
	--d-warn: #ff6b47;
	--d-ok: #35c46f;

	--d-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
	--d-shadow-lg: 0 8px 40px rgb(0 0 0 / 50%);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.dalil-html:not([data-theme="light"]) {
		--d-bg: #0c0c0f;
		--d-bg-subtle: #121217;
		--d-surface: #17171d;
		--d-surface-2: #1e1e25;
		--d-fg: #ececef;
		--d-fg-muted: #9d9da7;
		--d-fg-subtle: #70707a;
		--d-line: #23232b;
		--d-line-strong: #33333d;
		--d-warn: #ff6b47;
		--d-ok: #35c46f;

		--d-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
		--d-shadow-lg: 0 8px 40px rgb(0 0 0 / 50%);

		color-scheme: dark;
	}
}

/* ------------------------------------------------------------------- reset */

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

.dalil-html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: calc(var(--d-bar-h) + 20px);
}

body.dalil-doc {
	margin: 0;
	font-family: var(--d-sans);
	font-size: 15px;
	line-height: 1.75;
	color: var(--d-fg);
	background: var(--d-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern", "liga";
	text-rendering: optimizeLegibility;
}

.dalil-doc h1,
.dalil-doc h2,
.dalil-doc h3,
.dalil-doc h4,
.dalil-doc h5,
.dalil-doc p,
.dalil-doc ul,
.dalil-doc ol,
.dalil-doc figure,
.dalil-doc dl,
.dalil-doc dd {
	margin: 0;
}

.dalil-doc img,
.dalil-doc svg {
	max-inline-size: 100%;
}

.dalil-doc a {
	color: inherit;
	text-decoration-color: var(--d-line-strong);
	text-underline-offset: 3px;
}

.dalil-doc a:hover {
	text-decoration-color: currentcolor;
}

.dalil-doc :focus-visible {
	outline: 2px solid var(--d-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.dalil-doc code,
.dalil-doc kbd,
.dalil-doc pre {
	font-family: var(--d-mono);
	font-feature-settings: normal;
}

.dalil-skip {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 12px;
	z-index: 200;
	padding: 10px 18px;
	color: var(--d-accent-fg);
	background: var(--d-accent);
	border-radius: var(--d-radius-sm);
	text-decoration: none;
}

.dalil-skip:focus {
	inset-block-start: 12px;
}

/* --------------------------------------------------------------- top bar */

.dalil-bar {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	display: flex;
	gap: 12px;
	align-items: center;
	block-size: var(--d-bar-h);
	padding-inline: 20px;
	/*
	 * Solid first, glass second. A browser without color-mix() support would
	 * otherwise fall back to a transparent bar and let the settings table bleed
	 * straight through it while scrolling. The opaque value is the guarantee;
	 * the translucent one is the flourish where it is supported.
	 */
	background: var(--d-bg);
	background: color-mix(in srgb, var(--d-bg) 90%, transparent);
	border-block-end: 1px solid var(--d-line);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* No backdrop-filter → no glass → keep the bar fully opaque. */
@supports not ( ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) ) {
	.dalil-bar {
		background: var(--d-bg);
	}
}

/* The admin bar is fixed at 32px on desktop; the bar clears it. Below 782px
   WordPress makes it 46px, and below 600px it scrolls with the page, so the
   offset drops to 0 — all handled by the --d-admin-h breakpoints. */
.admin-bar {
	--d-admin-h: 32px;
}

.dalil-bar {
	inset-block-start: var(--d-admin-h);
}

.dalil-bar-brand {
	display: flex;
	align-items: center;
	min-inline-size: 0;
	text-decoration: none;
}

.dalil-bar-brand img,
.dalil-bar-logo {
	display: block;
	block-size: 30px;
	inline-size: auto;
	max-inline-size: 200px;
	object-fit: contain;
}

/* Two logos ship; CSS shows the one for the active theme, so the swap on
   toggle is instant with no second load. */
.dalil-bar-logo--dark {
	display: none;
}

.dalil-html[data-theme="dark"] .dalil-bar-logo--light {
	display: none;
}

.dalil-html[data-theme="dark"] .dalil-bar-logo--dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	.dalil-html:not([data-theme="light"]) .dalil-bar-logo--light {
		display: none;
	}

	.dalil-html:not([data-theme="light"]) .dalil-bar-logo--dark {
		display: block;
	}
}

.dalil-bar-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dalil-bar-divider {
	inline-size: 1px;
	block-size: 20px;
	background: var(--d-line-strong);
}

.dalil-bar-doc {
	font-size: 14px;
	color: var(--d-fg-muted);
	text-decoration: none;
	white-space: nowrap;
}

.dalil-bar-doc:hover {
	color: var(--d-fg);
}

.dalil-bar-search {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	max-inline-size: 400px;
	margin-inline: auto;
}

.dalil-bar-search svg {
	position: absolute;
	inset-inline-start: 11px;
	inline-size: 15px;
	block-size: 15px;
	color: var(--d-fg-subtle);
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	pointer-events: none;
}

.dalil-bar-search input {
	inline-size: 100%;
	padding-block: 7px;
	padding-inline: 34px 34px;
	font: inherit;
	font-size: 13.5px;
	color: var(--d-fg);
	background: var(--d-surface);
	border: 1px solid transparent;
	border-radius: var(--d-radius);
	transition: border-color 0.15s, background 0.15s;
}

.dalil-bar-search input::placeholder {
	color: var(--d-fg-subtle);
}

.dalil-bar-search input:focus {
	background: var(--d-bg);
	border-color: var(--d-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--d-accent-soft);
}

.dalil-bar-search kbd {
	position: absolute;
	inset-inline-end: 9px;
	padding: 1px 6px;
	font-size: 11px;
	color: var(--d-fg-subtle);
	pointer-events: none;
	background: var(--d-bg);
	border: 1px solid var(--d-line-strong);
	border-radius: 4px;
}

.dalil-bar-search input:focus ~ kbd {
	opacity: 0;
}

.dalil-bar-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-inline-start: auto;
}

.dalil-theme-toggle {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	color: var(--d-fg-muted);
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius-sm);
}

.dalil-theme-toggle:hover {
	color: var(--d-fg);
	background: var(--d-surface);
}

.dalil-theme-toggle svg {
	grid-area: 1 / 1;
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.dalil-icon-moon { display: none; }
.dalil-html[data-theme="dark"] .dalil-icon-sun { display: none; }
.dalil-html[data-theme="dark"] .dalil-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
	.dalil-html:not([data-theme="light"]) .dalil-icon-sun { display: none; }
	.dalil-html:not([data-theme="light"]) .dalil-icon-moon { display: block; }
}

.dalil-bar-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0 7px;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius-sm);
}

.dalil-bar-burger span {
	display: block;
	block-size: 1.5px;
	background: var(--d-fg);
	border-radius: 2px;
}

/* ---------------------------------------------------------------- layout */

/*
 * Two columns, not three. The sidebar already nests groups under chapters, so a
 * second "on this page" tree would list the same headings twice — that is
 * clutter wearing the costume of a docs site. The width goes to the settings
 * tables instead, which are the actual content.
 */
.dalil-shell {
	display: grid;
	grid-template-columns: var(--d-side-w) minmax(0, 1fr);
	gap: 0;
	max-inline-size: var(--d-max);
	margin-inline: auto;
}

.dalil-shell--bare {
	display: block;
	max-inline-size: 1120px;
	padding: 56px 24px 96px;
}

/* Sidebar / drawer.
   On desktop this is a sticky column inside the shell grid; the header and the
   close control are hidden, and the search sits in the bar instead. On mobile
   the same element becomes an off-canvas drawer — see the media block below. */

.dalil-side {
	border-inline-end: 1px solid var(--d-line);
}

.dalil-side-inner {
	position: sticky;
	inset-block-start: calc(var(--d-bar-h) + var(--d-admin-h));
	max-block-size: calc(100vh - var(--d-bar-h) - var(--d-admin-h));
	padding: 24px 18px 64px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Drawer-only chrome: invisible where the sidebar is static. */
.dalil-side-top,
.dalil-side-search {
	display: none;
}

.dalil-side-nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-block-end: 14px;
	margin-block-end: 14px;
	border-block-end: 1px solid var(--d-line);
}

.dalil-side-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--d-fg);
	text-decoration: none;
	border-radius: var(--d-radius-sm);
	transition: background 0.12s;
}

.dalil-side-nav-link:hover {
	background: var(--d-surface);
}

.dalil-side-nav-link svg {
	flex: none;
	inline-size: 15px;
	block-size: 15px;
	fill: none;
	stroke: var(--d-fg-subtle);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* RTL: the chevron points the other way. */
.dalil-html[dir="rtl"] .dalil-side-nav-link svg {
	transform: scaleX(-1);
}

.dalil-side-toc-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--d-fg-subtle);
	letter-spacing: 0.02em;
}

.dalil-side-ver {
	font-family: var(--d-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--d-fg-subtle);
}

/* The shell locks page scroll while the drawer is open. */
.dalil-html.dalil-locked,
.dalil-html.dalil-locked body {
	overflow: hidden;
}

.dalil-toc,
.dalil-toc-sub {
	padding: 0;
	margin: 0;
	list-style: none;
}

.dalil-toc-item {
	margin-block-end: 2px;
}

.dalil-toc-link {
	display: block;
	padding: 5px 10px;
	font-size: 13.5px;
	color: var(--d-fg-muted);
	text-decoration: none;
	border-radius: var(--d-radius-sm);
	transition: color 0.12s, background 0.12s;
}

.dalil-toc-link:hover {
	color: var(--d-fg);
	background: var(--d-surface);
}

.dalil-toc-link.is-current {
	font-weight: 500;
	color: var(--d-accent);
	background: var(--d-accent-soft);
}

.dalil-toc-sub {
	position: relative;
	margin-block: 2px 8px;
	padding-inline-start: 10px;
}

.dalil-toc-sub::before {
	content: "";
	position: absolute;
	inset-block: 2px;
	inset-inline-start: 10px;
	inline-size: 1px;
	background: var(--d-line);
}

.dalil-toc-link--sub {
	padding-block: 4px;
	padding-inline-start: 14px;
	font-size: 13px;
	color: var(--d-fg-subtle);
}

/* Content */

.dalil-doc-main {
	min-inline-size: 0;
	padding: 48px 48px 96px;
}

/* --------------------------------------------------------- page masthead */

.dalil-top {
	padding-block-end: 32px;
	margin-block-end: 48px;
	border-block-end: 1px solid var(--d-line);
}

/*
 * Headings carry the Serif Display cut, body and interface stay Sans — the same
 * pairing the product itself uses, so the manual reads in its own voice.
 * Serif needs less negative tracking than a grotesque; -0.025em would collapse
 * it at display sizes.
 */
.dalil-title {
	font-family: var(--d-display);
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dalil-sub {
	max-inline-size: 62ch;
	margin-block-start: 14px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--d-fg-muted);
	text-wrap: pretty;
}

.dalil-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 24px;
}

.dalil-fact {
	padding: 5px 12px;
	font-size: 12px;
	color: var(--d-fg-muted);
	background: var(--d-surface);
	border-radius: 100px;
}

.dalil-fact b {
	color: var(--d-fg);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dalil-updated {
	margin-block-start: 16px;
	font-size: 12.5px;
	color: var(--d-fg-subtle);
}

/* ------------------------------------------------------------- chapters */

.dalil-chapter {
	margin-block-end: 72px;
	scroll-margin-block-start: calc(var(--d-bar-h) + 24px);
}

.dalil-chapter > h2 {
	font-family: var(--d-display);
	font-size: 1.72rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.dalil-group,
.dalil-section {
	scroll-margin-block-start: calc(var(--d-bar-h) + 24px);
}

.dalil-group > h3,
.dalil-section > h3 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	margin-block: 44px 10px;
	font-family: var(--d-display);
	font-size: 1.18rem;
	font-weight: 700;
	letter-spacing: 0;
}

.dalil-count {
	padding: 1px 7px;
	font-family: var(--d-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--d-fg-subtle);
	background: var(--d-surface);
	border-radius: 100px;
}

.dalil-anchor {
	font-weight: 400;
	color: var(--d-fg-subtle);
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.12s;
}

h2:hover > .dalil-anchor,
h3:hover > .dalil-anchor,
.dalil-anchor:focus-visible {
	opacity: 1;
}

.dalil-lede {
	max-inline-size: 70ch;
	margin-block: 8px 18px;
	color: var(--d-fg-muted);
	text-wrap: pretty;
}

.dalil-prose {
	max-inline-size: 72ch;
}

.dalil-prose p {
	margin-block-end: 16px;
	text-wrap: pretty;
}

.dalil-prose ul,
.dalil-prose ol {
	margin-block-end: 18px;
	padding-inline-start: 22px;
}

.dalil-prose li {
	margin-block-end: 6px;
}

.dalil-prose strong {
	font-weight: 700;
}

.dalil-prose a {
	color: var(--d-accent);
	text-decoration-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
}

.dalil-path {
	margin-block-end: 14px;
}

.dalil-path code {
	font-size: 12px;
	color: var(--d-fg-subtle);
}

.dalil-thumb {
	max-inline-size: 460px;
	margin-block-end: 18px;
}

.dalil-thumb img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
}

/* --------------------------------------------------------------- tables */

.dalil-tw {
	margin-block-end: 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: var(--d-bg);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
}

.dalil-table {
	inline-size: 100%;
	min-inline-size: 680px;
	font-size: 13.5px;
	border-collapse: collapse;
}

.dalil-table th {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	padding: 10px 14px;
	font-size: 11.5px;
	/* A column label is a signpost, not a headline: Bold at 11px shouts. */
	font-weight: 500;
	color: var(--d-fg-muted);
	text-align: start;
	white-space: nowrap;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--d-surface);
	border-block-end: 1px solid var(--d-line);
}

.dalil-table td {
	padding: 13px 14px;
	line-height: 1.65;
	vertical-align: top;
	border-block-end: 1px solid var(--d-line);
}

.dalil-table tbody tr:last-child td {
	border-block-end: 0;
}

.dalil-table tbody tr:hover td {
	background: var(--d-bg-subtle);
}

.dalil-c-name { inline-size: 24%; }
.dalil-c-type { inline-size: 12%; }
.dalil-c-def {
	inline-size: 13%;
	font-variant-numeric: tabular-nums;
}

.dalil-c-name strong {
	font-weight: 700;
}

.dalil-key {
	display: inline-block;
	margin-block-start: 5px;
	padding: 1px 6px;
	font-size: 11.5px;
	color: var(--d-fg-muted);
	word-break: break-all;
	background: var(--d-surface);
	border-radius: 4px;
}

.dalil-child {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--d-fg-subtle);
}

.dalil-type {
	font-size: 12px;
	color: var(--d-fg-muted);
}

.dalil-meta {
	display: block;
	margin-block-start: 4px;
	font-family: var(--d-mono);
	font-size: 11px;
	color: var(--d-fg-subtle);
}

.dalil-dash {
	color: var(--d-fg-subtle);
}

.dalil-c-def code {
	padding: 1px 6px;
	font-size: 11.5px;
	background: var(--d-surface);
	border-radius: 4px;
}

.dalil-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-block-start: 9px;
}

.dalil-opt {
	padding: 2px 8px;
	font-size: 11.5px;
	color: var(--d-fg-muted);
	background: var(--d-surface);
	border-radius: 4px;
}

.dalil-opt code {
	font-size: 11px;
	font-weight: 500;
	color: var(--d-fg);
}

/* ------------------------------------------------------ notes, code, faq */

.dalil-note {
	position: relative;
	max-inline-size: 72ch;
	padding: 14px 18px;
	margin-block-end: 22px;
	background: var(--d-surface);
	border-radius: var(--d-radius);
	border-inline-start: 3px solid var(--d-accent);
}

.dalil-note--warn {
	border-inline-start-color: var(--d-warn);
	background: color-mix(in srgb, var(--d-warn) 7%, var(--d-surface));
}

.dalil-note p {
	margin-block-end: 10px;
}

.dalil-note p:last-child {
	margin-block-end: 0;
}

.dalil-note-label {
	display: block;
	margin-block-end: 5px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--d-fg-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dalil-note--warn .dalil-note-label {
	color: var(--d-warn);
}

.dalil-code {
	max-inline-size: 72ch;
	padding: 16px 18px;
	margin-block-end: 22px;
	overflow-x: auto;
	font-size: 12.8px;
	line-height: 1.7;
	background: var(--d-surface);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
}

.dalil-faq {
	max-inline-size: 72ch;
	border-block-start: 1px solid var(--d-line);
}

.dalil-faq-item {
	border-block-end: 1px solid var(--d-line);
}

.dalil-faq-item summary {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-block: 15px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.dalil-faq-item summary::-webkit-details-marker {
	display: none;
}

.dalil-faq-item summary::after {
	content: "+";
	margin-inline-start: auto;
	font-size: 17px;
	font-weight: 400;
	color: var(--d-fg-subtle);
}

.dalil-faq-item[open] summary::after {
	content: "−";
}

.dalil-faq-item .dalil-prose {
	padding-block-end: 16px;
	color: var(--d-fg-muted);
}

.dalil-steps {
	max-inline-size: 72ch;
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: dalil-step;
}

.dalil-steps li {
	position: relative;
	padding-block-end: 24px;
	padding-inline-start: 40px;
	counter-increment: dalil-step;
}

.dalil-steps li::before {
	content: counter(dalil-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1px;
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	font-family: var(--d-mono);
	font-size: 12px;
	color: var(--d-accent);
	background: var(--d-accent-soft);
	border-radius: 50%;
}

.dalil-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 13px;
	inset-block: 32px 6px;
	inline-size: 1px;
	background: var(--d-line);
}

.dalil-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.dalil-gallery img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
}

.dalil-gallery figcaption {
	margin-block-start: 8px;
	font-size: 12.5px;
	color: var(--d-fg-subtle);
}

/* ---------------------------------------------------------------- search */

.dalil-hidden {
	display: none !important;
}

.dalil-search-count {
	margin-block-end: 20px;
	font-size: 13px;
	color: var(--d-fg-subtle);
}

/* --------------------------------------------------------------- archive */

.dalil-archive-head {
	padding-block-end: 36px;
	margin-block-end: 40px;
	border-block-end: 1px solid var(--d-line);
}

.dalil-archive-head h1 {
	font-family: var(--d-display);
	font-size: clamp(2.1rem, 4.2vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dalil-archive-head p {
	margin-block-start: 12px;
	font-size: 1.05rem;
	color: var(--d-fg-muted);
}

.dalil-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.dalil-card {
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var(--d-bg);
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dalil-card:hover {
	border-color: var(--d-line-strong);
	box-shadow: var(--d-shadow);
	transform: translateY(-2px);
}

.dalil-card-thumb img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.dalil-card-body {
	display: block;
	padding: 20px 22px;
}

.dalil-card-title {
	display: block;
	font-family: var(--d-display);
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0;
}

.dalil-card-ver {
	display: inline-block;
	margin-block-start: 4px;
	font-family: var(--d-mono);
	font-size: 11.5px;
	color: var(--d-fg-subtle);
}

.dalil-card-lede {
	display: block;
	margin-block-start: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--d-fg-muted);
}

.dalil-card-go {
	display: block;
	margin-block-start: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--d-accent);
}

/* --------------------------------------------------------- buttons, foot */

.dalil-btn {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 9px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--d-accent-fg);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: var(--d-accent);
	border: 1px solid transparent;
	border-radius: var(--d-radius-sm);
}

.dalil-btn--ghost {
	color: var(--d-fg-muted);
	background: transparent;
	border-color: var(--d-line);
}

.dalil-btn--ghost:hover {
	color: var(--d-fg);
	background: var(--d-surface);
}

.dalil-btn--sm {
	padding: 6px 13px;
	font-size: 13px;
}

.dalil-doc-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 28px;
	margin-block-start: 72px;
	font-size: 13px;
	color: var(--d-fg-subtle);
	border-block-start: 1px solid var(--d-line);
}

.dalil-doc-foot-links {
	display: flex;
	gap: 18px;
}

.dalil-doc-foot a {
	color: var(--d-fg-muted);
	text-decoration: none;
}

.dalil-doc-foot a:hover {
	color: var(--d-fg);
}

.dalil-empty {
	padding: 80px 0;
	color: var(--d-fg-subtle);
	text-align: center;
}

.dalil-doc .pagination,
.dalil-doc .nav-links {
	display: flex;
	gap: 6px;
	margin-block-start: 32px;
}

.dalil-doc .page-numbers {
	padding: 6px 12px;
	font-size: 13.5px;
	color: var(--d-fg-muted);
	text-decoration: none;
	border: 1px solid var(--d-line);
	border-radius: var(--d-radius-sm);
}

.dalil-doc .page-numbers.current {
	color: var(--d-accent-fg);
	background: var(--d-accent);
	border-color: var(--d-accent);
}

/* --------------------------------------------------------------- adaptive */

.dalil-scrim {
	position: fixed;
	inset: 0;
	z-index: 65;
	/* Kept in the box tree even when "hidden" so opacity can animate both ways;
	   visibility removes it from pointer + tab order while closed. */
	display: block;
	visibility: hidden;
	background: rgb(0 0 0 / 45%);
	opacity: 0;
	transition: opacity 0.26s ease, visibility 0.26s ease;
}

.dalil-scrim:not([hidden]) {
	visibility: visible;
	opacity: 1;
}

@media (max-width: 1280px) {
	.dalil-doc-main {
		padding-inline: 40px;
	}
}

@media (max-width: 900px) {
	.dalil-bar {
		gap: 8px;
		padding-inline: 12px;
	}

	.dalil-bar-burger {
		display: flex;
	}

	/* On mobile the bar is just: burger · brand · toggle. Everything else — the
	   docs link, the in-bar search, the support/back button — moves into the
	   drawer, so nothing is crammed into a phone-width row. */
	.dalil-bar-divider,
	.dalil-bar-doc,
	.dalil-bar-search,
	.dalil-bar-hide-sm {
		display: none;
	}

	.dalil-bar-brand {
		flex: 1;
		min-inline-size: 0;
	}

	.dalil-bar-brand .dalil-bar-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dalil-shell {
		display: block;
	}

	.dalil-doc-main,
	.dalil-shell--bare {
		padding: 28px 18px 72px;
	}

	.dalil-table {
		min-inline-size: 520px;
	}

	/* -------------------------------------------------------------- drawer */

	.dalil-side {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 70;
		inline-size: min(330px, 88vw);
		border-inline-end: 1px solid var(--d-line);
		border-inline-start: 0;
		background: var(--d-bg);
		box-shadow: var(--d-shadow-lg);
		transform: translateX(var(--d-drawer-out, -102%));
		transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
		visibility: hidden;
	}

	.dalil-html[dir="rtl"] .dalil-side {
		inset-inline-start: auto;
		inset-inline-end: 0;
		--d-drawer-out: 102%;
	}

	.dalil-side.is-open {
		visibility: visible;
		transform: translateX(0);
	}

	/* Full-height flex column: fixed header, scrolling body. */
	.dalil-side-inner {
		position: static;
		display: flex;
		flex-direction: column;
		max-block-size: none;
		block-size: 100%;
		padding: 0;
		overflow: hidden;
	}

	.dalil-side-top {
		display: flex;
		flex: none;
		gap: 8px;
		align-items: center;
		justify-content: space-between;
		block-size: var(--d-bar-h);
		padding-inline: 16px;
		border-block-end: 1px solid var(--d-line);
	}

	.dalil-side-brand {
		display: flex;
		align-items: center;
		min-inline-size: 0;
		text-decoration: none;
	}

	.dalil-side-brand .dalil-bar-name {
		overflow: hidden;
		font-size: 15px;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dalil-side-brand img,
	.dalil-side-brand .dalil-bar-logo {
		block-size: 28px;
		inline-size: auto;
		max-inline-size: 160px;
		object-fit: contain;
	}

	.dalil-side-close {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		inline-size: 40px;
		block-size: 40px;
		color: var(--d-fg-muted);
		cursor: pointer;
		background: none;
		border: 0;
		border-radius: var(--d-radius-sm);
	}

	.dalil-side-close:hover {
		color: var(--d-fg);
		background: var(--d-surface);
	}

	.dalil-side-close svg {
		inline-size: 20px;
		block-size: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
	}

	/* Search moves into the drawer on mobile. */
	.dalil-side-search {
		position: relative;
		display: flex;
		flex: none;
		align-items: center;
		margin: 14px 16px 4px;
	}

	.dalil-side-search svg {
		position: absolute;
		inset-inline-start: 12px;
		inline-size: 17px;
		block-size: 17px;
		fill: none;
		stroke: var(--d-fg-subtle);
		stroke-width: 1.6;
		stroke-linecap: round;
		pointer-events: none;
	}

	.dalil-side-search input {
		inline-size: 100%;
		padding: 10px 12px;
		padding-inline-start: 38px;
		font: inherit;
		font-size: 15px;
		color: var(--d-fg);
		background: var(--d-surface);
		border: 1px solid var(--d-line);
		border-radius: var(--d-radius-sm);
	}

	.dalil-side-search input:focus-visible {
		outline: 2px solid var(--d-accent);
		outline-offset: 1px;
	}

	/* The nav + TOC scroll; the header stays put. */
	.dalil-side-nav,
	.dalil-side-toc {
		flex: none;
		padding-inline: 12px;
	}

	.dalil-side-toc {
		flex: 1;
		padding-block: 4px 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.dalil-side-nav {
		padding-block: 12px;
		margin-block-end: 0;
	}

	.dalil-side-nav-link,
	.dalil-toc-link {
		/* Comfortable touch targets. */
		padding-block: 10px;
		font-size: 14.5px;
	}
}

@media (max-width: 600px) {
	.dalil-title {
		font-size: 1.9rem;
	}

	.dalil-side {
		inline-size: min(340px, 92vw);
	}
}

/* Match WordPress's own admin-bar breakpoints so the offset is always right. */
@media screen and (max-width: 782px) {
	.admin-bar {
		--d-admin-h: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar {
		--d-admin-h: 0px;
	}
}

/* Respect the system preference over our own flourishes. */
@media (prefers-reduced-motion: reduce) {
	.dalil-html {
		scroll-behavior: auto;
	}

	.dalil-card,
	.dalil-side,
	.dalil-anchor,
	.dalil-toc-link {
		transition: none;
	}

	.dalil-card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------- component bridge */

/*
 * The ticket form, follow-up page and roadmap are styled in frontend.css with
 * its own --dalil-* tokens. Inside the shell that sheet still loads, but these
 * overrides repoint every one of its tokens at the docs system, so the same
 * components wear the same skin — light, dark, and the owner's accent — without
 * duplicating a single component rule.
 */
.dalil-doc .dalil-form-wrap,
.dalil-doc .dalil-tickets-wrap,
.dalil-doc .dalil-roadmap,
.dalil-doc .dalil-cards,
.dalil-doc .dalil-panel,
.dalil-doc .dalil-ticket,
.dalil-doc .dalil-notice {
	--dalil-paper: var(--d-bg);
	--dalil-ink: var(--d-fg);
	--dalil-muted: var(--d-fg-muted);
	--dalil-surface: var(--d-surface);
	--dalil-hairline: var(--d-line);
	--dalil-accent: var(--d-accent);
	--dalil-alert: var(--d-warn);
	--dalil-radius: var(--d-radius-sm);
}

/* The primary calls to action take the brand colour, matching the docs buttons
   rather than the near-black default of the standalone form sheet. */
.dalil-doc .dalil-btn--primary,
.dalil-doc .dalil-type-opt input:checked + span {
	background: var(--d-accent);
	border-color: var(--d-accent);
	color: var(--d-accent-fg);
}

.dalil-doc .dalil-form-wrap,
.dalil-doc .dalil-tickets-wrap,
.dalil-doc .dalil-roadmap {
	font-family: var(--d-sans);
}

/* A reference manual gets printed. Make that not look like an accident. */
@media print {
	.dalil-bar,
	.dalil-side,
	.dalil-skip,
	.dalil-scrim,
	.dalil-doc-foot-links {
		display: none !important;
	}

	.dalil-shell {
		display: block;
	}

	.dalil-doc-main {
		padding: 0;
	}

	.dalil-chapter {
		break-inside: avoid-page;
		margin-block-end: 32px;
	}

	.dalil-tw {
		overflow: visible;
		break-inside: auto;
	}

	.dalil-faq-item .dalil-prose {
		display: block !important;
	}

	body.dalil-doc {
		font-size: 11pt;
		color: #000;
		background: #fff;
	}
}