/* Part of the component CSS split: one file per component.
   Loaded by views/layout.templ in cascade order after tokens.css.
   Component: see views/components/ (same base name). */

.panel {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(2rem, 8vw, 10rem);
	max-width: 48rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 4rem);
	background: var(--fg);
	color: var(--bg-elevated);
}

.panel h2 { color: inherit; }

.panel p {
	max-width: 38rem;
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.75rem);
	line-height: 1.45;
	text-align: left;
	text-wrap: pretty;
}

.prose {
	max-width: 48rem;
	margin: 0 auto;
	/* Padding on ALL sides: with `X 0` the horizontal padding was zero, so
	   on wide screens form inputs and post text touched the box border and
	   field labels rendered clipped at the edge. */
	padding: clamp(2rem, 5vw, 4rem);
}

.prose > h1 {
	margin: 0 0 3rem;
	font-size: clamp(3rem, 7vw, 6.5rem);
	font-weight: 600;
	letter-spacing: -.055em;
	line-height: .9;
}

.prose > h2 {
	margin: 4rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 550;
	letter-spacing: -.035em;
	line-height: 1.1;
	text-align: left;
}

/* Numbered prose sections: heading and body share one grid so the paragraph
   aligns exactly with the heading text column. Left-aligned like the rest
   of the page. */
.prose-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	justify-items: start;
	max-width: 38rem;
	margin: clamp(4rem, 7vw, 6.5rem) auto 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--border);
}

.prose-section > h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 550;
	letter-spacing: -.035em;
	line-height: 1.1;
	text-align: left;
}

.prose-section > *:not(h2) {
	width: 100%;
	max-width: 38rem;
	margin: 0;
	color: var(--fg-muted);
	font-size: clamp(1.03rem, 1.8vw, 1.14rem);
	line-height: 1.72;
	text-align: left;
	text-wrap: pretty;
}

.prose-section > ul {
	text-align: left;
}

.prose-section li + li { margin-top: .7rem; }
.prose-section strong { color: var(--fg); font-weight: 650; }

/* Counter scope: opt-in only, via .prose-numbered on the .prose wrapper
   (e.g. a future checklist page). Plain .prose pages — including the admin
   area, which has loose h2 headings — stay unnumbered: the site avoids
   redundant numbering everywhere (DESIGN.md §Prose). */
.prose-numbered { counter-reset: prose-section; }
.prose-numbered > h2::before {
	content: counter(prose-section, decimal-leading-zero);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	margin-top: .15rem;
}
.prose-numbered > h2 {
	counter-increment: prose-section;
}

.prose > h2:first-child { margin-top: 0; }
.prose-section:first-child { margin-top: 0; }