/**
 * コードの見た目（テーマ 1.18.0）。本文のどこでも、エディタの中でも同じ見た目にする。
 *
 * 役割で見た目を分ける（読者が一目で「何をするものか」を分かるように）:
 *   コマンド（lp/command）   端末に打つもの     … 暗い端末。行頭に $（コピーされない）・コピー・危険度の帯
 *   コード（core/code）      ファイルに書くもの … 紙の地。ファイル名・行番号（任意）・コピー
 *   出力（core/code の「出力」スタイル） 端末に出るもの … 端末より一段明るい地。打つものではないのでコピーは出さない
 *   本文中の `code`          文中の語         … 薄い地の囲み
 *
 * 以前はコマンドの CSS がインストールガイドにしか読み込まれず、普通の記事に置くと素の文字になった。
 * コードブロックは装飾が何も無く、本文と見分けがつかなかった。
 *
 * 等幅の書体は必ず並べて指定する。`monospace` だけだと日本語の Windows では MS ゴシックになり、
 * " が ” のように、( が全角のように見える（コマンドを写す読者が間違える）。
 * 日本語の文字（コメント）は BIZ UDゴシック → ヒラギノ → Noto Sans JP に落とす。
 *
 * 大きさはトークンで持つ。公開ページは html が 62.5%（1rem = 10px）、エディタの中は 16px なので、
 * エディタでは px で上書きする（下の .editor-styles-wrapper）。
 */

