@charset "utf-8";

@layer
	import_color,
	import_size,
	import_lang,
	root,
	default,
	normal,
	semantic,
	code_block,
	figures,
	ui,
	util,
	import_prism,
	import_font_math,
	import_custom_nav,
	import_custom_prism,
	loading;

@import url("import/color.css") layer(import_color);
@import url("import/size.css") layer(import_size);
@import url("import/lang.css") layer(import_lang);
@import url("import/prism.css") layer(import_prism);
@import url("import/font_math.css") layer(import_font_math);
@import url("import/custom_nav.css") layer(import_custom_nav);
@import url("import/custom_prism.css") layer(import_custom_prism);
@namespace m url("http://www.w3.org/1998/Math/MathML");

@layer root {
	:root {
		font-size: var(--root-font-size);
		height: 100%;
		padding: 0 0.5rem;
		color: var(--fg-color);
	}

	:root > body {
		min-width: 20rem;
		max-width: 46rem;
		min-height: calc(100% - 8rem);
		margin: 0 auto;
		padding-top: 2rem;
		padding-bottom: 6rem;
		/* 左右パディングは画面サイズに応じて縮小。*/
		padding-left: clamp(0px, calc((100% - 46rem) / 2), 4rem);
		padding-right: clamp(0px, calc((100% - 46rem) / 2), 4rem);
		/* 枠線は必要時のみ表示。*/
		border-style: none;
		border-width: thin;
		border-color: color-mix(in srgb, var(--edge-color), var(--bg-color) 25%);
	}

	@media print {
		:root {
			background-color: transparent;
		}

		:root > body {
			padding-top: 0;
			background-color: transparent;
		}
	}

	@media screen {
		:root {
			background-color: var(--bg-color);
		}

		:root > body {
			background-color: var(--bg-color);
			box-shadow: 0 0 1px 0.25rem transparent;
			transition: box-shadow 1s linear;
		}
	}

	@media screen and (width > 56rem) {
		:root {
			background-color: var(--ob-color);
		}

		:root > body {
			background-color: var(--bg-color);
			border-left-style: solid;
			border-right-style: solid;
			box-shadow: 0 0 1px 0.25rem rgba(0, 0, 0, 0.025);
		}
	}
}

