/* Mochi Mayhem site: one quiet, legible stylesheet. System fonts only, no
   remote resources (tools/check_site.py fails the build if any appear).
   Light and dark schemes follow the reader's system setting. */

:root {
	color-scheme: light dark;
	--bg: #fbf9f6;
	--surface: #ffffff;
	--text: #23201d;
	--muted: #5c5650;
	--line: #ddd6cd;
	--link: #8f2a52;
	--link-visited: #6e2f6b;
	--focus: #1f5fbf;
	--banner-bg: #fff4d6;
	--banner-line: #b98a12;
	--banner-text: #3d2e00;
	--ph-bg: #fde7ef;
	--ph-text: #6b1438;
	--head-bg: #f3eee7;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #181715;
		--surface: #211f1c;
		--text: #ece7e0;
		--muted: #b5ada3;
		--line: #3c3833;
		--link: #f3a6c4;
		--link-visited: #d9b3f0;
		--focus: #8fb8ff;
		--banner-bg: #33290c;
		--banner-line: #c99a24;
		--banner-text: #fbe9b5;
		--ph-bg: #4a1d30;
		--ph-text: #ffd3e4;
		--head-bg: #2a2723;
	}
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	padding: 0.5rem 1rem;
	background: var(--surface);
	color: var(--text);
	z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:visited { color: var(--link-visited); }
a:focus-visible, summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.wrap {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}
.site-name {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--text);
	text-decoration: none;
}
.site-name:visited { color: var(--text); }

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] {
	color: var(--text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

main { padding: 1.5rem 0 3rem; }

.draft-banner {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--banner-line);
	border-left-width: 6px;
	border-radius: 6px;
	background: var(--banner-bg);
	color: var(--banner-text);
}
.draft-banner strong { display: block; font-size: 1.0625rem; }

h1 { font-size: 1.85rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.25rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }
li > ul { margin-top: 0.35rem; }

.meta { color: var(--muted); font-size: 0.95rem; }
.lead { font-size: 1.125rem; }

.ph {
	background: var(--ph-bg);
	color: var(--ph-text);
	padding: 0 0.25em;
	border-radius: 3px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

.toc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin: 1.5rem 0;
}
.toc h2 { margin: 0 0 0.5rem; padding: 0; border: 0; font-size: 1.05rem; }
.toc ol { margin: 0; padding-left: 1.5rem; }
.toc li { margin-bottom: 0.15rem; }

.callout {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
}

/* Tables: a normal table on wide screens, one card per row on narrow ones.
   Each cell carries data-label, shown as its heading in the card layout. */
.table-wrap { margin: 0 0 1.25rem; }
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
	background: var(--surface);
}
caption {
	text-align: left;
	font-weight: 600;
	padding: 0 0 0.4rem;
}
th, td {
	text-align: left;
	vertical-align: top;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--line);
}
thead th { background: var(--head-bg); }
tbody th { font-weight: 600; }

@media (max-width: 40rem) {
	body { font-size: 1rem; }
	h1 { font-size: 1.55rem; }
	table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: 100%; }
	table.stack { background: transparent; }
	table.stack caption { display: block; width: 100%; }
	table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	table.stack tr {
		margin: 0 0 0.75rem;
		border: 1px solid var(--line);
		border-radius: 6px;
		background: var(--surface);
		overflow: hidden;
	}
	table.stack th, table.stack td { border: 0; border-top: 1px solid var(--line); }
	table.stack tbody th { border-top: 0; background: var(--head-bg); }
	table.stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		font-size: 0.85rem;
		color: var(--muted);
	}
}

.site-footer {
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.92rem;
	padding: 1.25rem 0 2rem;
}
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

@media print {
	.site-nav, .skip-link { display: none; }
	body { background: #fff; color: #000; }
}