/***** 全般設定 *****/

	/* HTML5 Reset CSS */
main,
header,
nav,
section,
aside,
footer,
figure,
figcaption {
	display: block;
}
time {
	display: inline;
}

	/* 色 */
:root {
	color-scheme: light dark;
	/* 中立色 */
	--N-color: oklch(0.75 0 0); /* 中間明度 */
	--pale-color: light-dark( oklch(0.9 0 0), oklch(0.418 0 0) ); /* 淡い枠線，やや濃い背景 */
	--deep-color: light-dark( oklch(0.418 0 0), oklch(0.9 0 0) ); /* 濃い枠線，ごく濃い背景 */
	/* 呈示用 
R=赤系 G=緑系 B=青系 O=橙系 Y=黄系 V=紫系 C=青緑系
oklch 色相：
	R=29.23 G=142.4953 B=264.052 C=194.7689 M=328.36 Y=109.77 
	*/

	--K-color: light-dark( black, white );
	--W-color: light-dark( white, black );
	--R-color: light-dark( oklch(0.5 0.22 29), oklch(0.87 0.22 29) );
	--G-color: light-dark( oklch(0.5 0.22 142), oklch(0.87 0.22 142) );
	--B-color: light-dark( oklch(0.5 0.22 264), oklch(0.87 0.22 264) );
	--O-color: light-dark( oklch(0.5 0.22 71), oklch(0.87 0.22 71) );
	--Y-color: light-dark( oklch(0.5 0.22 109), oklch(0.87 0.22 109) );
	--V-color: light-dark( oklch(0.5 0.22 328), oklch(0.87 0.22 328) );
	--C-color: light-dark( oklch(0.5 0.22 195), oklch(0.87 0.22 195) );
	--R-bg: light-dark( oklch(0.96 0.09 29), oklch(0.36 0.09 29) );
	--G-bg: light-dark( oklch(0.96 0.09 142), oklch(0.36 0.09 142) );
	--B-bg: light-dark( oklch(0.96 0.09 264), oklch(0.36 0.09 264) );
	--O-bg: light-dark( oklch(0.96 0.09 71), oklch(0.36 0.09 71) );
	--Y-bg: light-dark( oklch(0.96 0.09 109), oklch(0.36 0.09 109) );
	--V-bg: light-dark( oklch(0.96 0.09 328), oklch(0.36 0.09 328) );
	--C-bg: light-dark( oklch(0.96 0.09 195), oklch(0.36 0.09 195) );

	/* 背景色 */
	--highlight-bg-color: light-dark( oklch(0.96 0.21 80), oklch(0.40 0.088 80) );
	--bg-color-1: light-dark( oklch(0.96 0 0), oklch(0.22 0 0) );

	/* テキスト */
	--heading-color:
		CanvasText; /* 見出し */
	--dim-color: /* 薄めなテキスト */
		light-dark( oklch(0.60 0 0), oklch(0.80 0 0) );
	--dfn-color: /* dfn */
		light-dark( oklch(0.37 0.15 29), oklch(0.92 0.07 29) );
	--literal-color-2: /* 文字列, 一部の仕様 */
		light-dark( oklch(0.57 0.29 29), oklch(0.80 0.20 29) );
	--comment-color: /* コードブロック内のコメント*/
		light-dark( oklch(0.52 0.15 144), oklch(0.89 0.12 144) );
	--value-color: /* var, 値 */
		light-dark( oklch(0.436 0.12 32), oklch(0.87 0.07 32) );
	--html-color: /* 要素, 内容属性 */
		light-dark( oklch(0.48 0.17 25), oklch(0.80 0.081 25) );
	--css-color: /* CSS コード, プロパティ */
		light-dark( oklch(0.45 0.12 240), oklch(0.87 0.12 240) );
	--css-color-2: /* CSS 記述子 */
		light-dark( oklch(0.45 0.12 174), oklch(0.87 0.12 174) );
	--prod-color: /* 生成規則 */
		light-dark( oklch(0.32 0.125 30), oklch(0.78 0.125 30) );
	--js-color: /* JS 構成子 */
		light-dark( oklch(0.42 0.13 144), oklch(0.87 0.13 144) );
	--http-field-color: /* HTTP field, method */
		light-dark( oklch(0.29 0.20 264), oklch(0.87 0.071 264) );
	--text-color-0: /* コード全般, dom */
		light-dark( oklch(0.55 0.19 33), oklch(0.764 0.15 33) );
	--text-color-1: /* protocol 要素（RFC code 全般）, 疑似 class, event 型 */
		light-dark( oklch(0.42 0.19 328), oklch(0.862 0.19 328) );
	--text-color-2: /* http status code, 他 */
		light-dark( oklch(0.42 0.15 160), oklch(0.86 0.15 160) );
	--text-color-3: /* 例外, url scheme 他 */
		light-dark( oklch(0.42 0.12 152), oklch(0.86 0.12 152) );
	--text-color-4: /* directive 他 */
		light-dark( oklch(0.32 0.09 40), oklch(0.85 0.09 40) );

	/* 各種ブロック */
	/* IDL */
	--idl-color: light-dark( black, white );
	--idl-bg-color: light-dark( oklch(0.96 0.03 240), oklch(0.29 0.07 240) );
	--idl-border-color: light-dark( oklch(0.82 0.08 240), oklch(0.57 0.10 240) );
	/* 課題 */
	--issue-bg-color: light-dark( oklch(0.96 0.019 15), oklch(0.22 0.0686 15) );
	--issue-border-color: light-dark( oklch(0.629 0.18 15), oklch(0.571 0.212 15) );
	/* 警告 */
	--warning-bg-color: light-dark( oklch(0.96 0.02 15), oklch(0.286 0.1 15) );
	--warning-border-color: light-dark( oklch(0.629 0.18 15), oklch(0.486 0.18 15) );
	/* 注記 */
	--note-bg-color: light-dark( oklch(0.96 0.03 145), oklch(0.286 0.083 145) );
	--note-border-color: light-dark( oklch(0.802 0.18 145), oklch(0.592 0.1886 145) );
	/* 例 */
	--example-bg-color: light-dark( oklch(0.979 0.02 100), oklch(0.298 0.053 100) );
	--example-border-color: light-dark( oklch(0.838 0.141 100), oklch(0.679 0.1321 100) );
	--example-label-color: light-dark( oklch(0.74 0.145 100), oklch(0.74 0.145 100) );
	/* 告知 */
	--advisement-bg-color: light-dark( oklch(0.954 0.048 73), oklch(0.386 0.081 73) );
	--advisement-border-color: light-dark( oklch(0.80 0.1705 73), oklch(0.68 0.144 73) );

	/* 見本コード */
	--sample-bg-color:
		light-dark( oklch(0.97 0.02 67), oklch(0.25 0.07 67) ); /* js, 既定 */
	--sample-bg-color-1:
		light-dark( oklch(0.97 0.035 103), oklch(0.38 0.07 103) ); /* css, html */
	/* BNF, ABNF */
	--bnf-bg-color: light-dark( oklch(0.97 0.014 258), oklch(0.20 0.067 258) );
	--bnf-border-color: light-dark( oklch(0.75 0.075 258), oklch(0.424 0.103 258) );

	/* UI */
	--panel-bg-color: light-dark( oklch(0.927 0.035 270), oklch(0.25 0.146 270) );
	/* 訳注 */
	--trans-note-color: light-dark( oklch(0.376 0.12 140), oklch(0.84 0.12 140) );
	--trans-note-bg-color: light-dark( oklch(0.97 0.022 140), oklch(0.283 0.08 140) );

	/* table */
	--table-bg-color: Canvas;
	--table-border-color: var(--N-color);
	--table-rule-color: var(--N-color);
}

	/* フォント */
