/*
 * mikata.moex.land各页共用的样式。
 *
 * 窄屏是一张白页，和扩展的设置页同一套颜色（mikata仓库的src/ui.css）。
 * 48rem及以上是灰色桌面上的两张纸：内容在前面那张白纸上，后面露出一张转了4°的粉纸，
 * 和图标里那两张一样。各页用--sheet-width定纸宽，用--back-*调后面那张纸的位置。
 */

:root {
	color-scheme: light dark;
	--fg: #1c1c1e;
	--muted: #6b6b70;
	--bg: #ffffff;
	--desk: #f1f1f4;
	--line: #d9d9de;
	--panel: #f5f5f7;
	--accent: #e91e63;
	--accent-fg: #ffffff;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.08);
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #f2f2f4;
		--muted: #a0a0a8;
		--bg: #1e1e21;
		--desk: #111113;
		--line: #3a3a40;
		--panel: #26262a;
		--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.4);
	}
}

/* 每段文字都写了两种语言，只显示和<html lang>一致的那份。语言由lang.js定。 */
html:not([lang|="zh"]) [data-l="zh"],
html[lang|="zh"] [data-l="en"] {
	display: none;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 1rem/1.6 system-ui, -apple-system, sans-serif;
	text-wrap: pretty;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.stack,
footer {
	max-width: 34rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.stack {
	padding-top: 4.5rem;
}

footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin-top: 4rem;
	padding-bottom: 3rem;
	color: var(--muted);
	font-size: 0.875rem;
}

footer [aria-current="page"] {
	text-decoration: none;
}

footer .home {
	margin-left: auto;
}

@media (min-width: 48rem) {
	body {
		background: var(--desk);
	}

	/*
	 * 粉纸转过的那个角在平板宽度会伸出视口，在这层占满视口宽的外壳上裁掉。
	 * 不放在body上：body的overflow会传给视口，变成hidden，仍然能被滚动。
	 */
	.desk {
		overflow-x: clip;
	}

	.stack {
		position: relative;
		max-width: var(--sheet-width, 54rem);
		margin-top: 4.5rem;
		padding-top: 0;
	}

	/* 后面那张：比前面那张小一圈，往右上错开，转4°。 */
	.stack::before {
		content: "";
		position: absolute;
		inset: var(--back-inset, -1.75rem 0.25rem 3rem 22%);
		height: var(--back-height, auto);
		border-radius: 1.75rem;
		background: var(--accent);
		rotate: 4deg;
	}

	.sheet {
		position: relative;
		padding: 2.5rem;
		border-radius: 1.75rem;
		background: var(--bg);
		box-shadow: var(--shadow);
	}

	/* 和纸上的内容左右对齐：1rem外边距加2.5rem纸的内边距。 */
	footer {
		box-sizing: border-box;
		max-width: calc(var(--sheet-width, 54rem) + 2rem);
		margin-top: 2rem;
		padding: 0 3.5rem 3rem;
	}
}