/* ============================================================================
 * Walk documentation hub — shared styles for /docs/walk/*
 * Token-only: every value resolves to a primitive in public/tokens.css
 * (loaded via /style.css). No hardcoded colours/spacing where a token exists.
 * ========================================================================= */

.wd-skip {
	position: absolute;
	left: var(--space-2);
	top: var(--space-2);
	transform: translateY(-200%);
	z-index: 100;
	background: var(--bg-1);
	color: var(--ink-bright);
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-md);
	padding: var(--space-2) var(--space-4);
	font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard);
}
.wd-skip:focus { transform: translateY(0); }

.wd-shell {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--space-xl);
	max-width: 78rem;
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.wd-side {
	position: sticky;
	top: calc(var(--header-h) + var(--space-2));
	align-self: start;
	max-height: calc(100vh - var(--header-h) - var(--space-4));
	overflow-y: auto;
	padding-right: var(--space-1);
}
.wd-side h2 {
	font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: var(--space-lg) 0 var(--space-2);
	padding: 0 var(--space-3);
}
.wd-side h2:first-child { margin-top: 0; }
.wd-side nav { display: flex; flex-direction: column; gap: var(--space-3xs); }
.wd-side a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--ink-dim);
	text-decoration: none;
	font: var(--weight-medium) var(--text-md) / 1.2 var(--font-body);
	border: 1px solid transparent;
	transition: background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}
.wd-side a:hover { background: var(--surface-1); color: var(--ink); }
.wd-side a[aria-current='page'] {
	background: var(--surface-2);
	color: var(--ink-bright);
	border-color: var(--stroke);
	font-weight: var(--weight-semibold);
}
.wd-side a:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ── Article ────────────────────────────────────────────────────────────── */
.wd-main { min-width: 0; }
.wd-crumbs {
	font: var(--weight-medium) var(--text-sm) / 1 var(--font-body);
	color: var(--ink-faint);
	margin-bottom: var(--space-3);
}
.wd-crumbs a { color: var(--ink-dim); text-decoration: none; }
.wd-crumbs a:hover { color: var(--ink); text-decoration: underline; }

.wd-main h1 {
	font: var(--weight-bold) var(--text-2xl) / var(--leading-tight) var(--font-display);
	color: var(--ink-bright);
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-3);
}
.wd-lede {
	font: var(--weight-regular) var(--text-lg) / var(--leading-normal) var(--font-body);
	color: var(--ink-dim);
	margin: 0 0 var(--space-xl);
	max-width: 46rem;
}
.wd-main h2 {
	font: var(--weight-semibold) var(--text-xl) / var(--leading-tight) var(--font-display);
	color: var(--ink-bright);
	letter-spacing: -0.01em;
	margin: var(--space-xl) 0 var(--space-3);
	scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.wd-main h3 {
	font: var(--weight-semibold) var(--text-lg) / var(--leading-tight) var(--font-display);
	color: var(--ink-bright);
	margin: var(--space-lg) 0 var(--space-2);
	scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.wd-main p, .wd-main li {
	font: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-body);
	color: var(--ink);
	max-width: 46rem;
}
.wd-main p { margin: 0 0 var(--space-3); }
.wd-main ul, .wd-main ol { margin: 0 0 var(--space-3); padding-left: var(--space-lg); }
.wd-main li { margin: 0 0 var(--space-2); }
.wd-main a { color: var(--ink-bright); text-decoration: underline; text-underline-offset: 2px; }
.wd-main a:hover { color: var(--accent); }
.wd-main strong { color: var(--ink-bright); font-weight: var(--weight-semibold); }
.wd-main :is(p, li) code, .wd-main :is(p, li) kbd {
	font: var(--weight-medium) 0.85em var(--font-mono);
	background: var(--surface-2);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	padding: 0.1em 0.4em;
	color: var(--ink-bright);
}
.wd-main kbd {
	box-shadow: var(--shadow-1);
	white-space: nowrap;
}

/* ── Code blocks + copy button ──────────────────────────────────────────── */
.wd-code {
	position: relative;
	margin: 0 0 var(--space-lg);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-lg);
	background: var(--bg-1);
	overflow: hidden;
}
.wd-code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--stroke);
	background: var(--surface-1);
}
.wd-code-lang {
	font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.wd-copy {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	border: 1px solid var(--stroke);
	background: var(--surface-2);
	color: var(--ink-dim);
	font: var(--weight-medium) var(--text-2xs) / 1 var(--font-body);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}
.wd-copy:hover { background: var(--surface-3); color: var(--ink-bright); }
.wd-copy:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
.wd-copy[data-copied='true'] { color: var(--success); border-color: var(--success); }
.wd-code pre {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	overflow-x: auto;
	font: var(--weight-regular) var(--text-md) / var(--leading-normal) var(--font-mono);
	color: var(--ink);
	tab-size: 2;
}
.wd-code pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
/* minimal token tints — applied by docs.js, no external highlighter */
.wd-code .t-key { color: var(--accent); }
.wd-code .t-str { color: var(--success); }
.wd-code .t-com { color: var(--ink-faint); font-style: italic; }
.wd-code .t-num { color: var(--warn); }

/* ── Callouts ───────────────────────────────────────────────────────────── */
.wd-note, .wd-warn {
	display: flex;
	gap: var(--space-2);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-lg);
	font: var(--weight-regular) var(--text-md) / var(--leading-normal) var(--font-body);
	max-width: 46rem;
}
.wd-note {
	background: var(--accent-soft);
	border: 1px solid var(--stroke-strong);
	color: var(--ink);
}
.wd-warn {
	background: rgba(var(--gold-rgb), 0.08);
	border: 1px solid rgba(var(--gold-rgb), 0.32);
	color: var(--ink);
}
.wd-note strong, .wd-warn strong { color: var(--ink-bright); }
.wd-icon { flex: 0 0 auto; line-height: 1.4; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.wd-table-wrap { overflow-x: auto; margin: 0 0 var(--space-lg); border-radius: var(--radius-lg); border: 1px solid var(--stroke); }
.wd-table { width: 100%; border-collapse: collapse; font: var(--weight-regular) var(--text-md) / var(--leading-normal) var(--font-body); }
.wd-table th, .wd-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--stroke); vertical-align: top; }
.wd-table thead th { background: var(--surface-1); color: var(--ink-bright); font-weight: var(--weight-semibold); font-size: var(--text-sm); position: sticky; top: 0; }
.wd-table tbody tr:last-child td { border-bottom: 0; }
.wd-table tbody tr:hover { background: var(--surface-1); }
.wd-table code { font: var(--weight-medium) 0.9em var(--font-mono); color: var(--ink-bright); white-space: nowrap; }
.wd-table td.wd-default { color: var(--ink-dim); }

