/**
 * @fileoverview
 * Documentation-specific styles for GearTrain.
 * Three-column layout with section-specific navigation.
 */

.docs-layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
	min-height: calc(100vh - var(--header-height));
	& .docs-layout__sidebar {
		position: sticky;
		top: var(--header-height);
		height: calc(100vh - var(--header-height));
		overflow-y: auto;
		border-inline-end: var(--border-width) solid var(--color-border);
		background-color: var(--color-surface);
	}

	& .docs-layout__main {
		padding: var(--space-2) var(--container-padding);
		overflow-y: auto;
	}

	& .docs-layout__toc {
		position: sticky;
		top: var(--header-height);
		height: calc(100vh - var(--header-height));
		overflow-y: auto;
		padding: var(--space-4);
		background-color: var(--color-bg);
	}
}

/* Single-column page: header only, no sidebar or table of contents. */
.docs-plain {
	max-width: 800px;
	margin-inline: auto;
	padding: var(--space-8) var(--container-padding);
}

.docs-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: stretch;
	gap: var(--space-4);
	height: 48px;
	padding-inline: var(--container-padding);
	background-color: var(--color-header);
	z-index: 50;
	border-block-end: var(--border-width-thick) solid var(--color-header-border);

	& .docs-header__logo-link {
		display: flex;
		align-items: center;
	}

	& .docs-header__logo {
		display: block;
		height: 20px;
		width: auto;
	}

	& .docs-header__sections {
		display: flex;
		align-items: stretch;
	}

	& .docs-header__section-link {
		display: flex;
		align-items: center;
		color: var(--color-header-text);
		font-size: var(--font-size-sm);
		font-weight: 500;
		padding-inline: var(--space-4);
		text-decoration: none;

		&:hover {
			color: var(--color-accent-ink);
		}

		&.is-active {
			color: var(--color-on-accent);
			background-color: var(--color-accent);
		}
	}

	& .docs-header__theme-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline: var(--space-4);
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-header-text);
		font-size: var(--font-size-lg);
		line-height: 1;
	}

	& .docs-header__hamburger {
		display: none;
		align-items: center;
		justify-content: center;
		padding-inline: var(--space-4);
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-header-text);
		font-size: var(--font-size-lg);
		line-height: 1;
	}
}

.docs-sidebar {
	padding: var(--space-3);

	& .docs-sidebar__title {
		font-size: var(--font-size-xs);
		font-weight: 600;
		color: var(--color-text-muted);
		padding: var(--space-2);
		margin-block-end: var(--space-2);
	}

	& .docs-sidebar__group {
		margin-block-end: var(--space-2);

		& summary {
			list-style: none;
			cursor: pointer;
			padding: var(--space-2);
			font-size: var(--font-size-sm);
			font-weight: 600;
			color: var(--color-text);

			&::-webkit-details-marker {
				display: none;
			}

			&:hover {
				background-color: var(--color-surface-hover);
			}
		}

		&[open] summary {
			border-block-end: var(--border-width) solid var(--color-border);
		}
	}

	& .docs-sidebar__children {
		list-style: none;
		padding: 0;
		margin: 0;

		& li {
			margin: 0;
		}
	}

	& .docs-sidebar__link {
		display: block;
		padding: var(--space-2) var(--space-3);
		font-size: var(--font-size-sm);
		color: var(--color-text);
		text-decoration: none;
		border-radius: var(--radius);

		&:hover {
			background-color: var(--color-surface-hover);
			color: var(--color-accent-ink);
		}

		&.is-active {
			background-color: var(--color-primary);
			color: var(--color-on-accent);

			&:hover {
				background-color: var(--color-accent-hover);
			}
		}
	}
}

/* Keep anchor targets visible below the sticky docs header when
 * following TOC links. */
.api-module :is(h1, h2, h3, h4),
.markdown-viewer :is(h1, h2, h3, h4, h5, h6) {
	scroll-margin-top: 64px;
}

/* The markdown-viewer class doubles as the app's live-editor component
 * whose "not loaded" state reserves 100px; docs content is static. */
.api-module .markdown-viewer:not(.markdown-viewer--loaded) {
	min-height: auto;
}

/* Padded, rounded content panels. Scoped to the docs layout so the
 * app's own markdown viewers (shared components.css) are untouched.
 * Edge margins of the first/last child are collapsed so panel padding
 * is the only spacing at the top and bottom. */
.docs-layout .markdown-viewer {
	padding: var(--space-4);
	border-radius: var(--radius);

	& > :first-child {
		margin-block-start: 0;
	}

	& > :last-child {
		margin-block-end: 0;
	}

	/* Consecutive examples (code fences with no prose between) would
 * otherwise touch. */
	& pre {
		margin-block: var(--space-4);
	}

	/* Inline code that links to a documented symbol: keep the code
	 * look, underline only on hover. */
	& a code {
		text-decoration: none;
	}

	& a:hover code {
		text-decoration: underline;
	}
}