:root {
	/* 既定の font-family
• 利用する書体は、 UA （利用者の設定）に委ねる。
• 異なる font-family 内に入れ子にされ得るものを戻すためにも利用。
	*/
	--default-font-family: initial;
}

	/*@font-face

@font-face {
	font-family: normal;
	src: local(dummy-undefined);
	unicode-range: U+3000-9FFF, U+ff??;
}

@font-face {
	font-family: "sans-serif1";
	src: local("Tahoma"), local("helvetica"), local("arial");
	unicode-range: U+00-024F;
}
@font-face {
	font-family: testing;
	src: url(__/_UpperEastSide.woff) format("woff");
	unicode-range: U+0000-007F;
}


@font-face {
	font-family: sans-serif0;
	src:
		local(IPAexGothic),
		local("YuGothic Medium"),
		local(YuGo-Medium)
	;
}

@font-face {
	font-family: serif0;
	src:
		local("YuMincho Medium"),
		local(YuMin-Medium),
		local(IPAMonaPMincho Regular),
		local(IPAMonaPMincho)
	;
}

		local(Inconsolata),

*/

@font-face {
	font-family: monospace0;
	src:
		local(Consolas),
		local("Lucida Console"),
		local(Courier),
		local("DejaVu Sans Mono"),
		local(Monaco);
}