:root {
	--lp-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, "DejaVu Sans Mono", "BIZ UDGothic", "Hiragino Sans", "Noto Sans JP", monospace;
	--lp-code-fs: 1.45rem;
	--lp-code-fs-meta: 1.3rem;
	--lp-code-fs-label: 1.2rem;
	--lp-code-gap: 1.6rem;
	--lp-code-radius: 12px;
	--lp-code-radius-sm: 8px;

	/* 端末（コマンド・出力）。値は guide-tokens.css の --guide-code-* と同じ */
	--lp-term-bg: #1d1813;
	--lp-term-bg-soft: #2a241d;
	--lp-term-fg: #f1ede6;
	--lp-term-muted: rgba(241, 237, 230, 0.62);
	--lp-term-prompt: #ff9a5c;

	/* ファイル（紙） */
	--lp-file-bg: #fbf9f5;
	--lp-file-head: #f3eee5;
	--lp-file-line: #e6ddcd;
	--lp-file-fg: #2b2620;
	--lp-file-muted: #857a6b;

	--lp-accent: var(--kabocy-color-primary, #ff5b00);
	--lp-caution: #a65f00;
	--lp-caution-soft: #fbf1df;
	--lp-danger: #c0341d;
	--lp-danger-soft: #fcece9;
}

.editor-styles-wrapper {
	--lp-code-fs: 14.5px;
	--lp-code-fs-meta: 13px;
	--lp-code-fs-label: 12px;
	--lp-code-gap: 1.2em;
}

/* =========================================================
 |  本文中の `code`
 +=========================================================*/
:where(.post-contents-body, .editor-styles-wrapper) :not(pre) > code {
	padding: 0.1em 0.38em;
	font-family: var(--lp-mono);
	font-size: 0.88em;
	color: #3b3128;
	background: #f3ede3;
	border: 1px solid #ebe2d3;
	border-radius: 5px;
	overflow-wrap: anywhere;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* =========================================================
 |  コード（core/code）
 +=========================================================*/
.lp-code {
	margin-block: var(--lp-code-gap);
	overflow: hidden;
	font-size: var(--lp-code-fs);
	background: var(--lp-file-bg);
	border: 1px solid var(--lp-file-line);
	border-radius: var(--lp-code-radius);
}

.lp-code__head {
	display: flex;
	gap: 0.8em;
	align-items: center;
	justify-content: space-between;
	min-height: 2.8em;
	padding: 0.3em 0.45em 0.3em 1em;
	background: var(--lp-file-head);
	border-bottom: 1px solid var(--lp-file-line);
}

.lp-code__label {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	font-size: var(--lp-code-fs-label);
	letter-spacing: 0.04em;
	color: var(--lp-file-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lp-code__label svg {
	flex: none;
}

/* ファイル名は等幅で、濃く（読者が同じ名前で保存するので、写しやすく） */
.lp-code.has-name .lp-code__label {
	font-family: var(--lp-mono);
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--lp-file-fg);
}

.lp-code pre.wp-block-code {
	margin: 0;
	padding: 1em 1.2em;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	font-family: var(--lp-mono);
	font-size: 1em;
	line-height: 1.7;
	color: var(--lp-file-fg);
	white-space: pre;
	tab-size: 4;
	background-color: var(--lp-file-bg);
	border: 0;
	border-radius: 0;
	/* 横に続きがある方向にだけ影（lp-cmd と同じ作り。端の覆いは地色と同じ色） */
	background-image:
		linear-gradient(to right, var(--lp-file-bg), rgba(251, 249, 245, 0)),
		linear-gradient(to left, var(--lp-file-bg), rgba(251, 249, 245, 0)),
		linear-gradient(to right, rgba(43, 38, 32, 0.12), rgba(43, 38, 32, 0)),
		linear-gradient(to left, rgba(43, 38, 32, 0.12), rgba(43, 38, 32, 0));
	background-repeat: no-repeat;
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.lp-code pre.wp-block-code code {
	padding: 0;
	font: inherit;
	color: inherit;
	white-space: inherit;
	background: none;
	border: 0;
}

.lp-code pre[tabindex]:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: -2px;
}

/* 行番号（コピーにもスクリーンリーダーにも入らない） */
.lp-code--numbered code {
	counter-reset: lp-line;
}

.lp-code__line {
	counter-increment: lp-line;
}

.lp-code__line::before {
	display: inline-block;
	min-width: 2ch;
	margin-right: 1.3em;
	color: var(--lp-file-muted);
	text-align: right;
	content: counter(lp-line);
	content: counter(lp-line) / "";
	opacity: 0.75;
	-webkit-user-select: none;
	user-select: none;
}

/* 出力: 端末に出る結果。コマンド（最も暗い）より一段明るく、打つものではないのでコピーは無い */
.lp-code--output {
	background: var(--lp-term-bg-soft);
	border-color: var(--lp-term-bg-soft);
}

.lp-code--output .lp-code__head {
	min-height: 2.4em;
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.lp-code--output .lp-code__label {
	color: var(--lp-term-muted);
}

.lp-code--output pre.wp-block-code {
	color: #ddd6cb;
	background-color: var(--lp-term-bg-soft);
	background-image:
		linear-gradient(to right, var(--lp-term-bg-soft), rgba(42, 36, 29, 0)),
		linear-gradient(to left, var(--lp-term-bg-soft), rgba(42, 36, 29, 0)),
		linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
		linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.lp-code--output .lp-code__line::before {
	color: var(--lp-term-muted);
}

/* コピー（紙の地の上） */
.lp-code__copy {
	display: inline-flex;
	flex: none;
	gap: 0.4em;
	align-items: center;
	padding: 0.35em 0.95em;
	font-size: var(--lp-code-fs-meta);
	font-weight: 700;
	color: var(--lp-file-fg);
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--lp-file-line);
	border-radius: var(--lp-code-radius-sm);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.lp-code__copy[hidden] {
	display: none;
}

.lp-code__copy:hover {
	background: #fffdf9;
	border-color: #d6cab5;
}

.lp-code__copy:active {
	transform: scale(0.94);
}

.lp-code__copy:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: 2px;
}

.lp-code__copy.is-copied {
	color: #fff;
	background: var(--lp-accent);
	border-color: var(--lp-accent);
}

/* =========================================================
 |  コマンド（lp/command）— guide-blocks.css から移した（どのページでも使えるように）
 +=========================================================*/
.lp-cmd {
	margin-block: var(--lp-code-gap);
	overflow: hidden;
	font-size: var(--lp-code-fs);
	background: var(--lp-term-bg);
	border: 1px solid var(--lp-file-line);
	border-radius: var(--lp-code-radius);
}

.lp-cmd[hidden] {
	display: none !important;
}

.lp-cmd--inline {
	margin-block: 0.4rem 0;
}

.lp-cmd__warn {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	margin: 0;
	padding: 0.5em 0.85em;
	font-size: var(--lp-code-fs-meta);
	font-weight: 700;
	color: #fff;
	background: var(--lp-caution);
}

.lp-cmd--destructive .lp-cmd__warn {
	background: var(--lp-danger);
}

.lp-cmd__warn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 1;
}

.lp-cmd__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.35em 0.45em 0.35em 0.85em;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-cmd__shell {
	font-family: var(--lp-mono);
	font-size: var(--lp-code-fs-label);
	letter-spacing: 0.05em;
	color: var(--lp-term-muted);
	text-transform: uppercase;
}

/* 実行場所（runIn）。どこで実行するかは結果を左右するので、シェル名の隣に。 */
.lp-cmd__run-in {
	margin-left: 0.8rem;
	padding: 0.1rem 0.8rem;
	font-size: var(--lp-code-fs-label);
	color: var(--lp-term-muted);
	white-space: nowrap;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.lp-cmd__bar > .lp-cmd__shell + .lp-cmd__run-in {
	margin-right: auto;
}

.lp-cmd__copy {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.35em 0.95em;
	font-size: var(--lp-code-fs-meta);
	font-weight: 700;
	color: var(--lp-term-fg);
	cursor: pointer;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--lp-code-radius-sm);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.lp-cmd__copy:hover { background: rgba(255, 255, 255, 0.18); }
.lp-cmd__copy:active { transform: scale(0.94); }
.lp-cmd__copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lp-cmd__copy.is-copied {
	color: #fff;
	background: var(--lp-accent);
	border-color: var(--lp-accent);
}

/* 横スクロールの手がかり（純 CSS の scroll-shadow）。
 * local の2枚が「端の覆い」、scroll の2枚が影。端に着いている側は覆いが影に重なって消えるので、
 * 続きがある方向にだけ影が出る。rgba は --lp-term-bg (#1d1813) の透明版。 */
.lp-cmd__pre {
	margin: 0;
	padding: 0.75em 0.85em;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	font-family: var(--lp-mono);
	font-size: 1em;
	line-height: 1.7;
	color: var(--lp-term-fg);
	background-color: var(--lp-term-bg);
	background-image:
		linear-gradient(to right, var(--lp-term-bg), rgba(29, 24, 19, 0)),
		linear-gradient(to left, var(--lp-term-bg), rgba(29, 24, 19, 0)),
		linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)),
		linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	background-repeat: no-repeat;
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-size: 26px 100%, 26px 100%, 16px 100%, 16px 100%;
	background-attachment: local, local, scroll, scroll;
	border: 0;
	border-radius: 0;
}

/* スクロールできる時だけ code.js が tabindex を付ける（キーボードだけでも中身を追えるように）。 */
.lp-cmd__pre[tabindex]:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: -2px;
}

.lp-cmd__pre::-webkit-scrollbar,
.lp-code pre::-webkit-scrollbar { height: 8px; }
.lp-cmd__pre::-webkit-scrollbar-track,
.lp-code pre::-webkit-scrollbar-track { background: transparent; }
.lp-cmd__pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 999px; }
.lp-cmd__pre::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
.lp-code pre::-webkit-scrollbar-thumb { background: rgba(43, 38, 32, 0.18); border-radius: 999px; }
.lp-code--output pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