.docs-toc {
	& .docs-toc__title {
		font-size: var(--font-size-xs);
		font-weight: 600;
		color: var(--color-text-muted);
		margin-block-end: var(--space-3);
	}

	& .docs-toc__list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	& .docs-toc__item {
		margin: 0;

		& a {
			display: block;
			padding: var(--space-1) var(--space-2);
			font-size: var(--font-size-xs);
			color: var(--color-text-muted);
			text-decoration: none;

			&:hover {
				color: var(--color-text);
			}
		}

		&.docs-toc__item--h3 a {
			padding-inline-start: var(--space-4);
		}

		&.docs-toc__item--h4 a {
			padding-inline-start: var(--space-6);
		}
	}
}

.anchor-link {
	opacity: 0;
	margin-left: var(--space-2);
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--font-size-sm);
}

.markdown-viewer h1,
.markdown-viewer h2,
.markdown-viewer h3,
.markdown-viewer h4 {
	scroll-margin-top: calc(var(--header-height) + var(--space-2));

	&:hover .anchor-link {
		opacity: 1;
	}
}

.api-module {
	& .api-module__header {
		margin-block-end: var(--space-6);

		& h1 {
			margin-block-end: var(--space-2);
		}

		& .api-module__description {
			color: var(--color-text-muted);
			font-size: var(--font-size-lg);
		}
	}

	& .api-module__section {
		margin-block-end: var(--space-6);
	}
}

.api-web {
	& .api-web__meta {
		color: var(--color-text-muted);
		font-size: var(--font-size-sm);

		& a {
			color: var(--color-link);
		}
	}

	& .api-web__header {
		margin-block-end: var(--space-6);

		& h1 {
			margin-block-end: var(--space-2);
		}

		& .api-spec-link {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}

.api-function {
	margin-block-end: var(--space-6);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);

	& h3 {
		margin-block-start: 0;
		margin-block-end: var(--space-3);
		font-size: var(--font-size-lg);
	}

	& .api-function--method {
		margin-block-end: var(--space-4);
		padding: var(--space-4);
		background-color: var(--color-bg);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);

		&:last-child {
			margin-block-end: 0;
		}

		& h4 {
			margin-block: 0 var(--space-2);
			font-size: var(--font-size-base);

			& code {
				background-color: transparent;
				padding: 0;
			}
		}
	}

	& .api-function__signature {
		margin-block-end: var(--space-4);
		padding: var(--space-3);
		background-color: var(--color-bg);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);

		& code {
			background-color: transparent;
		}
	}

	& h4 {
		margin-block-start: var(--space-4);
		margin-block-end: var(--space-2);
		font-size: var(--font-size-sm);
		font-weight: 600;
	}

	& p {
		margin-block-end: var(--space-3);
	}

	& ul {
		padding-inline-start: var(--space-4);
		margin-block-end: var(--space-3);
	}
}

.api-param-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius);
	overflow: hidden;
	margin-block-end: var(--space-4);
	font-size: var(--font-size-sm);

	& th,
	& td {
		padding: var(--space-2) var(--space-3);
		border-bottom: var(--border-width) solid var(--color-border);
		text-align: left;
	}

	& tr:last-child td {
		border-bottom: none;
	}

	& td p {
		margin: 0;
	}

	& th {
		background-color: var(--color-bg);
		font-weight: 600;
	}

	& td:first-child {
		font-weight: 500;
		font-family: var(--font-mono);
	}

	/* Type columns only — 2-column tables (e.g. enum members) keep
	 * their Description plain. */
	& td.api-param-type {
		color: var(--color-purple-ink);
		font-family: var(--font-mono);
	}
}

.api-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	padding: var(--space-4);
	background-color: color-mix(
		in srgb,
		var(--color-warning) 12%,
		var(--color-bg)
	);
	border: var(--border-width-thick) solid var(--color-warning);
	border-radius: var(--radius);
	color: var(--color-text-strong);
	font-size: var(--font-size-sm);

	& .ph {
		flex-shrink: 0;
		color: var(--color-warning-text);
		font-size: var(--font-size-base);
	}
}

.api-differences {
	margin-block-end: var(--space-6);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border: var(--border-width-thick) solid var(--color-warning);
	border-radius: var(--radius);

	& h2 {
		margin-block-start: 0;
		margin-block-end: var(--space-3);
		font-size: var(--font-size-base);
		color: var(--color-warning-ink);
	}

	& p {
		margin-block-end: var(--space-3);
		font-size: var(--font-size-sm);
	}

	& ul {
		padding-inline-start: var(--space-4);
		font-size: var(--font-size-sm);
	}

	& li {
		margin-block-end: var(--space-2);
	}

	& code {
		background-color: var(--color-bg);
		padding: var(--space-1) var(--space-2);
	}
}

/* Match the panels' corner treatment; the base rule lives in the
 * shared components.css. */
.search-suggestions {
	border-radius: var(--radius);
}

@media (max-width: 1024px) {
	.docs-layout {
		grid-template-columns: var(--sidebar-width) 1fr;
	}

	.docs-layout__toc {
		display: none;
	}
}

/* Tablets and narrow windows: desktop single-row header, off-canvas
 * sidebar toggled by the hamburger (visible only in this range). */