@font-face {
	font-family: sans-serif0;
	src:
		local(Tahoma),
		local(helvetica),
		local(arial);
	unicode-range: U+0-24F;
}

/*
@font-face {
	font-family: sans-serif;
	src: local("XXXXX");
	unicode-range: U+30A0-30FF;//katakana
	font-stretch: ultra-condensed;
}
*/


/***** 各種ブロック *****/

	/* 画像等を表現する汎用な図式コンテナ */
x-diagram {
	display: block;
}

pre {
	font-family: monospace0, monospace;
}

.example {
	color: var(--example-color, CanvasText);
	background: var(--example-bg-color, Canvas);
	border-color: var(--example-border-color, var(--N-color));
}
.note {
	color: var(--note-color, CanvasText);
	background: var(--note-bg-color, Canvas);
	border-color: var(--note-border-color, var(--N-color));
}
.issue{
	color: var(--issue-color, CanvasText);
	background: var(--issue-bg-color, Canvas);
	border-color: var(--issue-border-color, var(--N-color));
}
.warning {
	color: var(--warning-color, CanvasText);
	background: var(--warning-bg-color, Canvas);
	border-color: var(--warning-border-color, var(--N-color));
}
.advisement {
	color: var(--advisement-color, CanvasText);
	background: var(--advisement-bg-color, Canvas);
	border-color: var(--advisement-border-color, var(--N-color));
}

dl.domintro {
	color: var(--note-color, CanvasText);
	background: var(--note-bg-color, Canvas);
	padding: 1em 1em;
	border: none;
	font-family: sans-serif0, sans-serif;

	&:before {
		display: inline-block;
		content: '（このブロックは Web 開発者向けであり、規範的ではない。）';
		font-size: smaller;
		position: relative;
		left: -1em; top: -1em;
	}

	> dt, > dt code {
		color: CanvasText;
		text-decoration: none;
	}
	> dt {
		font-family: monospace0, monospace;
	}
}

/***** 上下 margin *****/

table, pre, header, footer, section, nav {
	margin-top: 1em;
	margin-bottom: 1em;
}
header, footer, section, nav {
	margin-top: 2em;
}

header {
	padding: 0 0 1em 0;
	margin-bottom: 2em;
	border-bottom: thin solid var(--N-color);
}

hr {
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin: 2em 0;
	height: auto;
}

	/* 全体 
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml
"Trebuchet MS"
	*/
html {
	font-family: var(--default-font-family);
}

body {
	padding: 2em 1em 2em 3em;
	margin: 0;
	margin-bottom: 50vh;
	color: CanvasText;
	background: Canvas;
	line-height: 1.6;
}

	/*
REC, CR, WD etc. sideways logo (container)
*/
#_sideways-logo {
	display: none;
}
@supports (writing-mode: vertical-rl) {

	#_sideways-logo {
		writing-mode: vertical-rl; /* ideally, sideways-lr */
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		white-space: nowrap;
		font-family: sans-serif0, sans-serif;
		background-color: oklch(0.445 0.1271 253.22); /* #115599 */
		color: white;
		padding-top: 3em;
		padding-bottom: 3em;
		pointer-events: none; /* click 透過 */
	}
}


/***** 目次 *****/
nav.toc li {
	list-style-type: none;
	margin-top: 0;
	margin-bottom: 0;
}
nav.toc ol {
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}
nav.toc li > a {
	display: block;
	border: none;
}

/***** 節 *****/

	/* 見出し */
header {
	> hgroup {
		padding: 1em 0 1em 0;
		* {
			margin: 0;
		}
		> p {
			color: var(--heading-color);
			font-weight: bolder;
			font-size: 120%;
		}
	}
	> details {
		margin-left: 1.5em;
		> summary {
			list-style-position: outside;
		}
	}
}

h1, h2, h3, h4, h5, h6 {
	text-align: left;
	color: var(--heading-color);
	background: transparent;
}

h1 { font-size: 170%; }
h2 { font-size: 140%; }
h3 { font-size: 125%; }
h4 { font-size: 115%; }
h5 { font-size: 110%; }
h6 { font-size: 105%; }

	/* 段落 */