/* ── Cards (overview grid) ──────────────────────────────────────────────── */
.wd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-xl); }
.wd-card {
	display: block;
	padding: var(--space-4);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-lg);
	background: var(--surface-glass);
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard);
}
.wd-card:hover { transform: translateY(-2px); border-color: var(--stroke-strong); box-shadow: var(--shadow-2); }
.wd-card:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.wd-card h3 { margin: 0 0 var(--space-1); font: var(--weight-semibold) var(--text-base) var(--font-display); color: var(--ink-bright); }
.wd-card p { margin: 0; font-size: var(--text-md); color: var(--ink-dim); }

/* ── Live demo frame ────────────────────────────────────────────────────── */
.wd-demo {
	margin: 0 0 var(--space-lg);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-1);
}
.wd-demo-head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--stroke);
	font: var(--weight-medium) var(--text-sm) / 1 var(--font-body);
	color: var(--ink-dim);
}
.wd-demo iframe { display: block; width: 100%; border: 0; background: transparent; }
.wd-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; margin-right: var(--space-1); }

/* ── Page footer / edit link ────────────────────────────────────────────── */
.wd-pagefoot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--stroke);
}
.wd-edit {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
	color: var(--ink-dim);
	text-decoration: none;
}
.wd-edit:hover { color: var(--ink-bright); text-decoration: underline; }
.wd-nextprev { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wd-nextprev a {
	display: inline-flex; flex-direction: column; gap: var(--space-3xs);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--ink-bright);
	font: var(--weight-semibold) var(--text-md) / 1.2 var(--font-body);
	transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.wd-nextprev a:hover { border-color: var(--stroke-strong); background: var(--surface-1); }
.wd-nextprev a span { font: var(--weight-regular) var(--text-2xs) var(--font-body); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Mobile sidebar toggle ──────────────────────────────────────────────── */
.wd-side-toggle { display: none; }

@media (max-width: 880px) {
	.wd-shell { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md); }
	.wd-side {
		position: static;
		max-height: none;
		border: 1px solid var(--stroke);
		border-radius: var(--radius-lg);
		background: var(--surface-1);
		padding: var(--space-2);
		margin-bottom: var(--space-2);
	}
	.wd-side[hidden] { display: none; }
	.wd-side-toggle {
		display: inline-flex; align-items: center; gap: var(--space-2);
		appearance: none;
		border: 1px solid var(--stroke);
		background: var(--surface-1);
		color: var(--ink-bright);
		font: var(--weight-semibold) var(--text-md) / 1 var(--font-body);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		cursor: pointer;
		margin-bottom: var(--space-2);
		width: 100%;
		justify-content: space-between;
	}
	.wd-side-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
}

@media (max-width: 420px) {
	.wd-main h1 { font-size: var(--text-xl); }
	.wd-lede { font-size: var(--text-base); }
}