@layer default {
	p {
		margin: 0.5em 0;
	}

	ul, ol {
		padding-left: 1.5em;
	}

	ul, ol, dl {
		margin: 0.5em 0;
	}

	q {
		quotes: "\201C" "\201D" "\2018" "\2019";
	}

	pre {
		line-height: 1.4;
	}

	pre, samp, code, kbd {
		font-family: var(--mono-font);
	}

	pre, samp, code {
		hyphens: none;
		tab-size: 4;
		text-justify: none;
	}

	code {
		background-color: var(--mask-color);
		margin: 0 -0.25ch;
		padding: 0 0.25ch;
		border-radius: 0.25ch;
	}

	sup:has(> a) {
		position: relative;
		font-size: 70%;
		z-index: 1;
		top: -0.5em;
	}

	sup.tail:has(> a) {
		display: inline-block;
		width: 1em;
		margin-right: -1em;
		left: 0.25ch;
	}

	div.math {
		margin: 0.5em 0;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	m|math {
		font-family: "MyMath", math;
		font-size: 1.2em;
	}

	m|math[display="block"] {
		white-space: nowrap;
		padding: 0.5rem;
		/* -- 数式の左寄せ --
		 * 2025 年現在、ブラウザ依存の方法しかない。
		 * - Gecko は text-align: left が使用可能
		 * - Blink と WebKit は diaplay: math が使用可能 */
		text-align: left;
		display: math; 
	}

	kbd::before {
		content: "[";
	}

	kbd::after {
		content: "]";
	}

	a:link, a:visited {
		color: var(--link-color);
		text-decoration: none;
	}

	a:link:hover, a:visited:hover {
		text-decoration: underline;
	}

	h1 code {
		background-color: revert;
	}

	@media all and (width > 46rem) {
		m|math[display="block"] {
			padding-left: 1.5rem;
		}
	}
}

@layer normal {
	dl.normal {
		> dt::before {
			content: "≫";
			margin-right: 0.5ch;
		}

		> dd {
			margin-left: 1.5ch;
		}

		&.lowProfile {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
		}

		&.lowProfile > dt {
			align-self: baseline;
			white-space: nowrap;
		}

		&.lowProfile.listLike > dt::before {
			content: "\2022";
			display: inline-block;
			width: 1em;
			text-align: center;
			margin-right: 0.5ch;
		}

		&.lowProfile > dd {
			display: list-item;
			margin-left: 1.5em;
			padding-left: 0.5em;
			align-self: baseline;
		}

		&.lowProfile > dd::marker {
			content: "…";
		}

		&.highProfile > dt {
			margin-top: 2em;
		}

		&.highProfile > dd {
			margin: 1em 0 2em 2em;
		}
	}

	aside.normal {
		margin: 1rem -0.5rem;
		padding: 0 0.5rem;
		border-width: thick ;
		border-style: solid none;
		border-color: var(--thick-color);
		background-color: var(--fill-color);

		&::before {
			--size: 2.2em;
			content: "";
			float: left;
			width: var(--size);
			height: var(--size);
			margin: calc((1lh + 1em - var(--size)) / 2) 0.5ch 0 0;
			background-size: 2.2em;
			background-image: url("img/book_light.svg");
		}

		&.desc::before {
			content: none;
		}

		&.old::before {
			background-image: url("img/floppy.svg");
		}

		&.moan::before {
			background-image: url("img/unhappy.svg");
			filter: saturate(30%);
		}
	}

	details.normal {
		margin-left: calc(var(--gap) * -1);
		margin-right: calc(var(--gap) * -1);
		padding-left: calc(var(--gap) * +1);
		padding-right: calc(var(--gap) * +1);

		&[open] {
			box-shadow: var(--mask-color) 0 0 0 0.5rem;
			background-color: var(--mask-color);
		}

		&:not([open]) {
			margin-top: calc(var(--gap) * -1);
			margin-bottom: calc(var(--gap) * -1);
			padding-top: calc(var(--gap) * +1);
			padding-bottom: calc(var(--gap) * +1);
		}

		> summary {
			width: fit-content;
			cursor: pointer;
		}

		&:not([open]) > summary {
			color: var(--disable-color);
		}
	}

	table.normal {
		margin: 1em 0;
		border-collapse: collapse;

		> tr > *,
		> * > tr > * {
			padding: 0.5ex 0.5ch;
			border: thin solid var(--edge-color);
		}

		> tr > th,
		> * > tr > th {
			font-weight: normal;
			background-color: var(--fill-color);
		}

		& > caption::before {
			content: "[";
		}

		& > caption::after {
			content: "]";
		}
	}

	figure.normal {
		margin: 1rem 0;
		text-align: center;

		& > img,
		& > iframe {
			box-sizing: border-box;
			max-width: 100%;
			border: thin dashed hsla(0, 0%, 0%, 0.25);
			vertical-align: bottom;
		}

		& > figcaption {
			margin-top: 0.5em;
		}

		& > figcaption::before {
			content: "[";
		}

		& > figcaption::after {
			content: "]";
		}
	}

	@media screen and (prefers-color-scheme: dark) {
		aside.normal {
			&::before { 
				background-image: url("img/book_dark.svg");
			}

			&.moan::before {
				background-image: url("img/unhappy.svg");
				filter: saturate(20%) brightness(85%);
			}
		}
	}

	@media screen and (prefers-color-scheme: dark) {
		figure.normal > iframe {
			/* 背景色の輝度をライトモードと同程度に設定。*/
			background-color: hsl(0, 0%, 90%);
			/* 背景色の急激な輝度変化を緩和する設定。*/
			filter: brightness(0.85);
			/* 枠線のスタイルを周囲に馴染むよう設定。*/
			border: thin solid hsl(0, 0%, 50%);
			border-radius: 0.3rem;
		}
	}
}

@layer semantic {
	body > header > h1 {
		display: table;
		font-size: 1rem;
		font-weight: normal;
		margin-bottom: 2rem;
		border: thin dashed red;
		padding: 1ex 1em;
	}

	section, body > * {
		max-width: calc(var(--base-width-size) + 1px);
	}

	section:has(> h1),
	section:has(> hgroup > h1) {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

	section:has(> h2),
	section:has(> h3),
	section:has(> hgroup > h2),
	section:has(> hgroup > h3) {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	section > hgroup {
		margin: 1rem 0;

		> div.subTitle {
			font-weight: bold;
		}

		> div.subTitle::before,
		> div.subTitle::after {
			content: " 〜 ";
		}
	}

	section > h1,
	section > hgroup > h1 {
		font-size: 1.05rem;
		line-height: normal;
		margin: 1rem calc(var(--gap) * -1);
		padding: 0.5ex var(--gap);
		background-color: var(--header-color);
	}

	section > h2,
	section > h3,
	section > hgroup > h2,
	section > hgroup > h3 {
		font-size: 1rem;
		margin: 1rem calc(var(--gap) * -1);
		padding: 0 var(--gap);
	}

	section:not(h1 + *, hgroup + *) > h2,
	section:not(h2 + *, hgroup + *) > h3 {
		border-top-style: dashed;
		border-top-width: thin;

		&:not(.noTitle) {
			padding-top: 1rem;
		}
	}

	section:not(h1 + *, hgroup + *) > h2 {
		border-color: var(--fg-color);
	}

	section:not(h2 + *, hgroup + *) > h3 {
		border-color: var(--base1-color);
	}

	section > section > h1::before,
	section > section > hgroup > h1::before {
		content: "> ";
	}

	section > section > section > h1::before,
	section > section > section > hgroup > h1::before {
		content: ">> ";
	}

	section > h2:not(.noTitle)::before {
		content: "■ ";
	}

	section > h3:not(.noTitle)::before {
		content: "▶ ";
	}

	footer > section > dl.links {
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 1ch;

		> dd {
			margin-left: 0;
		}
	}

	hr.split {
		border-style: dashed none none;
		border-width: thin;
		margin: 1rem 0;
	}

	@media screen {
		section:has(> h1) section:has(> h1),
		section:has(hgroup > h1) section:has(> h1),
		section:has(hgroup > h1) section:has(hgroup > h1) {
			transition: margin-left 1s, margin-right 1s;
		}
	}

	@media all and (width > 56rem) {
		section:has(> h1) section:has(> h1),
		section:has(hgroup > h1) section:has(> h1),
		section:has(hgroup > h1) section:has(hgroup > h1) {
			margin-left: 1.5rem;
			margin-right: -1.5rem;
		}

		section > section > h1::before,
		section > section > hgroup > h1::before,
		section > section > section > h1::before,
		section > section > section > hgroup > h1::before {
			content: none;
		}
	}
}

@layer code_block {
	pre.command,
	pre.directory,
	pre > code:only-child,
	pre > samp:only-child,
	figure.file {
		display: block;
		margin: 1rem calc(var(--gap) * -1);
		padding: var(--gap);
		border-style: solid;
		border-width: thin;
		border-color: var(--edge-color);
	}

	pre {
		> code:only-child {
			border-radius: 0.5rem;
		}

		> code:only-child,
		> samp:only-child {
			background-color: var(--code-bg-color);
			overflow: auto;
			scrollbar-width: thin;
		}

		> code:only-child::before,
		> samp:only-child::before {
			content: "";
			display: block;
			margin-top: -1lh;
		}
		
	}

	/* ディレクトリ構成。*/
	pre.directory {
		line-height: normal;
		border-color: var(--base0-color);
	}

	/* コマンドの構文説明。*/
	pre.command {
		border-radius: 0.5rem;
		overflow: auto;
		scrollbar-width: thin;
		background-color: var(--code-bg-color);
	}

	/* ソースコード。*/
	pre > code[class|="language"] {
		mark.error {
			color: inherit;
			background-color: transparent;
			text-decoration: wavy underline hsla(5, 90%, 60%, 0.6);
			text-decoration-skip-ink: none;
		}

		mark.warn {
			color: inherit;
			background-color: transparent;
			text-decoration: wavy underline hsla(60, 50%, 40%, 0.8);
			text-decoration-skip-ink: none;
		}
	}

	/* コンソール。*/
	pre > code[class|="console"] {
		mark.prompt {
			font-weight: bold;
			background-color: initial;
		}
	}

	/* 疑似コード。*/
	pre > code.pseudoCode {
		/* 数式用に行を拡張。*/
		line-height: 1.7rem; 
	}

	/* pre の効果の部分的解除 */
	span.nopre {
		white-space: initial;

		/* 先頭の空白類文字の空間を打ち消す。*/
		&::before {
			content: " ";
			font-size: 0;
		}
	}

	/* ファイル名付きコードブロック。*/
	figure.file {
		padding: 0;
		border-radius: 0.5rem;
		background-color: var(--neutral1-color);

		> figcaption {
			font-family: var(--mono-font);
			padding: 0.5ex var(--gap);
			border-bottom: solid thin;
			border-bottom-color: var(--edge-color);
		}

		> pre,
		> pre > code {
			margin: 0;
			border-style: none;
		}

		> pre > code {
			width: auto;
			border-top-style: none;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
	}

	@media (prefers-color-scheme: light) {
		pre > code.pseudoCode mark.kw {
			color: hsla(240, 90%, 60%, 0.8);
			background-color: initial;
		}
	}

	@media (prefers-color-scheme: dark) {
		pre > code.pseudoCode mark.kw {
			color: hsla(240, 80%, 75%, 0.8);
			background-color: initial;
		}
	}
}

@layer figures {
	div.cmpFigure {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: calc(var(--gap) * 2);
		margin: 1rem 0;
	}

	div.cmpFigure > figure.normal {
		margin: 0;
	}

	div.cmpFigure.center > figure.normal:nth-child(1) {
		justify-self: right;
	}

	div.cmpFigure.center > figure.normal:nth-child(2) {
		justify-self: left;
	}

	div.cmpFigure.full {
		width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	div.cmpFigure.full > figure.normal {
		width: calc((var(--base-width-size) - var(--gap) * 2) / 2);
	}

	div.cmpFigure.full > figure.normal > *:not(figcaption) {
		width: 100%;
	}
}

@layer ui {
	:root {
		--jumpAnim: jumpHighlight 1.5s linear;

		scroll-behavior: smooth;

		/* -- 右スクロールバーは常に表示 --
		 * 右サイドバーとしてページ遷移用のナビゲーションを表示したい。ページ
		 * スクロールバーは右側に表示されるため、その有無がこの位置に影響する。
		 * ページ遷移ボタンの位置が毎回変わると、連続して押下しにくくなる。*/
		overflow: auto scroll;
	}

	*:target {
		animation: var(--jumpAnim);
	}

	@keyframes jumpHighlight {
		0% { background-color: #F84; }
	}
}

@layer util {
	*.none {
		display: none !important;
	}

	*.todo {
		color: var(--x-color);
	}

	*.mt {
		font-family: var(--mono-font);
	}

	*.nw {
		white-space: nowrap;
	}
}

@layer loading {
	doc-quote:not(:defined),
	doc-quote:not(:defined) ~ *,
	:has(doc-quote:not(:defined)) ~ *,
	doc-quote:state(loading),
	doc-quote:state(loading) ~ *,
	:has(doc-quote:state(loading)) ~ * {
		display: none;
	}
}