.lp-cmd__code {
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	white-space: pre;
	background: none;
	border: 0;
}

/* 行頭のプロンプト。コピーにも選択にもスクリーンリーダーにも入らない（CSS の生成内容なので）。
 * 続きの行（行末の \ ・ && の次）とコメントには付けない。 */
.lp-cmd__line[data-prompt]::before {
	color: var(--lp-term-prompt);
	content: attr(data-prompt) " ";
	content: attr(data-prompt) " " / "";
	-webkit-user-select: none;
	user-select: none;
}

.lp-cmd__line--comment {
	color: var(--lp-term-muted);
}

/* ---- 期待される出力 + 照合 ---- */
.lp-cmd__expect {
	color: var(--lp-term-fg);
	background: var(--lp-term-bg-soft);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-cmd__expect-summary {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5em 0.85em;
	font-size: var(--lp-code-fs-meta);
	list-style: none;
	cursor: pointer;
}

.lp-cmd__expect-summary::-webkit-details-marker { display: none; }
.lp-cmd__expect-summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.lp-cmd__expect-title { font-weight: 700; }
.lp-cmd__expect-hint { font-size: var(--lp-code-fs-label); color: var(--lp-term-muted); }

.lp-cmd__expect-pre {
	margin: 0;
	padding: 0.55em 0.85em;
	overflow-x: auto;
	font-family: var(--lp-mono);
	font-size: 1em;
	line-height: 1.6;
	color: var(--lp-term-fg);
	background: rgba(0, 0, 0, 0.28);
}

.lp-cmd__verify { padding: 0.6em 0.85em 0.75em; }

.lp-cmd__verify-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--lp-code-fs-meta);
	color: rgba(241, 237, 230, 0.85);
}

