/*
	2ペインの境界（幅を変える取っ手）。2026-08-29の利用者指示
	「左右ペインの幅を自由に変更できる機能が必要です。エクスプローラーでは
	境界線をドラッグして調整できます」。

	**見た目は細い縦線1本だけ**にする。掴める範囲は線より広く取り、指でも
	つまめるようにする（線を太くすると画面の区切りが重くなる）。
	カーソルは左右矢印（`col-resize`）で、掴めることを触る前に知らせる。
*/

.elsaPaneSplitter {
	position: relative;
	box-sizing: border-box;
	/*
		2本線を内側へ寄せる量（線の外側に残す透明の当たり面）。2026-08-29の
		利用者指摘「境界線の二重線の間の隙間が少し大きすぎます」。

		**掴める帯は11pxのまま**で、見える2本だけを寄せる。**掴みやすさは落とさない**
		（線の外側に残る分も当たり面である）。

		2026-08-30、さらに詰めた（利用者指示「もう少し小さく。目安3px前後」）。
		3px寄せると線と線の隙間は`11 − 3 − 3 − 1 − 1 = 3px`になり、2本がいっそう
		1つのつまみとして読める。**当たり判定は11pxのまま**である。

		同日、この値は**外へはみ出す量**も兼ねることになった（㉑。すぐ下を参照）。
		線の外側に残る当たり面は、レイアウトの幅ではなくペインの縁の上へ重なる。
	*/
	--elsa-pane-splitter-inset: 3px;
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		掴んでいるあいだの線の色（2026-08-30の利用者指示「青が強い。もっと薄く」）

		**テーマ色に追従したまま、彩度と濃さだけを落とす。** 外観設定で会社ごとに
		変わる`--elsa-primary-color`を白と半分ずつ混ぜる。原色をそのまま置くと、
		1本の細い線としては強すぎて画面の区切りが重くなる（境界は主役ではない）。

		既定値（`#24333f`）での実測は`#92999f`である。混ぜる比率をここに1つだけ
		置いてあるので、濃さの調整はこの行だけで済む。

		**色を混ぜられない古い環境では原色へ落ちる**（`color-mix`が解釈できない
		宣言は無効になり、`var()`のフォールバックが残る）。薄くならないだけで、
		掴める・見えるという用は足りる。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	--elsa-pane-splitter-active-color: color-mix(in srgb, var(--elsa-primary-color, #24333f) 50%, var(--elsa-surface, #ffffff));
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		線とペインの縁のあいだに隙間を作らない（2026-08-30の利用者指示。㉑）

		300%に拡大した画面で、2本線の**外側**——左はツリー側、右は本文側——に
		数pxの余白が見えていた。線がペインの縁に接しておらず、区切りが2本の線と
		2本の隙間の4本組に読めていた。

		原因は、掴める帯（11px）がそのままレイアウトの幅を食っていたことである。
		線は`inset`のぶん内側に立つので、**その外側に残る透明の当たり面が、
		そのままペインとの隙間として見えていた。**

		直し方は「掴みやすさを削る」ことではない。**当たり面をペインの縁の上へ
		重ねる**——負の外余白で外側へはみ出させ、レイアウトの幅としては数えさせない。

			レイアウトが使う幅 ＝ 1px ＋ 隙間3px ＋ 1px ＝ 5px
			掴める幅           ＝ 5px ＋ はみ出し3px × 2 ＝ 11px（変わらない）

		重なった数pxではペインの中を押すより境界が優先されるが、ペインの縁ぴったりを
		押す用途は実際には無い。**掴みやすさとぴたりと接した見た目の、両方を取る。**

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	/*  掴める幅。見える線は両端の1pxずつで、外へはみ出した分は当たり面である。  */
	width: 11px;
	min-width: 11px;
	margin-inline: calc(-1 * var(--elsa-pane-splitter-inset));
	align-self: stretch;
	/*  縦に伸びない骨格（`align-items: start`のGrid）でも掴める高さを持たせる。  */
	min-height: 40px;
	cursor: col-resize;
	touch-action: none;
	background: transparent;
	border: 0;
	padding: 0;
}

.elsaPaneSplitter::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
	background: var(--elsa-field-control-border-color, #d2d2d2);
}

@media (hover: hover) {
	.elsaPaneSplitter:not([data-pane-splitter-inert="true"]):hover::before {
		width: 3px;
		background: var(--elsa-pane-splitter-active-color, var(--elsa-primary-color, #24333f));
	}
}

/*
	**2本線の帯**（2026-08-29の利用者確定「2本線のままで、2本線のエリア全体で移動が
	できるようにする」）。1枚の窓の中で左右を分ける画面で使う。

	2本の線と**間の隙間も含めた帯ぜんぶが掴める**。マウスを乗せると2本とも色が変わる。
	修正前は、窓の区切り線と取っ手の線が別々に描かれ、動くのは右の1本だけだった。

	線は帯の両端ではなく`--elsa-pane-splitter-inset`だけ内側に立つ（2026-08-29の
	利用者指摘「隙間が少し大きすぎます」）。**掴める帯の幅は変えていない。**
*/
.elsaPaneSplitter--frame::before,
.elsaPaneSplitter--frame::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: none;
	background: var(--elsa-field-control-border-color, #d2d2d2);
}

.elsaPaneSplitter--frame::before { left: var(--elsa-pane-splitter-inset); }
.elsaPaneSplitter--frame::after { right: var(--elsa-pane-splitter-inset); }

@media (hover: hover) {
	.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):hover::before,
	.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):hover::after {
		width: 2px;
		background: var(--elsa-pane-splitter-active-color, var(--elsa-primary-color, #24333f));
	}
}

.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):focus-visible::before,
.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):focus-visible::after {
	width: 2px;
	background: var(--elsa-pane-splitter-active-color, var(--elsa-primary-color, #24333f));
}

/*
	キーボードで来た人にも掴んでいる場所が見える。**線ではなく当たり面へ枠を出す**
	（1pxの線に枠を付けても見えない）。

	**枠だけは薄めない。** これは掴んでいる場所を知らせる唯一の手がかりで、
	薄めると背景に紛れて「どこに居るのか」が分からなくなる。薄くするよう言われた
	のは境界の線の色（乗せたときの強い青）であって、焦点の枠ではない。
*/
.elsaPaneSplitter:not([data-pane-splitter-inert="true"]):focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: -1px;
}

.elsaPaneSplitter:not([data-pane-splitter-inert="true"]):focus-visible::before {
	width: 3px;
	background: var(--elsa-pane-splitter-active-color, var(--elsa-primary-color, #24333f));
}

/*
	**動かせる余地が無いときは、掴めるふりをしない**（2026-08-29の利用者指摘
	「可動域ゼロの境界が掴めそうに見える」。相談の案a）。

	窓が狭いと、左の下限と右の下限の合計が容器の幅を超え、`aria-valuemin`と
	`aria-valuemax`が同じ値になる。それ自体は正しい（どちらのペインも潰せない）が、
	`col-resize`のカーソルとホバーの強調が出たままだと「掴んだのに動かない」壊れた
	境界に見える。

	そのあいだは**ただの区切り線へ落とす**。カーソルは矢印へ戻し、ホバーと焦点の
	強調は上の規則が`:not([data-pane-splitter-inert="true"])`で自分から降りる。
	見える線はそのまま残す（窓の中の仕切りとしては要る）。

	**判定はクライアントが幅を測って行う**（`elsa_pane_splitter.js`の`report()`）。
	窓が広がって余地が戻れば同じ判定で印が外れ、掴める境界へ自動で復帰する。
*/
.elsaPaneSplitter[data-pane-splitter-inert="true"] {
	cursor: default;
}

/*
	引いている間は文字を選ばない。選ぶと、境界を動かすたびに画面じゅうの文字が
	青く反転する。カーソルも画面全体で左右矢印に固定する（取っ手から外れても
	掴んだままなので、形が戻ると離したように見える）。
*/
.is-elsaPaneSplitting,
.is-elsaPaneSplitting * {
	cursor: col-resize !important;
	user-select: none !important;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	上下向きの境界（2026-08-31の[USER DECISION]・Issue #2169。トップページの2段）

	**同じ見た目を90度倒しただけ**である。掴める帯は11pxのまま、見える線は
	`--elsa-pane-splitter-inset`だけ内側に立ち、外へはみ出した分は当たり面。
	色・太さ・掴んでいるあいだの強調は上の規則がそのまま効く（向きで変わるのは
	**伸びる辺とカーソルだけ**）。

	**既存の左右向きへは1pxも触らない。** ここは全て`--horizontal`の付いた行だけを
	主語にしており、印を持たない境界（いま在る全画面のもの）は1つも読まない。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaPaneSplitter--horizontal {
	width: auto;
	min-width: 0;
	height: 11px;
	min-height: 11px;
	margin-inline: 0;
	margin-block: calc(-1 * var(--elsa-pane-splitter-inset));
	justify-self: stretch;
	cursor: row-resize;
}

/*  1本線の姿（`--frame`でないとき）。縦線を横線へ倒す。  */
.elsaPaneSplitter--horizontal::before {
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	width: auto;
	height: 1px;
	transform: translateY(-50%);
}

@media (hover: hover) {
	.elsaPaneSplitter--horizontal:not([data-pane-splitter-inert="true"]):hover::before {
		width: auto;
		height: 3px;
	}
}

/*  2本線の姿（`--frame`）。上下の縁へ1本ずつ。  */
.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame::before,
.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame::after {
	right: 0;
	left: 0;
	width: auto;
	height: 1px;
}

.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame::before { top: var(--elsa-pane-splitter-inset); bottom: auto; }
.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame::after { top: auto; bottom: var(--elsa-pane-splitter-inset); }

@media (hover: hover) {
	.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):hover::before,
	.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):hover::after {
		width: auto;
		height: 2px;
	}
}

.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):focus-visible::before,
.elsaPaneSplitter--horizontal.elsaPaneSplitter--frame:not([data-pane-splitter-inert="true"]):focus-visible::after {
	width: auto;
	height: 2px;
}

/*  引いているあいだのカーソルも上下向きにする。  */
.is-elsaPaneSplitting.is-elsaPaneSplitting--horizontal,
.is-elsaPaneSplitting.is-elsaPaneSplitting--horizontal * { cursor: row-resize !important; }

/*
	**1列に積む表示では境界を出さない。** 上下に積んだ2枚の間へ左右の取っ手が
	あっても動かす軸が無い。ここで隠すので、画面ごとに書き分けない。

	**上下向きも同じ扱いである**（2026-08-31の利用者指示「375pxでは上下スプリッターは
	無効化し、縦に自然に積む」）。狭い画面で高さを指で分け合う操作は要らない。
	隠れた取っ手はクライアントも動かさない（`hidden()`が`offsetParent`で判定する）。
*/
@media (max-width: 767px) {
	.elsaPaneSplitter { display: none; }
}

/* #3421: only explicit horizontal opt-in retains a usable axis on mobile.
 * A not-yet-hoisted hidden handle must not become visible. */
@media (max-width: 767px) {
	.elsaPaneSplitter--horizontal.elsaPaneSplitter--mobile:not([hidden]) { display: block; }
}