/* The documentation shell: the bar under the site nav, the panel of pages, the prose column, and
   the palette ⌘K opens. Restated from `app/src/routes/(public)/docs/(components)` in the app
   repository, so a page reads the same on either. */

.docs {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.docs-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.docs-body > main {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
}

/* ---------------------------------------------------------------- the docs bar */

.docs-header {
	align-items: center;
	background: var(--color-grey-800);
	border-bottom: 1px solid var(--color-grey-700);
	display: grid;

	/* The field is centred on the bar rather than on the space left over between the two sides,
	   so both side columns are given the same width. */
	flex-shrink: 0;
	gap: 16px;
	grid-template-columns: 1fr minmax(0, 520px) 1fr;
	min-height: 65px;
	padding: 0 24px;
	z-index: var(--z-foreground);
}

.docs-header .lockup {
	align-items: center;
	border-radius: 4px;
	display: flex;
	justify-self: start;
	width: 176px;
}

.docs-header .lockup img {
	display: block;
	width: 100%;
}

.docs-header .search {
	min-width: 0;
	position: relative;
}

/* Sits over the end of the field, which is readonly, so it can never cover text a reader is
   typing. */
.docs-header kbd {
	align-items: center;
	background: var(--color-grey-700);
	border-radius: 4px;
	color: var(--color-grey-300);
	display: flex;
	font-family: inherit;
	font-size: var(--font-size-small);
	gap: 2px;
	height: 22px;
	padding: 0 7px;
	pointer-events: none;
	position: absolute;
	right: 9px;
	top: 50%;
	translate: 0 -50%;
}

.docs-header .back {
	justify-self: end;
	white-space: nowrap;
}

.docs-header .burger {
	display: none;
}

@media (width <= 1024px) {
	.docs-header {
		grid-template-columns: auto auto minmax(0, 1fr);
		padding: 0 16px;
	}

	.docs-header .burger {
		display: inline-flex;
	}

	.docs-header .back {
		display: none;
	}
}

@media (width <= 640px) {
	.docs-header .lockup {
		width: 132px;
	}
}

/* ---------------------------------------------------------------- the panel of pages */

.docs-sidebar {
	border-right: 1px solid var(--color-grey-700);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 28px;
	overflow-y: auto;
	padding: 28px 16px 48px;
	width: 280px;
}

.docs-sidebar h2 {
	color: var(--color-grey-50);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 16px;
	padding-inline: 12px;
	text-transform: uppercase;
}

.docs-sidebar ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A hub and its disclosure share a row, and the link takes what the button leaves. */
.docs-sidebar .row {
	align-items: center;
	display: flex;
	gap: 2px;
}

.docs-sidebar .disclosure {
	border-radius: 6px;
	color: var(--color-grey-500);
	display: flex;
	flex-shrink: 0;
	padding: 6px;
}

.docs-sidebar .disclosure:hover {
	background: var(--color-grey-800);
	color: var(--color-grey-50);
}

.docs-sidebar .disclosure .icon {
	height: 14px;
	transition: rotate 150ms;
	width: 14px;
}

.docs-sidebar .disclosure[aria-expanded="true"] .icon {
	rotate: 90deg;
}

/* Indented to the width of the disclosure plus the row's own padding, so a child sits under the
   first letter of its hub rather than under the chevron. */
.docs-sidebar .children {
	border-left: 1px solid var(--color-grey-700);
	margin-left: 14px;
	padding-left: 6px;
}

.docs-sidebar .children[hidden] {
	display: none;
}

.docs-scrim {
	display: none;
}

@media (width <= 1024px) {
	.docs-scrim.open {
		background: rgb(0 0 0 / 0.5);
		display: block;
		inset: 130px 0 0;
		position: fixed;
		z-index: var(--z-dropdown);
	}

	.docs-sidebar {
		background: var(--color-grey-900);

		/* Kept in the tree so the burger's aria-controls always names a real element. */
		display: none;
		inset: 130px auto 0 0;
		position: fixed;
		z-index: var(--z-dropdown);
	}

	.docs-sidebar.open {
		display: flex;
	}
}

/* ---------------------------------------------------------------- the prose column */

.docs-article {
	margin: 0 auto;
	max-width: 820px;
	padding: 48px 40px 96px;
}

.docs-article > .section {
	color: var(--color-orange-500);
	font-size: var(--font-size-body);
	font-weight: 500;
	margin: 0 0 8px;
}

.docs-article > h1 {
	color: var(--color-grey-0);
	font-size: var(--font-size-title-medium);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 32px;
}

/* The prose arrives as the HTML a page's markdown was rendered to, so every element is styled by
   tag — there is no class a writer could be asked to remember. A tab panel is prose too, and
   wears the same class. */
.docs-prose {
	color: var(--color-grey-400);
	font-size: var(--font-size-medium);
	line-height: 1.8;
}

.docs-prose h2 {
	color: var(--color-grey-0);
	font-size: var(--font-size-title-small);
	font-weight: 500;
	line-height: 1.2;
	margin: 48px 0 16px;
	scroll-margin-top: 24px;
}

.docs-prose h3 {
	color: var(--color-grey-0);
	font-size: var(--font-size-large);
	font-weight: 500;
	line-height: 1.2;
	margin: 36px 0 12px;
	scroll-margin-top: 24px;
}

.docs-prose p {
	margin: 0 0 20px;
}

/* A link is lifted off the body grey rather than coloured, so it reads as one at a glance and
   not only where the underline is noticed. */
.docs-prose a {
	color: var(--color-grey-50);
	font-weight: 500;
	text-decoration: underline;
	transition: color 200ms;
}

.docs-prose a:hover {
	color: var(--color-orange-400);
}

.docs-prose strong {
	color: var(--color-grey-50);
	font-weight: 600;
}

.docs-prose em {
	font-style: italic;
}

.docs-prose ul,
.docs-prose ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.docs-prose ul {
	list-style: disc;
}

.docs-prose ol {
	list-style: decimal;
}

.docs-prose li {
	margin: 6px 0;
}

.docs-prose hr {
	border: 0;
	border-top: 1px solid var(--color-grey-700);
	margin: 40px 0;
}

.docs-prose img {
	border-radius: 8px;
	height: auto;
	margin: 0 0 20px;
	max-width: 100%;
}

/* A table is the one block that can be wider than the column, so it scrolls inside its own box
   rather than pushing the page sideways. */
.docs-prose table {
	border-collapse: collapse;
	display: block;
	font-size: var(--font-size-body);
	margin: 0 0 20px;
	overflow-x: auto;
	width: 100%;
}

.docs-prose th,
.docs-prose td {
	border: 1px solid var(--color-grey-700);
	padding: 8px 12px;
	text-align: left;
}

.docs-prose th {
	background: var(--color-grey-800);
	color: var(--color-grey-50);
	font-weight: 600;
}

/* A fence indented inside a list item stays in the prose, so it renders here rather than as a
   `.code-block`. Enough to read as code, without the frame and the copy button. */
/* Kramdown wraps a fence in a div of its own, which would carry the prose's paragraph spacing on
   top of the frame's. The frame is the `pre`; the wrapper only holds it. */
.docs-prose .highlighter-rouge,
.docs-prose .highlight {
	margin: 0;
}

.docs-prose pre {
	background: var(--color-grey-800);
	border: 1px solid var(--color-grey-700);
	border-radius: 8px;
	font-size: var(--font-size-small);
	line-height: 1.6;
	margin: 0 0 20px;
	overflow-x: auto;
	padding: 16px 20px;
}

.docs-prose pre code {
	background: transparent;
	color: var(--color-grey-100);
	padding: 0;
	white-space: pre;
}

.docs-prose code {
	background: var(--color-grey-800);
	border-radius: 4px;
	color: var(--color-grey-300);
	font-family: var(--font-mono);
	font-size: var(--font-size-body);
	padding: 2px 6px;
}

/* The way on, at the end of the page and on the side the eye leaves a line from. The label
   stands above the button rather than within it, so the button carries the page name alone. */
.docs-next {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 56px;
	padding-top: 24px;
}

.docs-next .label {
	color: var(--color-grey-400);
	font-size: var(--font-size-small);
	margin: 0;
}

.docs-next .btn {
	flex-direction: row-reverse;
}

@media (width <= 640px) {
	.docs-article {
		padding: 32px 20px 64px;
	}
}

/* ---------------------------------------------------------------- tab groups */

.docs-tabs {
	margin: 0 0 20px;
}

.docs-tabs .bar {
	border-bottom: 1px solid var(--color-grey-700);
}

.docs-tabs .bar ul {
	display: flex;
	list-style: none;
	margin: 0 0 -3px;
	overflow-x: auto;
	padding: 3px;
	scrollbar-width: none;
}

.docs-tabs .bar ul::-webkit-scrollbar {
	display: none;
}

/* A tab is a flat label with an underline — its state lives entirely in the bottom border and
   the label colour. */
.docs-tabs .tab {
	align-items: center;
	border-bottom: 2px solid transparent;
	color: var(--color-grey-300);
	display: inline-flex;
	font-size: var(--font-size-body);
	font-weight: 300;
	gap: 0.75em;
	height: 36px;
	padding: 0 24px;
	text-decoration: none;
	transition:
		border-color 200ms,
		color 200ms;
	white-space: nowrap;
}

.docs-tabs .tab:hover {
	border-color: var(--color-grey-500);
	color: var(--color-grey-200);
}

.docs-tabs .tab.toggled {
	border-color: var(--color-orange-500);
	color: var(--color-orange-500);
}

.docs-tabs .panel {
	padding-top: 20px;
}

.docs-tabs .panel[hidden] {
	display: none;
}

.docs-tabs .panel > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- tile grids */

.docs-tiles {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

/* A tile is not a prose bullet, and the prose stylesheet puts a vertical margin on every `li` it
   reaches. Left alone it would widen the row gap past the column gap. */
.docs-tiles li {
	margin: 0;
}

.docs-tiles a {
	align-items: center;
	background: var(--color-grey-800);
	border: 1px solid var(--color-grey-700);
	border-radius: 10px;
	display: flex;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	text-decoration: none;
	transition:
		background 150ms,
		border-color 150ms;
}

.docs-tiles a:hover {
	background: var(--color-grey-700);
	border-color: var(--color-grey-600);
}

.docs-tiles a:hover .chevron {
	color: var(--color-orange-500);
	translate: 2px 0;
}

/* A mark is a fixed box here, not an illustration: the prose gives every `img` a bottom margin
   and a height of its own, which would push it off the centre of its row. */
.docs-tiles .mark {
	border-radius: 0;
	flex-shrink: 0;
	height: 24px;
	margin: 0;
	width: 24px;
}

.docs-tiles .text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.docs-tiles .label {
	color: var(--color-grey-50);
	font-size: var(--font-size-body);
	font-weight: 500;
	line-height: 1.3;
}

.docs-tiles .note {
	color: var(--color-grey-400);
	font-size: var(--font-size-small);
	line-height: 1.4;
}

.docs-tiles .chevron {
	color: var(--color-grey-500);
	flex-shrink: 0;
	height: 14px;
	margin-left: auto;
	transition:
		color 150ms,
		translate 150ms;
	width: 14px;
}

/* ---------------------------------------------------------------- the ⌘K palette */

/* A palette, not a centred modal: it hangs from the top of the window, holds no padding of its
   own — the field and the list carry theirs — and scrolls inside its own height. */
dialog.docs-search {
	background: var(--color-grey-800);
	border: 1px solid var(--color-grey-700);
	border-radius: 12px;
	color: var(--text-color);
	margin: 88px auto auto;
	max-height: min(560px, calc(100vh - 128px));
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: min(640px, calc(100vw - 32px));
}

dialog.docs-search::backdrop {
	background: rgb(0 0 0 / 0.5);
}

/* Below this the dialog is a full-height sheet, which is the shape a search wants on a phone. */
@media (width <= 768px) {
	dialog.docs-search {
		margin: 0;
		max-height: 100vh;
		width: 100vw;
	}
}

dialog.docs-search .field-row {
	border-bottom: 1px solid var(--color-grey-700);
	padding: 12px;
}

dialog.docs-search .results {
	max-height: calc(min(560px, 100vh - 128px) - 65px);
	overflow-y: auto;
	padding: 8px;
}

dialog.docs-search .empty {
	color: var(--color-grey-400);
	font-size: var(--font-size-body);
	margin: 0;
	padding: 16px 12px;
}

dialog.docs-search ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

dialog.docs-search .results a {
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	text-decoration: none;
}

dialog.docs-search .results a.active {
	background: var(--color-grey-700);
}

dialog.docs-search .results .row {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

dialog.docs-search .results .title {
	color: var(--color-grey-50);
	font-size: var(--font-size-body);
	font-weight: 500;
}

dialog.docs-search .results .section {
	color: var(--color-grey-400);
	flex-shrink: 0;
	font-size: var(--font-size-small);
}

dialog.docs-search .results .snippet {
	-webkit-box-orient: vertical;
	color: var(--color-grey-400);
	display: -webkit-box;
	font-size: var(--font-size-small);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	line-height: 1.5;
	overflow: hidden;
}

/* ---------------------------------------------------------------- inside a tab panel */

/* A tab panel wears `docs-prose` so the markdown in it reads like the markdown on the page. That
   also puts the prose rules over the blocks a panel holds, each of which already carries a frame
   of its own — a tile grid would gain bullets and an indent, a fence a second border. */

ul.docs-tiles {
	list-style: none;
	padding: 0;
}

ul.docs-tiles > li {
	margin: 0;
}

ol.steps {
	list-style: none;
	padding: 0;
}

.docs-prose .code-block {
	padding: 16px 42px 16px 24px;
}

.docs-prose .code-block pre {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.docs-prose .banner,
.docs-prose .steps {
	font-size: var(--font-size-body);
}