p, div.p {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
p:first-child, div.p:first-child { margin-top: 0;}
p:last-child, div.p:last-child { margin-bottom: 0;}

	/* figure */
figcaption {
	margin: 0.5em 0;
	font-size: 90%;
}

	/* hr */
hr {
	display: block;
	background: none;
	border: none;
	padding: 0;
	margin: 2em 0;
	height: 0;
}

/***** コードブロック *****/

pre {
	background: transparent;
	border-color: transparent;
	white-space: pre-wrap; /* overflow: auto; との2択 */
	line-height: 1.3;
	margin-left: 1em;
	padding: .5em;
}

dd > pre {
	margin-left: 0;
}

/* コード内 コメント */
pre .comment {
	font-family: var(--default-font-family);
	color: var(--comment-color);
	white-space: normal;
}

	/* 呈示／ ascii art 用 */
pre.presentation {
	color: var(--K-color);
	background: var(--W-color);
	border: solid thin var(--pale-color);
	white-space: pre; 
	overflow: auto;
}

	/* IDL */
pre.idl {
	padding: .5em 1em;
	margin: 1.2em 0;
	color: var(--idl-color, CanvasText);
	background: var(--idl-bg-color, Canvas);
	border-left: 0.5em solid var(--idl-border-color, var(--N-color));
}

pre.idl code:not([class]) {
	color: var(--idl-color, CanvasText);
}

	/* idl defs */
.idl-def::before {
	display: block;
	margin-top: 2em;
	color: var(--dim-color);
	content: '— IDL —';
	font-size: small;
}

	/* ABNF, CSS 文法 */
pre.bnf, pre.prod {
	tab-size: 4;
	background: var(--bnf-bg-color);
	border-color: var(--bnf-border-color);
	border-style: solid none;
	border-width: thin;
}
pre.bnf {
	color: var(--text-color-1);
}

	/* 見本コード */
pre.lang-js,
pre.lang-json,
pre.lang-other {
	background: var(--sample-bg-color);
}

pre.lang-css,
pre.lang-html,
pre.lang-xml {
	background: var(--sample-bg-color-1);
}

pre.lang-http {
	background: var(--bnf-bg-color);
	color: var(--http-field-color);
}

	/* TODO
	bnf
pre.prod
pre.grammar
 */

/***** 表 *****/
table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption {
	text-align: left;
	padding-left: 2em;
}
tr {
	vertical-align: baseline;
}

th, td {
	text-align: left;
	padding-left: 0.4em;
	padding-right: 0.4em;
}

	/* 各種 定義表（ .propdef, .descdef, .eventdef... ) */
table.def-table {
	border-spacing: 0;
	background: var(--table-bg-color);
	border-left: solid 0.5em var(--table-border-color);

	tr {
		border-top: solid thin var(--table-rule-color);
	}
	th {
		white-space: nowrap;
	}
	td {
		min-width: 16em;
		border-left: solid thin var(--table-rule-color);
	}
}

	/* css property 定義表 */
table.propdef {
	--table-bg-color: light-dark( oklch(0.96 0.03 240), oklch(0.29 0.07 240) );
	--table-border-color: light-dark( oklch(0.82 0.08 240), oklch(0.57 0.10 240) );
	--table-rule-color: light-dark( oklch(0.88 0.05 240), oklch(0.46 0.08 240) );
}

	/* css descriptor 定義表 */
table.descdef {
	--table-bg-color: light-dark( oklch(0.96 0.03 174), oklch(0.29 0.07 174) );
	--table-border-color: light-dark( oklch(0.82 0.08 174), oklch(0.57 0.10 174) ); 
	--table-rule-color: light-dark( oklch(0.88 0.05 174), oklch(0.46 0.08 174) ); 
}

	/* DOM event 定義表 */
table.eventdef {
	--table-bg-color: light-dark( oklch(0.96 0.03 328), oklch(0.29 0.07 328) );
	--table-border-color: light-dark( oklch(0.82 0.08 328), oklch(0.57 0.10 328) );
	--table-rule-color: light-dark( oklch(0.88 0.05 328), oklch(0.46 0.08 328) );
}

table.elemdef {
	--table-bg-color: light-dark( oklch(0.96 0.03 238), oklch(0.29 0.07 238) );
	--table-border-color: light-dark( oklch(0.82 0.08 238), oklch(0.57 0.10 238) );
	--table-rule-color: light-dark( oklch(0.88 0.05 238), oklch(0.46 0.08 238) );
}

@supports (grid-template-columns: subgrid) and (display: contents) {

.grid-table {
	display: grid;
	> tbody, > thead, > tfoot {
		display: contents;
	}
	> caption {
		display: block;
		grid-column: 1 / -1;
	}
	tr {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		border-top: none;
		border-bottom: solid medium var(--N-color);
		> * {
			display: block;
			border: solid thin var(--N-color);
			border-width: thin 0 0 thin;
		}
	}
	> thead > tr {
		border-bottom-color: var(--N-color);
	}
}
}

/***** 画像 *****/
img {
	display: inline-block;
	max-width: 100%;
	object-fit: contain;
}

	/* 外部代替テキスト（主に img 用） */
.alt {
	background: var(--B-bg);
	font-size: 90%;
	&::before {
		color: var(--dim-color);
		content: '（代替テキスト）';
	}
}

	/* tracking-vector */
.fingerprinting:hover,
.fingerprinting {
	display: inline-block;
	width: 46px;
	height: 64px;
	float: right;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NiA2NCIgc3R5bGU9ImNvbG9yLXNjaGVtZTogbGlnaHQgZGFyazsiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjMsMiwzNSwyLDIwLDIiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMiAyM1ExNyAtMTYgNDAgMTJNMSAzNVExNyAtMjAgNDMgMjBNMiA0MFExOCAtMTkgNDQgMjVNMyA0M1ExOSAtMTYgNDUgMjlNNSA0NlEyMCAtMTIgNDUgMzJNNSA0OVExMSA0MCAxNSAyN1QyNyAxNlQ0NSAzN001IDQ5UTE1IDM4IDE5IDI1VDM0IDI3VDQ0IDQxTTYgNTJRMTcgNDAgMjEgMjhUMzIgMjlUNDMgNDRNNiA1MlEyMSA0MiAyMyAzMVQzMCAzMlQ0MiA0N003IDU0UTIzIDQ3IDI0IDM2VDI4IDM0VDQxIDUwTTggNTZRMjYgNTAgMjYgMzVRMjggNDggNDAgNTNNMTAgNThRMjQgNTQgMjcgNDVRMzAgNTIgMzggNTVNMjcgNTBRMjggNTMgMzYgNTdNMjUgNTJRMjggNTYgMzEgNTdNMjIgNTVMMjYgNTdNMTAgNThMMzcgNTdNMTMgNjBMMzIgNjBNMTYgNjJMMjggNjMiLz4KPC9zdmc+Cg==")
	/* https://resources.whatwg.org/tracking-vector.svg */
	no-repeat;
}


/***** リスト *****/

dl, li, ol {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

	/* 無順序 */
ul > li {
	list-style-type: disc;
}
	/* 有順序 */
ol > li {
	list-style-type: decimal;
}

	/* 定義リスト */
dt {
	font-weight: bold
}
dt + dd {
	margin-top: 0.25em;
}
dd + dt {
	margin-top: 0.5em;
}
dd {
	margin-bottom: 0.5em;
}

	/* 分岐リスト */
ul.switch > li,
ol.switch > li {
	list-style-type: "\21AA\00A0";
}

dl.switch > dt {
	font-weight: normal;
	&::before {
		content: "\21AA\00A0";
	}
}

.def-list > dt::before {
	content: "• ";
	color: var(--dim-color);
}

	/* アルゴリズム用（ ol, ul には利用不可） */

.algo {
	padding: .5em 0 .5em .5em;
	border: solid thin var(--pale-color);
	border-right: none;
	border-radius: .5em 0 0 .5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* TODO
ol.algo { padding-left: 2em; } （付番用のアキ）
*/

	/* 行内整形用 */
span.block {
	display: block;
	margin-left: 2em;
}

.preline {
	white-space: pre-line;
}


/***** 行内 *****/
samp {
	font-family: monospace0, monospace;
}

code {
	font-family: monospace0, monospace;
	color: var(--text-color-0);
}

b {
	font-family: sans-serif0, sans-serif;
}

	/* 変数 */
var {
	color: var(--value-color);
	font-weight: normal;
	/* font-family: Tahoma, helvetica, arial, sans-serif;... */
	white-space: nowrap;
	word-spacing: -40%; /*	text-transform: capitalize; camelcase が欲しい */
}

	/* リンク */

/* waiting for support of:
	@media (hover) { }
	:local-link
	text-decoration-*


*/

:link, :visited {
	text-decoration: underline;
	text-decoration-color: var(--dim-color);
	color: inherit;
}

a:active {
	background: var(--highlight-bg-color);
}

a:hover {
	background: var(--highlight-bg-color);
}
		/* 相対リンク */
a[href] {
}
		/* 局所リンク */
a[href^="#"] {
	text-decoration-style: dotted;
}
		/* 絶対リンク */
a[href^="http:"],
a[href^="https:"],
a[href^="mailto:"] {
	text-decoration-style: double;
}

	/* リンクターゲット */
*:target {
	background: var(--highlight-bg-color);
}
		/* 節／目次は巨大なので見出しをターゲットにする */
nav:target,
section:target {
	background: transparent;
	outline: none; /* 処理能 対策 */
	> *:first-child {
		background: var(--highlight-bg-color);
	}
}

	/* 用語定義 */
dfn {
	font-weight: bolder;
	font-style: italic;
	color: var(--dfn-color);
}

	/* MUST, SHOULD, MAY etc. */
em.rfc2119 {
	border-bottom: thin dashed var(--dim-color);
}

mark {
	color: currentcolor;
	background: var(--highlight-bg-color);
}
	/* 演算子 */
.op {
	color: CanvasText;
	font-family: sans-serif;
/*	font-weight: bold;*/
}

/***** 共通なデータ型 ******/

	/* exception */
.error {
	color: var(--text-color-3);
}

	/* production */
.production,
.prod {
	color: var(--prod-color);
}

	/* url scheme */
.scheme {
	color: var(--text-color-3);
}

	/* 文字列 */
.literal {
	color: var(--dim-color);
}

	/* 符号位置 */
.code-point {
	font-family: sans-serif0, sans-serif;
}
		/* 名 */
.cp-name {
	color: var(--dim-color);
	font-family: sans-serif0, sans-serif;
	font-size: 90%;
}
		/* グリフ */
.char-symbol {
	color: var(--dim-color);
	font-family: monospace;
}
		/* 16 進値 */
.hex-value {
	font-family: sans-serif0, sans-serif;
}

		/* Unicode character property */
.char-prop {
	font-family: serif0, serif;
	color: var(--text-color-2);
}

	/* HTTP */
		/* HTTP header, method, status code */
.header, .method {
	color: var(--http-field-color);
	font-weight: bold;
}

.status {
	color: var(--text-color-2);
}

.directive {
	color: var(--text-color-4);
}

		/* protocol element */
.protocol {
	color: var(--text-color-1);
	font-family: monospace0, monospace;
}

	/* event */
.event-type {
	color: var(--text-color-1);
}

	/* JS */
.js-slot,
.js-value,
.js-intrinsic,
.js-symbol,
.js-class,
.js-type,
.js-other {
	color: var(--js-color);
}

	/* 抽象演算 */
.abstract {
	color: var(--js-color);
	font-family: sans-serif0, sans-serif;
}

	/* HTML 要素, 内容属性 */
.element, .attr {
	color: var(--html-color);
}

	/** CSS
.type:     value types
.at-rule:  at rules
.property: property names
.descriptor: descriptornames
.value:    property values
.pseudo    pseudo-class, pseudo-element
.unit:     unit identifier
.production: production in grammar
.func:     functional notations
.css       other constructs
*/

.css,
.at-rule,
.property,
.descriptor,
.pseudo,
.prod,
.production,
.type,
.unit,
.func,
.value {
	font-family: monospace0, monospace;
}

.css,
.unit,
.at-rule,
.property {
	color: var(--css-color);
}

.descriptor {
	color: var(--css-color-2);
}

.property {
	white-space: nowrap;
}

.pseudo {
	color: var(--text-color-1);
}

.func,
.value {
	color: var(--value-color);
}

.type {
	font-style: italic;
}

/***** 翻訳用 *****/
	/* 
_en クラスは、既定では表示されない原文を指示する。
表示されるときは 一部を除き display: block に強制するので、
table などには利用しないこと（ div で包装すること）
*/
._en {
	display: none;
	background-color: var(--B-bg);
	color: var(--deep-color);
	line-height: 1.2em;
	margin-top:2px;
}

span._en {
	white-space: pre-line;
}

pre._en {
	font-family: monospace0, monospace;
	padding: 0;
	margin: 0;
}

.show-original ._en {
	display: block;
}

.show-original tr._en {
	display: table-row;
}

#_site_nav {
	position: absolute;
	top: 0;
	left: 3em;
	background: var(--pale-color);
	margin: 0;
	padding: 0.5em 1em;
	white-space: nowrap;
	overflow: hidden;
	max-width: calc(100% - 6em);

	&::before {
		content: '目次：';
	}
	> li {
		display: inline;
	}
	> li:not(:first-child)::before {
		content: " | ";
	}
	> li:first-child::before {
	}
}

	/* 訳注 .trans-note a */
.trans-note {
	color: var(--trans-note-color);
	background: var(--trans-note-bg-color);
	font-family: var(--default-font-family);
	font-style: normal;
	font-weight: normal;
}
p.trans-note {
	padding: 0.3em 0.5em;
}

		/* 参照文献 日本語訳*/
.trans-ja-refs a {
	margin-right: 0.5em;
	background: var(--trans-note-bg-color);
}


/***** 付帯機能用 *****/

@media screen {

	/* 逆参照パネル */
*[data-cycling], dfn[id], dt[id] {
	cursor: pointer;
}
section[id] {
	> h1, > h2, > h3, > h4, > h5 {
		cursor: pointer;
	}
}

#_dfnPanel {
	display: inline;
	/*
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
top, left ... を指定しなければ（ auto ）親に対し相対的な位置（ top は static position ）
	*/
	position: absolute;
	margin-top: 2em;
	z-index: 10;
	height: auto;
	min-width: 18em;
	max-width: 70vw;
	padding: 0.5em 0 0.5em 0.75em ;
	font: small sans-serif;
	background: var(--panel-bg-color);
	color: CanvasText;
	border: outset 0.2em;
	text-indent: 0; /* dl.switch */

	> ul {
		max-height: 45vh;
		overflow: auto;
	}

	/*
	input[type="button"] {
		display: none;
	}
	#_dfnPanel._fixed input[type="button"] {
		display: inline;
	}
	*/
	/* クリック後の状態 */
	&._fixed {
		position: fixed;
		bottom: 2.5em;
		right: 2em;
	}
	
	> *:first-child {
		font-weight: bold;
		white-space: pre-wrap;
	}
	/*
	> *:first-child::after {
		content: " の参照元：";
	}
	*/

	* {
		margin: 0;
		padding: 0;
	}
	ul.empty::before {
		content: "なし";
		color: var(--dim-color);
		font-style: italic;
	}
	li {
		list-style-type: none;
		line-height: 1.1em;
		white-space: pre-line;
	}
	li > a {
		border: outset 2px var(--pale-color);
		background: var(--bg-color-1);
		padding: 2px;
		display: inline-block;
		min-width: 1.5em;
		text-align: center;
		margin-left: 1px;
	}
	li > a:first-child {
		display: inline-block;
		vertical-align: top;
		white-space: nowrap;
		overflow: hidden;
		max-width: 16em;
		text-overflow: ellipsis;
	}
}

.highlight {
	outline: solid thin var(--R-color);
}

	/* 索引 パネル */

#_index_table {
	position: fixed;
	z-index: 5;
	margin: 0; padding: 0;
	top: 0; right: 0; bottom: 0;
	width: 8.5em;
	background: var(--panel-bg-color);

	&:hover {
		width: 16em;
	}
	> button {
		width: 100%;
	}
	> div {
		position: absolute;
		top: 2em; right: 0; bottom: 0; left:0;
		overflow: auto;
		padding-left: 0.5em;
		> * {
			display: block;
			white-space:nowrap;
		}
		> *.code {
			font-family: monospace0, monospace;
			color: var(--text-color-0);
		}
	}
}

	/* 表示制御パネル */
#_view_control {
	position: fixed;
	z-index: 3;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: small;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	outline: solid thin transparent;
	background: transparent;

	> * {
		visibility: hidden;
		padding: 0;
	}
	&::before {
		content: "切替";
		display: inline-block;
		background: var(--panel-bg-color);
		padding: 3px;
		margin: 0;
		outline: solid thin CanvasText;
	}

	&._hoverd, &:hover {
		outline-color: CanvasText;
		background: var(--panel-bg-color);

		&::before {
			outline: none;
		}
		> * {
			visibility: visible;
		}
	}
}

	/* 日本語訳リンク */
