@charset "utf-8";

/*
 * cti.li のサイト全体のスタイル。
 * 値は DESIGN.md のトークンに対応する。増やすときはあちらも直すこと。
 */

:root {
	--canvas: #0B1410;
	--surface: #FFFFFF;
	--surface-muted: #F4F7F5;
	--surface-sunken: #E9EFEA;
	--ink: #10201A;
	--ink-muted: #4A5A52;
	--ink-faint: #7C8A83;
	--line: #DCE4DE;
	--line-strong: #C2CEC6;
	--accent: #1FA84A;
	--accent-hover: #178C3D;
	--accent-soft: #E6F5EA;
	--accent-ink: #FFFFFF;
	--focus: #5ED47F;
	--danger: #B3261E;
	--danger-soft: #FDF0EF;

	--sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-full: 999px;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
	--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
}

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

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

body {
	margin: 0;
	/* 画面を使い切る。地は縁に細く見えていればよい。
	   読みやすさは面の中の 78ch の制限で保つ。 */
	padding: var(--s2) var(--s2) var(--s4);
	background-color: var(--canvas);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: .01em;
	/* 日本語の字面が詰まって見えるのを和らげる */
	font-feature-settings: "palt" 1;
}

/* ---------------- 頭 ---------------- */

div.head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s5);
	margin: 0 0 var(--s2);
	padding: var(--s2) var(--s4);
}
div.head h1 {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	letter-spacing: -.03em;
}
div.head h1 a:link,
div.head h1 a:visited,
div.head h1 a:active,
div.head h1 a:hover {
	color: var(--surface);
	text-decoration: none;
	border: none;
	padding: 0;
}

div.head .nav {
	display: flex;
	gap: var(--s1);
	margin-inline-start: auto;
}
div.head .nav a:link,
div.head .nav a:visited,
div.head .nav a:active {
	padding: var(--s2) var(--s4);
	border: none;
	border-radius: var(--r-full);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	text-decoration: none;
}
div.head .nav a:hover {
	background-color: rgba(255, 255, 255, .12);
	color: var(--surface);
}

/* ---------------- 面 ---------------- */

div.content {
	margin: 0;
	padding: var(--s5) var(--s6);
	background-color: var(--surface);
	border-radius: var(--r-xl);
	color: var(--ink);
}
/* 本文は目が戻れる幅に留める。道具の窓は幅いっぱいでよい。 */
div.content > p,
div.content > ul,
div.content > ol,
div.content > dl,
div.content > blockquote {
	max-width: 78ch;
}

div.content a:link,
div.content a:visited,
div.content a:active {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-soft);
	padding-bottom: 1px;
}
div.content a:hover {
	color: var(--accent-hover);
	border-bottom-color: currentColor;
}

/* ---------------- 見出し ---------------- */

h2 {
	margin: var(--s7) 0 var(--s3);
	padding: 0;
	border: none;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: var(--ink);
}
h2:first-child { margin-top: 0; }
/* 見出しの頭に短い印を置く。罫で全幅を切るより静か。 */
h2::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: .85em;
	margin-inline-end: .6em;
	border-radius: var(--r-full);
	background-color: var(--accent);
	vertical-align: -.08em;
}
h3 {
	margin: var(--s5) 0 var(--s2);
	padding: 0;
	border: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}

p { margin: 0 0 var(--s4); }

ul, ol { padding-inline-start: 1.4em; margin: 0 0 var(--s4); }
ul li { list-style-position: outside; margin-bottom: var(--s1); }
dl { margin: 0 0 var(--s4); }
dt { font-weight: 700; margin-top: var(--s3); }
dd { margin: 0 0 0 var(--s4); color: var(--ink-muted); }

pre {
	margin: 0 0 var(--s4);
	padding: var(--s4);
	background-color: var(--surface-muted);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-x: auto;
}
code { font-family: var(--mono); font-size: .92em; }

hr {
	margin: var(--s6) 0;
	border: none;
	border-top: 1px solid var(--line);
}

/* ---------------- 足 ---------------- */

div.foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s4);
	margin: var(--s3) 0 0;
	padding: var(--s2) var(--s4);
	color: rgba(255, 255, 255, .6);
	font-size: 13px;
}
div.foot a:link,
div.foot a:visited,
div.foot a:active {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	border: none;
}
div.foot a:hover { color: var(--surface); }

/* ---------------- 部品 ---------------- */

.notice {
	margin: 0 0 var(--s4);
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line);
	border-left: 3px solid var(--danger);
	border-radius: var(--r-md);
	background-color: var(--danger-soft);
	color: var(--ink);
}

.file-drop {
	padding: var(--s3);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-md);
	text-align: center;
}
.file-drop input[type="file"] { display: none; }
.file-drop button { display: block; margin: var(--s2) auto; }
.file-name { font-weight: 700; }

div.center { text-align: center; }
div.center > * { margin: 0 auto; }

button, input, select, textarea { font: inherit; }

button {
	padding: var(--s2) var(--s5);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background-color: var(--surface);
	color: var(--ink);
	font-size: 13px;
	cursor: pointer;
}
button:hover { background-color: var(--surface-muted); }

select {
	padding: var(--s1) var(--s2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background-color: var(--surface);
	color: var(--ink);
	font-size: 13px;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 読み上げにだけ必要で、目には見せないラベル */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------- タブ(利用方法・旧WEBツール) ---------------- */

.tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	margin: var(--s5) 0 0;
	padding: 0 0 var(--s2);
	border-bottom: 1px solid var(--line);
}
div.content .tab-list a.tab:link,
div.content .tab-list a.tab:visited,
div.content .tab-list a.tab:active {
	padding: var(--s2) var(--s4);
	border: 1px solid transparent;
	border-radius: var(--r-full);
	background-color: var(--surface-muted);
	color: var(--ink-muted);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
div.content .tab-list a.tab:hover {
	background-color: var(--accent-soft);
	color: var(--ink);
}
div.content .tab-list a.tab[aria-selected="true"]:link,
div.content .tab-list a.tab[aria-selected="true"]:visited,
div.content .tab-list a.tab[aria-selected="true"]:active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.tab-panel { padding-top: var(--s4); }
.tab-panel > h2:first-child { margin-top: var(--s4); }

/* ---------------- 狭い画面 ---------------- */

@media (max-width: 760px) {
	body { padding: var(--s1) var(--s1) var(--s3); }
	div.head { gap: var(--s3); padding: var(--s2); }
	div.head h1 { font-size: 30px; }
	div.head .nav { margin-inline-start: 0; }
	div.content { padding: var(--s4) var(--s3); border-radius: var(--r-lg); }
	h2 { margin-top: var(--s6); }
}

/* 道具の画面は、結果を見ながら指定を変えるためのもの。
   画面の高さを頭から足まで縦に分け合い、表示窓が残りを全部取る。
   高さを数え上げて引き算すると必ず取りこぼすので、flexに任せる。 */
body.tool {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--s2);
}
/* ワードマークは道具の並びへ溶かした。別立ての頭は置かない。 */
body.tool div.head { display: none; }
body.tool div.content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: none;
}
body.tool div.foot {
	flex: 0 0 auto;
	margin: var(--s2) 0 0;
	padding: 0 var(--s2);
}