/* Hallmark · v4.2.0 · docs page of the Franca homepage · shape: Banner over prose sections (a words page: type and code carry it, no photographs) · job: copy the sample and make the first call · hero: banner, the references-and-docs posture (layout.md § 6) · carries: the home sheet's tokens and chrome via import, plus the code panel and the prose measures this page alone needs */
/* critique: the docs page holds what the homepage gave up — the code walls — so its measure narrows, one panel at a time behind tabs, and every sample states the one change (base_url) in the highlighted line */
/* Hallmark · waive 78 · h1 at 40 carries the entry, h2 at 25 reads as a prose part head under it · the 52px section head is a landing convention; on a reference page it would shout the table of contents (layout.md § 2) */
/* answered, on the record: the four-section count · docs is the Banner anatomy (layout.md § 7), a reference the visitor reads and leaves; more sections would be padding */
@import url('main-6.css');

/* ------------------------------------------------------------------ */
/* Docs — banner, prose, the code panel                                 */
/* ------------------------------------------------------------------ */

.docs-hero {
	padding: 120px 0 64px;
}

.docs-hero h1 {
	font-size: var(--fs-head);
}

.docs-lead {
	margin-top: 16px;
	max-width: 38em;
	color: var(--text-2);
	font-size: 17px;
}

.docs-lead code {
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--code-accent);
}

.docs-section {
	padding: 64px 0;
}

.docs-section h2 {
	font-size: var(--fs-h3);
}

.docs-note {
	margin-top: 12px;
	max-width: 38em;
	color: var(--text-2);
}

.docs-note code {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--code-accent);
}

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

.docs-list li {
	padding: 20px 0;
	border-top: 1px solid var(--border);
	color: var(--text-2);
	max-width: 42em;
}

/* ------------------------------------------------------------------ */
/* Tabs + the code panel                                                */
/* ------------------------------------------------------------------ */

.tabs {
	display: flex;
	gap: 8px;
	margin-top: 40px;
}

.tab {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 8px 16px;
	color: var(--text-2);
	font-family: var(--font);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: color var(--speed);
}

.tab:hover {
	color: var(--text-1);
}

.tab:active {
	color: var(--code-accent);
}

.tab[aria-selected='true'] {
	color: var(--text-1);
	box-shadow: inset 0 -2px 0 var(--code-accent);
}

.code-panel {
	margin-top: 16px;
	background: var(--surface);
	color: var(--text-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 24px 24px 24px 8px;
	overflow-x: auto;
}

.code {
	margin: 0;
	counter-reset: line;
}

.code code {
	display: block;
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-1);
	min-width: max-content;
}

.code .row {
	display: block;
	counter-increment: line;
}

.code .row::before {
	content: counter(line);
	display: inline-block;
	width: 2em;
	margin-right: 1.75em;
	text-align: right;
	color: var(--border-strong);
	user-select: none;
}

.tok-key {
	color: var(--code-accent);
}

.tok-str {
	color: var(--code-string);
}

.tok-hl {
	outline: 1px solid var(--code-accent);
	outline-offset: 3px;
	border-radius: 2px;
}