@media (max-width: 768px) {
	/* Nested to match the base rule's specificity; later order wins. */
	.docs-header .docs-header__hamburger {
		display: flex;
	}

	.docs-layout {
		grid-template-columns: 1fr;
		min-height: auto;

		& .docs-layout__sidebar {
			position: fixed;
			top: 48px;
			left: 0;
			width: 100%;
			height: calc(100vh - 48px);
			z-index: 100;
			transform: translateX(-100%);
			transition: transform 0.3s ease;
			overflow-y: auto;
			border-inline-end: none;

			&.is-visible {
				transform: translateX(0);
			}
		}

		& .docs-layout__main {
			padding: var(--space-4);
		}
	}
}

/* Phones: two-row header (logo | search | toggle / hamburger | links),
 * full-screen search overlay. */
@media (max-width: 500px) {
	:root {
		--header-height-mobile: 102px;
	}

	.api-module :is(h1, h2, h3, h4),
	.markdown-viewer :is(h1, h2, h3, h4, h5, h6) {
		scroll-margin-top: calc(var(--header-height-mobile) + 16px);
	}

	.docs-header {
		flex-wrap: wrap;
		gap: var(--space-2);
		height: var(--header-height-mobile);
		padding-inline: var(--space-4);

		& .docs-header__logo-link {
			order: 0;
			flex: 0 0 auto;
			align-self: center;
		}

		& .docs-header__logo {
			height: 20px;
		}

		& .docs-header__sections {
			order: 4;
			flex: 1 1 auto;
			height: 36px;
		}

		& .search-container {
			order: 1;
			flex: 1 1 120px;
			min-width: 0;
			max-width: 400px;
			height: 56px;
			align-self: center;
			display: flex;
			align-items: center;
			margin-inline-start: 0;
		}

		& .docs-header__theme-toggle {
			order: 2;
			flex: 0 0 auto;
			height: 56px;
			padding-inline: var(--space-2);
		}

		& .docs-header__hamburger {
			order: 3;
			display: flex;
			flex: 0 0 auto;
			height: 36px;
			align-self: center;
			padding-inline: var(--space-2);
		}
	}

	.docs-layout {
		& .docs-layout__sidebar {
			top: var(--header-height-mobile);
			height: calc(100vh - var(--header-height-mobile));
		}
	}

	.search-suggestions {
		position: fixed;
		top: var(--header-height-mobile);
		left: var(--space-2);
		right: auto;
		width: calc(100vw - var(--space-4));
		max-width: none;
		max-height: calc(100vh - var(--header-height-mobile) - var(--space-4));
		z-index: 200;
		margin-block-start: 0;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.15);
			z-index: -1;
		}
	}

	[data-theme="dark"] .search-suggestions::before {
		background-color: rgba(0, 0, 0, 0.5);
	}
}

/* Prev/next navigation at the end of guide pages. */
.guide-pager {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-start: var(--space-6);
}

.guide-pager__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	text-decoration: none;
	min-inline-size: 0;

	&:hover {
		background: var(--color-surface-hover);
	}

	&:focus-visible {
		outline: var(--border-width-thick) solid var(--color-accent-ink);
		outline-offset: 2px;
	}
}

.guide-pager__link--next {
	text-align: end;
}

.guide-pager__label {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.guide-pager__title {
	color: var(--color-link);
	font-weight: 600;
}

/* UI icons referenced inside guide prose align with the text. */
.markdown-viewer .ph {
	vertical-align: text-bottom;
}

/* Below the tablet breakpoint the prev/next pager stacks vertically. */
@media (max-width: 768px) {
	.guide-pager {
		flex-direction: column;
	}

	.guide-pager__link {
		inline-size: 100%;
	}
}

/* Examples catalog: a responsive card grid grouped by category. */
.examples-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-4);
}

/* Card rules are scoped to the grid so they outrank the shared
 * `.markdown-viewer a` underline rule from components.css. */
.examples-grid .example-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-text);

	&:hover {
		border-color: var(--color-accent);
		background: var(--color-surface-hover);
		text-decoration: none;
	}

	&:focus-visible {
		outline: var(--border-width-thick) solid var(--color-accent-ink);
		outline-offset: 2px;
	}
}

.examples-grid .example-card__title {
	color: var(--color-text);
	font-weight: 600;
}

.examples-grid .example-card:hover .example-card__title {
	color: var(--color-accent-ink);
}

.examples-grid .example-card__summary {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

/* Copy-to-clipboard button added to every fenced code block. */
.markdown-viewer pre {
	position: relative;
}

.code-copy {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-end: var(--space-2);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font: inherit;
	font-size: var(--font-size-xs);
	cursor: pointer;
	opacity: 0;

	& .ph {
		font-size: var(--font-size-sm);
	}

	&:hover {
		color: var(--color-text);
	}

	&:focus-visible {
		opacity: 1;
		outline: var(--border-width-thick) solid var(--color-accent-ink);
		outline-offset: 2px;
	}
}

.markdown-viewer pre:hover .code-copy,
.code-copy.is-copied {
	opacity: 1;
}