/*
 * 公开站页面 (书城、作者主页、搜索结果、登录、404) 的样式,服务端模板 templates/site/*.html 引用;
 * 视觉沿用 mkbook 门户页:灰色工作台上的白色纸页、细分隔线的书目列表。设计变量在 shell.css。
 */

body.mk-site {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--mk-workspace);
	font-family: var(--mk-sans);
	font-size: 16px;
	line-height: 1.75;
	color: var(--mk-ink);
	-webkit-font-smoothing: antialiased;
}

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

.mk-site a {
	color: inherit;
	text-decoration: none;
}

.mk-site-main {
	flex: 1;
	padding: 40px 20px 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mk-site-center {
	justify-content: center;
}

.mk-sheet {
	width: 100%;
	max-width: 49.6rem;
	min-height: 60vh;
	padding: 0 3.5rem 3rem;
	background: var(--mk-paper);
	border-radius: 2px;
	box-shadow:
		0 0 0 1px rgba(29, 29, 31, 0.05),
		0 2px 6px rgba(29, 29, 31, 0.06),
		0 12px 32px rgba(29, 29, 31, 0.1);
}

.mk-sheet-header {
	padding: 4rem 0 1rem;
	text-align: center;
}

.mk-sheet-header h1 {
	margin: 0;
	font-size: 2rem;
	letter-spacing: 0.05em;
}

.mk-sheet-sub {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	color: var(--mk-ink-faint);
}

.mk-rule {
	width: 3rem;
	height: 2px;
	margin: 2rem auto 0;
	background: var(--mk-accent);
}

.mk-avatar {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--mk-accent);
	color: #fff;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mk-empty {
	padding: 2rem 0;
	text-align: center;
	color: var(--mk-ink-faint);
}

/* ---------- 书目列表 ---------- */

.mk-book {
	padding: 1.5rem 0.25rem;
	border-bottom: 1px solid var(--mk-hairline);
}

.mk-book-title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.5;
}

.mk-book-title a:hover {
	color: var(--mk-accent);
}

.mk-book-intro {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--mk-ink-soft);
}

.mk-book-meta {
	margin-top: 0.7rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--mk-ink-faint);
}

.mk-book-meta > * + *::before {
	content: "·";
	margin: 0 0.7em;
}

.mk-book-meta a:hover {
	color: var(--mk-accent);
}

/* ---------- 分页 ---------- */

.mk-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	padding-top: 2rem;
	font-size: 0.875rem;
	color: var(--mk-ink-soft);
}

.mk-pager a:hover {
	color: var(--mk-accent);
}

.mk-pager-disabled {
	color: var(--mk-hairline);
}

.mk-pager-info {
	color: var(--mk-ink-faint);
	font-variant-numeric: tabular-nums;
}

/* ---------- 搜索结果 ---------- */

.mk-search-form {
	display: flex;
	gap: 8px;
	padding-top: 2.5rem;
}

.mk-search-form input[type="search"] {
	flex: 1;
	height: 42px;
	padding: 0 16px;
	border: 1px solid var(--mk-hairline);
	border-radius: 21px;
	background: var(--mk-panel);
	font: inherit;
	color: var(--mk-ink);
	outline: none;
}

.mk-search-form input[type="search"]:focus {
	border-color: var(--mk-accent);
	background: var(--mk-paper);
}

.mk-search-form button {
	padding: 0 22px;
	border: 0;
	border-radius: 21px;
	background: var(--mk-accent);
	font: inherit;
	color: #fff;
	cursor: pointer;
}

.mk-search-scope,
.mk-search-total {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: var(--mk-ink-faint);
}

.mk-search-scope a {
	color: var(--mk-accent);
}

.mk-hit {
	padding: 1.25rem 0.25rem;
	border-bottom: 1px solid var(--mk-hairline);
}

.mk-hit-title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.mk-hit-title a:hover {
	color: var(--mk-accent);
}

.mk-hit-book {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--mk-ink-faint);
}

.mk-hit-book a:hover {
	color: var(--mk-accent);
}

.mk-hit-snippet {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--mk-ink-soft);
}

.mk-hit-snippet mark {
	padding: 0 1px;
	background: #ffe14d;
	color: var(--mk-ink);
}

/* ---------- 404 / 错误 ---------- */

.mk-notice {
	text-align: center;
	color: var(--mk-ink-soft);
}

.mk-notice-code {
	font-size: 64px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--mk-hairline);
}

.mk-notice h1 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	color: var(--mk-ink);
}

.mk-notice a {
	color: var(--mk-accent);
}

/* ---------- 窄屏 ---------- */

@media (max-width: 48rem) {
	.mk-site-main {
		padding: 0 0 32px;
	}

	.mk-sheet {
		padding: 0 1.25rem 2rem;
		border-radius: 0;
		box-shadow: none;
	}

	.mk-sheet-header {
		padding-top: 3rem;
	}

	.mk-site-center {
		padding: 48px 20px;
	}
}