.lp-cmd__verify-input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.8rem;
	font-family: var(--lp-mono);
	font-size: 1em;
	color: var(--lp-term-fg);
	resize: vertical;
	background: #0e0b08;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--lp-code-radius-sm);
}

.lp-cmd__verify-input:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 1px; }

.lp-cmd__verify-result {
	min-height: 1.4em;
	margin: 0.5rem 0 0;
	font-size: var(--lp-code-fs-meta);
	font-weight: 700;
}

.lp-cmd__verify-result.is-pass { color: #6fe6a0; }
.lp-cmd__verify-result.is-near { color: #ffce54; }
.lp-cmd__verify-result.is-mismatch { color: #ff8a7a; }

/* 未入力のコマンド（編集権限者にだけ見える注意書き）。 */
.lp-cmd--empty {
	margin: 1.2rem 0;
	padding: 0.8rem 1.2rem;
	font-size: var(--lp-code-fs-meta);
	color: var(--lp-caution);
	background: var(--lp-caution-soft);
	border: 1px dashed currentColor;
	border-radius: var(--lp-code-radius-sm);
}

/* =========================================================
 |  エディタの中（コマンド）
 |  公開ページと同じ暗い端末の中に、そのまま打ち込む。行頭の $ も公開ページと同じ規則で出す。
 +=========================================================*/
.lp-cmd--editor .lp-cmd__hint {
	margin-left: auto;
	font-size: var(--lp-code-fs-label);
	color: var(--lp-term-muted);
}

.lp-cmd__edit {
	display: flex;
	gap: 0.6em;
	padding: 0.75em 0.85em;
	font-family: var(--lp-mono);
	font-size: 1em;
	line-height: 1.7;
}

.lp-cmd__gutter {
	flex: none;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	color: var(--lp-term-prompt);
	text-align: right;
	white-space: pre;
	background: none;
	border: 0;
	-webkit-user-select: none;
	user-select: none;
}

.lp-cmd__input,
.lp-cmd__expect-input {
	box-sizing: border-box;
	flex: 1;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	font: inherit;
	line-height: inherit;
	color: var(--lp-term-fg);
	white-space: pre;
	caret-color: var(--lp-term-prompt);
	resize: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
}

.lp-cmd__input::placeholder,
.lp-cmd__expect-input::placeholder {
	color: var(--lp-term-muted);
	opacity: 1;
}

.lp-cmd--editor:focus-within {
	box-shadow: 0 0 0 2px rgba(255, 154, 92, 0.55);
}

.lp-cmd__expect-edit {
	padding: 0.55em 0.85em 0.7em;
	font-family: var(--lp-mono);
	line-height: 1.6;
	background: var(--lp-term-bg-soft);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-cmd__expect-edit label {
	display: block;
	margin-bottom: 0.2em;
	font-family: inherit;
	font-size: var(--lp-code-fs-label);
	color: var(--lp-term-muted);
}

.lp-cmd__expect-input {
	color: #ddd6cb;
}

/* 知らせ（貼り付けを分けた・危険度の提案） */
.lp-cmd__notice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 0.8em;
	align-items: center;
	margin: 0;
	padding: 0.6em 0.85em;
	font-size: var(--lp-code-fs-meta);
	line-height: 1.5;
	color: var(--lp-term-fg);
	background: #332b22;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-cmd__notice--caution {
	color: #3d2a00;
	background: var(--lp-caution-soft);
}

.lp-cmd__notice--destructive {
	color: #5c170b;
	background: var(--lp-danger-soft);
}

.lp-cmd__notice-text {
	flex: 1 1 18em;
	margin: 0;
}

.lp-cmd__notice-text strong {
	font-family: var(--lp-mono);
}

.lp-cmd__notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.lp-cmd__notice button {
	padding: 0.3em 0.8em;
	font: inherit;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid currentColor;
	border-radius: var(--lp-code-radius-sm);
}

.lp-cmd__notice--caution button,
.lp-cmd__notice--destructive button {
	background: #fff;
}

.lp-cmd__notice button.is-primary {
	color: #fff;
	background: var(--lp-danger);
	border-color: var(--lp-danger);
}

.lp-cmd__notice--caution button.is-primary {
	background: var(--lp-caution);
	border-color: var(--lp-caution);
}

/* =========================================================
 |  エディタの中（コード）
 |  core/code はそのまま入力させ、見出しの帯（ファイル名・「出力」）は CSS で描く。
 |  ファイル名は editor.BlockListBlock で data-lp-label に渡している（code-blocks-editor.js）。
 +=========================================================*/
.editor-styles-wrapper pre.wp-block-code {
	position: relative;
	box-sizing: border-box;
	padding: 3.3em 1.2em 1em;
	overflow-x: auto;
	font-family: var(--lp-mono);
	font-size: var(--lp-code-fs);
	line-height: 1.7;
	color: var(--lp-file-fg);
	white-space: pre;
	tab-size: 4;
	background: var(--lp-file-bg);
	border: 1px solid var(--lp-file-line);
	border-radius: var(--lp-code-radius);
}

.editor-styles-wrapper pre.wp-block-code::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	box-sizing: border-box;
	height: 2.3em;
	overflow: hidden;
	padding: 0 1em;
	font-size: 0.85em;
	line-height: 2.3em;
	color: var(--lp-file-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	content: "コード";
	content: attr(data-lp-label);
	background: var(--lp-file-head);
	border-bottom: 1px solid var(--lp-file-line);
}

.editor-styles-wrapper pre.wp-block-code code {
	font: inherit;
	color: inherit;
	white-space: inherit;
	background: none;
	border: 0;
}

.editor-styles-wrapper pre.wp-block-code.is-style-output {
	color: #ddd6cb;
	background: var(--lp-term-bg-soft);
	border-color: var(--lp-term-bg-soft);
}

.editor-styles-wrapper pre.wp-block-code.is-style-output::before {
	color: var(--lp-term-muted);
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.lp-cmd__copy,
	.lp-code__copy {
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.lp-cmd__copy,
	.lp-code__copy {
		display: none !important;
	}
}