/**
 * Server-rendered documentation: the few rules Tailwind used to supply inline.
 *
 * The .docs-* design system already lives in the theme stylesheet — it was
 * written as plain CSS, not utilities, so the template reuses it verbatim. What
 * it does not cover is the handful of sizes React set with utility classes on
 * elements inside those components (icons, truncation), plus the <summary> the
 * template uses where React used a <button>.
 *
 * Kept out of globals.css so the server-side additions stay separable from the
 * stylesheet the React build owns.
 */

/* ── Header offset ──
   .docs-page pads for the fixed header with `var(--site-header-height, 64px)`,
   but the variable is only set once the React header mounts and measures
   itself — so the whole article started 45px too high and jumped down when it
   arrived, which is most of this page's layout shift. The same reserved
   heights .hsx-header-slot uses are supplied as the fallback, so first paint
   is already correct. */
.docs-page { padding-top: var(--site-header-height, 124px); }
@media (min-width: 640px)  { .docs-page { padding-top: var(--site-header-height, 149px); } }
@media (min-width: 1024px) { .docs-page { padding-top: var(--site-header-height, 109px); } }

/* ── Sidebar group header ──
   A <summary> instead of a <button>: it collapses with no JavaScript, which the
   React version could not do. display:flex removes the disclosure triangle in
   most browsers; the two rules below remove it in the rest. */
.docs-sidebar-group-btn { list-style: none; }
.docs-sidebar-group-btn::-webkit-details-marker { display: none; }
.docs-sidebar-group-btn::marker { content: ""; }

.docs-sidebar-group-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.docs-sidebar-group-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.docs-sidebar-group-icon,
.docs-sidebar-group-chev {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.docs-sidebar-group-chev { transition: transform 0.15s ease; }
.docs-sidebar-group[open] > .docs-sidebar-group-btn .docs-sidebar-group-chev { transform: rotate(180deg); }

/* ── Pager ── */
.docs-pager-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Search ──
   The control only works once its script runs, so it stays hidden until then —
   the same rule the tool tabs follow. Everything it searches is already on the
   page as sidebar links. */
.docs-toc-search { display: none; }
.docs-toc-search.is-ready { display: flex; }

.docs-search-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.docs-toc-search-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: hsl(var(--muted-foreground));
	font-size: 0.875rem;
	text-align: left;
}
.docs-toc-search .docs-search-kbd { margin-left: auto; flex-shrink: 0; }

.docs-search-overlay[hidden] { display: none; }
.docs-search-result-hidden { display: none; }

/* ── Mobile layout ──
   The React page carried these as Tailwind utilities on the elements
   themselves: `docs-toc hidden xl:block` and `docs-mobile-bar xl:hidden`.
   Tailwind purges what nothing references, so `xl:block` and `xl:hidden` are
   no longer in the build and the rules have to be written out. Without them
   the right-hand rail stays a fixed-width column on a phone and squeezes the
   article to a few characters per line. 1280px matches the breakpoint the
   sidebar drawer already uses. */
.docs-toc { display: none; }
.docs-mobile-bar { display: flex; }

@media (min-width: 1280px) {
	.docs-toc { display: block; }
	.docs-mobile-bar { display: none; }
	.docs-sidebar-backdrop { display: none !important; }
}

/* The backdrop only exists while the drawer is open. */
.docs-sidebar-backdrop[hidden] { display: none; }

.docs-mobile-bar-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* A long path in inline code has no break opportunity, so on a narrow screen
   it pushes the whole page sideways — /rknix/www/yourdomain.com/htdocs/public
   measured 364px inside a 390px viewport. Block <pre> already scrolls on its
   own axis and is left alone. */
.docs-article-body :not(pre) > code {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ── /docs/ index ──
   The landing view that replaced serving the first article at this URL. Card
   styling follows the sidebar's link rows so the page reads as part of the
   docs, not a separate design. */
.docs-index-group {
	margin-top: 2.5rem;
}

.docs-index-group:first-of-type {
	margin-top: 1.5rem;
}

.docs-index-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 700;
	color: hsl(var(--foreground));
}

.docs-index-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: hsl(var(--primary));
}

.docs-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.docs-index-list { grid-template-columns: 1fr 1fr; }
}

.docs-index-card {
	display: block;
	height: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 0.625rem;
	background: hsl(var(--card));
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.docs-index-card:hover {
	border-color: hsl(var(--primary) / 0.4);
	background: hsl(var(--muted) / 0.3);
}

.docs-index-card-title {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
	font-weight: 600;
	color: hsl(var(--foreground));
}

.docs-index-card-text {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}