#_ja_link {
	font-family: var(--default-font-family);
	background: var(--trans-note-bg-color);
	color: var(--trans-note-color);
	font-weight: normal;
}

/* 原文の同じ箇所を指すリンク */
#_dfnPanel ._additional {
	margin-left:1em;
}

	/* 内容生成 */

body::before {
	display: block;
	content: '読み込み／生成中…この表示が消えない場合はどこかでエラーが生じています';
	color: var(--R-color);
}
body._expanded::before {
	content: none;
}

	/* 動作テスト用 */
._test {
	color: var(--trans-note-color);
	background: var(--trans-note-bg-color);
	border: ridge medium var(--N-color);
	padding: 0.5em;
}


	/* 目次メニュー化*/

/* waiting for @media (hover) { } support... */

	/* 現在表示中の節 */
._intersecting {
	background: var(--pale-color);
}

body.side-menu {
	padding-right: 9em;/* 1em + 8em */
}

body.side-menu nav.toc {
	width: 8em;
	margin: 0;
	padding: 0;
	padding-left: 0.5em;
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 2;
	background: Canvas;
	border-left: solid thin var(--N-color);
	overflow: auto;
	overscroll-behavior: contain;

	&:hover {
		width: auto;
		min-width: 8em;
		max-width: 40%;
		z-index: 4;
	}
	> h2 {
		font-size: 1em;
		white-space: pre;
	}
	ol,
	li {
		margin-left: 0;
		padding-left: 0;
	}
	> ol {
		white-space: pre;
		white-space: nowrap;
		margin: 0;
		padding: 0;
	}
}

} /*@media screen*/



/***** 印刷用 *****/

@media print {

	._test,
	#_dfnPanel,
	#_view_control,
	._additional {
		/* see common.js*/
		display: none;
	}

	pre, table {
		page-break-inside: avoid;
	}

	pre {
		white-space: pre-wrap;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
}


	/* W3C logo image 
	http://www.w3.org/Icons/w3c_home
	float: right;
	*/
#_W3C {
	display: inline-block;
	text-decoration: none; /* suppress link underlines */
	float: right;
	color: transparent;
	width: 90px;
	height: 60px;
	background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZwoJdmVyc2lvbj0iMS4xIgoJeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgoJdmlld0JveD0iLTEzIC05IDE4MCAxMjAiCj4KPCEtLSAwIDAgMTU0IDEwMyAtLT4KCjxyZWN0Cgl4PSItMTMiIHk9Ii05IiByeD0iMTAiIHJ5PSIxMCIKCXdpZHRoPSIxODAiIGhlaWdodD0iMTIwIgoJZmlsbD0iIzAwNUE5QyIKCXN0cm9rZT0ibm9uZSIKLz4KCjwhLS1XMy0tPgo8cGF0aAoJZmlsbD0ibm9uZSIKCXN0cm9rZT0id2hpdGUiCglzdHJva2Utd2lkdGg9IjkiCglkPSIKTTUsMTIgbDE5LjIsNjQgbDE0LjEsLTQ3Ck0zMy41LDEyIGwxOS4yLDY0IGwxOS4yLC02NApNNzAsMTguNSBoMjggbC0xNywyOSB2MwpNODAsNDYgYzMsMCAxOSwwIDE5LDIwCmMwLDUgLTIsMTkgLTE1LDE5CmMtMiwwIC0xMCwwIC0xNSwtMTIKIiAvPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDVBOUMiIHN0cm9rZS13aWR0aD0iNCIKCWQ9IgpNMCwxMiBoMTA1LjUgdjEwCk0wLDkyIGgxMjAKIiAvPgoKPCEtLUMtLT4KPHBhdGgKCWZpbGw9IndoaXRlIgoJc3Ryb2tlPSJub25lIgoJdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIsLTUpc2NhbGUoMC44KSIKCWQ9IgptIDE4MC45NywyMy44OCAxLjk5LDEyLjA5IC03LjA0LDEzLjQ3CkMgMTYwLjAyLDIxLjY0IDEzOC4wNCw0OC42OSAxNDMuMzcsNzkuMDggMTM1Ljc5LDYzLjY2IDEzOS4wNiw0NC4wMCAxNDYuMDgsMzMuNDIgMTUyLjk3LDIzLjA0IDE2NS4wOSwyMS4yMiAxNzQuMDQsMzcuNzEgegpNIDE4MS44NCw5Mi4yOQpjIC0xMi4xMiwyMi41NSAtMzMuMzgsMjQuNjMgLTQ3LjAzLC0xLjc4IDcuOTgsMjkuNjcgMzMuMTcsNDAuMDUgNDguODIsMTEuMTIgeiIgLz4KPHRleHQKCWZpbGw9IndoaXRlIgoJc3Ryb2tlPSJub25lIgoJdGV4dC1hbmNob3I9Im1pZGRsZSIKCXRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCwyMikiCglmb250LXNpemU9IjE0Igo+wq48L3RleHQ+Cgo8L3N2Zz4K") no-repeat;
}


/* 媒体対応 */

@media all and (max-width: 45em) {
	body {
		padding: 1em 0.5em 1em 1em;
	}
	#_sideways-logo {
		font-size: 0.5em;
	}

	/* UA style (40px) を上書き */
	dd {
		margin-left: 1.5em;
	}
	ol, ul {
		padding-left: 1.5em;
	}
}