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

	統合窓（アプリのツリー ＋ 右のペイン）

	Issue #2169「アプリ全体のエクスプローラー化」の[USER DECISION]（案A: 完全統合）の
	土台。**骨格・外枠・角丸・2ペイン・境界の面は、すでに配信済みの
	`core/css/elsa_pane_window.css`がそのまま持つ。** ここに書くのはその差分だけである。

	骨格（2026-08-30の利用者の図解。**2026-09-01の[USER DECISION]で道具の帯を廃止**＝
	後続列①。ボタンは右のペインの中へ降りた）:

		trail  trail  trail      パンくず（全幅・1本だけ）
		tree   split  actions    ツリー ｜ 右ペインのボタン行（右端に検索）
		tree   split  main       ツリー ｜ LISTまたは入力フォーム
		status status status     情報表示エリア（全幅）

	**左右のペインの上に全幅の帯は無い。** 左ペイン用のボタンはほとんど存在しないのに
	右ペイン用のボタンがそこへ集まって読み違いを生み、道具の無い画面では帯の1行が
	まるごと無駄になっていた。ボタン行は右のペインの列にだけ立ち、**押せるものが1つも
	無い行はCSSが畳む**（下の`.elsaAppExplorerActions`）。

	**境界はボタン行と本文の行を貫く。** 木（`tree`）と境界（`split`）が2行にまたがる
	ので、左ペインはパンくずのすぐ下から始まる。

	**スクロールはペインの内側だけで起きる**（2026-08-30の利用者追記）。窓は画面の
	高さで立ち、パンくず・ボタン行・情報表示は動かない。長い階層はツリーの中で、長い
	フォームは右の本文の中で送られる。ページ全体が動くと、送った先で道具と現在地が
	画面の外へ出る。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*
	青いメニューを持たない本体（完全統合のとき画面が`<body>`へ付ける）。

	**`base.css`の`body { padding: 0 0 0 210px; }`を打ち消す。** 素の`body`は左メニューの
	ぶんを常に空けており、`body.elsaHasNavigation`だけがそれを0へ戻している。メニューを
	持たない統合側でも同じ打ち消しが要る（忘れると画面の右端に210pxの空白が残る）。

	**列は`minmax(0, 1fr)`であって`auto`ではない。** 1本の`auto`の列は中身のmax-contentで
	止まるため、右のペインの一覧が縮んで画面の幅いっぱいまで伸びない（モックの実測で
	1070pxに止まった）。
*/
body.elsaAppExplorerBody {
	--elsa-content-left: 0px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 100vh;
	min-height: 100dvh;
	padding-left: 0;
	/*  ページ全体は動かない。送るのはペインの内側だけである。  */
	overflow: hidden;
	/*
		**高さの上限も要る。** 上の`min-height`は下限でしかなく、Gridの
		`minmax(0, 1fr)`は**余った空間の配り方**であって、中身が画面より高ければ
		行はそのまま伸びる。2026-08-30、中央サーバーの実画面（1280×800）で窓の高さが
		1035pxになり、`html`が247pxぶん縦に動いた。**送るのはペインの内側だけ**
		という決まりが破れ、送った先でパンくずと帯が画面の外へ出ていた。
	*/
	height: 100vh;
	height: 100dvh;
}

/*
	**窓は「残りの高さ」を受け取る形にする。** pxで宣言し直すと、下に何かが
	増えたときに追随できない。本文の中で縦に伸びる箱を1つ作っておけば、
	窓はいつでもその残りに収まる。
*/
body.elsaAppExplorerBody #elsaLayout {
	display: flex;
	min-width: 0;
	min-height: 0;
	padding: 0;
	flex-direction: column;
	overflow: hidden;
}

/*━━━ 窓 ━━━*/

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

	画面へ浮く固定ボタンを**右のペイン基準**へ置き直す（A案）

	2026-08-31・Issue #2169 統合順5番 段階4の利用者決定。出荷指示の丸いボタン
	（右端の縦列と、下の確定・取消）はV2からそのまま持ってきた形で、**画面に浮いて
	スクロールに追従する**（`position: fixed`）。そこは変えない——`absolute`にすると
	送る箱の中で一緒に流れてしまい、V2の操作感が壊れる。

	**基準だけを右のペインへ移す。**

	 1. **横**: `--elsa-content-left`は「左のナビゲーションに取られている幅」で、下の帯の
	    中央寄せがこれを読む（V2も左メニューの分だけ右へ寄せていた）。統合窓に青い左
	    メニューは無いが、**左には木のペインが居る。** 同じ意味の値として木の幅を入れれば、
	    帯は右のペインの中央へ立つ。**新しい変数を足さずに済む。**
	 2. **下**: 最下段に情報表示の帯が在るので、そのぶん持ち上げる。持ち上げないと
	    確定・取消がその帯に重なる。

	**縦の中央寄せは変えない。** 右端の縦列は画面の高さいっぱいで中央に寄る——V2が
	まさにそうしており、ペインの行へ閉じ込めるとV2と18pxずれる。**「位置と表示はV2と
	一致必須」（2026-08-14の利用者決定）に従い、V2のまま残す。**

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* 器で文字追従の寸法を共有し、ポータル側の信号にも同じ比率を渡す。 */
.elsaAppExplorerStatusBar,
.elsaAppExplorerConnectionPanel { --elsa-app-explorer-status-mark-size: .8em; }
.elsaAppExplorer {
	/*
		接続状態の共通token（Issue #2622）。同じ状態を示す共通ブロックもこの値を
		参照し、画面ごとに色のliteralを複製しない。
	*/
	--elsa-connection-state-connected: var(--elsa-semantic-safe-color, #006eff);
	--elsa-connection-state-error: var(--elsa-semantic-danger-color, #b42318);
	--elsa-connection-state-warning: var(--elsa-semantic-caution-color, #dc6803);
	--elsa-connection-state-idle: #98a2b3;
	/*
		窓の上に居るもの（ページ見出しなど）の高さ。**完全統合では0**で、窓が
		画面をいっぱいに使う。既存の画面の中へ置くときだけ画面が宣言する。
	*/
	--elsa-app-explorer-offset: 0px;
	/*
		最下段の高さの正本。情報表示の帯自身が`min-height`にこれを使う。

		**2026-09-02の利用者指示で28pxへ抑えた。** それまでは`--elsa-form-control-height`
		（入力欄の高さ）を土台にしていたが、情報バーは入力欄ではなく、揃える相手が
		無い借用だった。文字の大きさ（`.85em`）はそのまま、行間だけ詰めた
		（下の`--elsa-app-explorer-status-line-height`が2→1.5）ので、ここも実測に合わせて
		直値へ変える。固定丸ボタンの持ち上げ（`--elsa-fixed-action-bottom-inset`）は
		この1本を読むので、変えればそちらも一緒に動く。
	*/
	--elsa-app-explorer-status-height: 28px;
	/*  画面へ浮く固定ボタンの基準（上の注記のA案）。  */
	--elsa-fixed-action-bottom-inset: var(--elsa-app-explorer-status-height);
	--elsa-content-left: var(--elsa-tree-pane-width, 280px);
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**ボタン行は右のペインの列にだけ立つ**（2026-09-01の[USER DECISION]・後続列①）

		それまでは`tools`が全幅（3列ぶん）を占め、**左ペインの上にも帯が伸びていた。**
		左ペイン用のボタンはほとんど存在しないのに右ペイン用のボタンがそこへ集まり、
		道具の無い画面では帯の1行がまるごと無駄になっていた。

		`actions`は`main`の真上の1マスだけである。木（`tree`）と境界（`split`）が
		2行にまたがるので、**左ペインはパンくずのすぐ下から始まる。**（同じ名前を
		続けて2回書けば、Gridは連続する1枚の矩形として扱う。）

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	grid-template-areas:
		"trail  trail  trail"
		"tree   split  actions"
		"tree   split  main"
		"status status status";
	/*  パンくず・ボタン行・情報表示は自分の高さ、残り全部が本文の行である。  */
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	height: calc(100vh - var(--elsa-app-explorer-offset));
	height: calc(100dvh - var(--elsa-app-explorer-offset));
	min-height: 0;
}

/*
	**窓は「残りの高さ」を受け取る形にする**（`body`が本文＋αの縦積みのとき）。
	pxで宣言し直すと、下に何かが増えたときに追随できない。
	**この宣言は`.elsaAppExplorer`の後ろに置く**（上書きだから、というだけでなく、
	`.elsaAppExplorer {`を探す検査が先に別の規則を掴まないようにするためでもある）。
*/
body.elsaAppExplorerBody #elsaLayout > .elsaAppExplorer {
	height: auto;
	min-height: 0;
	flex: 1 1 auto;
}

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

	一覧の検索枠をボタン行の右端へ出す（`search_in_band`。2026-08-30の利用者承認。
	2026-09-01の帯廃止で置き場が「帯の右端」から「右ペインのボタン行の右端」へ移った）

	文書保存が先に持っていた形の標準昇格である。**4列目の`rsearch`が検索枠のマス**で、
	画面の道具の右隣——すなわち**ボタン行の右端**——に並ぶ。ボタン行と同じ地色・
	同じ下線を持つので、見た目は1本の行の中に検索枠が在る形になる。本文の行は
	`main`が2マスにまたがる。

	**行は右のペインの上にだけ立つ**（`actions`と`rsearch`は3・4列目である）。左ペインの
	上には何も伸びないので、木はパンくずのすぐ下から始まる。

	**効くのは右のペインが一覧のときだけ**（`is-search-in-band`）。入力フォームの
	ときは上の3列のままで、ペインが従来どおり自分で送る。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.elsaPaneWindow.elsaAppExplorer.is-search-in-band {
	grid-template-columns: var(--elsa-tree-pane-width, 320px) auto minmax(0, 1fr) auto;
	grid-template-areas:
		"trail  trail  trail    trail"
		"tree   split  actions  rsearch"
		"tree   split  main     main"
		"status status status   status";
}

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

	検索枠をボタン行へ出す一覧が、一覧でない中身も連れているとき（`is-main-extra`）

	2026-08-31、`/settings/tax/`の実画面で利用者が見つけた不具合の根治。**右のペインが
	「アプリ共通の既定（設定欄）＋消費税率一覧」のように、一覧1枚だけでは終わらない
	画面**では、右のペインの箱を透かすと一覧でない部分（設定欄）も一緒に透け、`main`の
	マス1つには一覧本体（`.elsaListScroll`）しか行き場が無いため、設定欄は帯の外・
	情報表示の下へ弾き出されていた（画面によっては検索枠の左に不自然な空白として
	見えていた——透けた設定欄が`main`のマスの前に居場所を探し、隙間だけを残していた）。

	直し方は`main`のマスを縦に2段へ割ることである。**`extra`が一覧でない中身、`main`が
	一覧本体**で、ツリーは2段にまたがる（`tree`・`split`をそのまま2回書けば、Gridは
	連続する1枚の矩形として扱う）。`is-main-extra`が立っていない画面（一覧1枚だけの葉）
	には1文字も効かない。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-main-extra {
	grid-template-areas:
		"trail  trail  trail    trail"
		"tree   split  actions  rsearch"
		"tree   split  extra    extra"
		"tree   split  main     main"
		"status status status   status";
	grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

/*
	TABのパネルに共通LISTを置く画面。タブ見出しを独立した1行へ据え、選択中の
	LISTパネルだけを透かして検索欄と表を従来のrsearch/mainへ送る。
*/
.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-tabbed-list {
	grid-template-areas:
		"trail  trail  trail    trail"
		"tree   split  actions  rsearch"
		"tree   split  tabs     tabs"
		"tree   split  main     main"
		"status status status   status";
	grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.elsaAppExplorer.is-search-in-band.is-tabbed-list [data-app-explorer-body],
.elsaTabBlock[data-app-explorer-tabbed-list="true"],
.elsaAppExplorer.is-search-in-band.is-tabbed-list .elsaTabPanel[data-app-explorer-tab-list-panel]:not([hidden]) {
	display: contents;
}

.elsaAppExplorer.is-search-in-band.is-tabbed-list .elsaTabList {
	grid-area: tabs;
	box-sizing: border-box;
	padding: var(--elsa-block-spacing, 8px) var(--elsa-block-spacing, 8px) var(--elsa-form-control-border-width) var(--elsa-tab-gap);
}

.elsaAppExplorer.is-search-in-band.is-tabbed-list .elsaTabPanel:not([data-app-explorer-tab-list-panel]) {
	grid-area: main;
	min-height: 0;
	overflow: auto;
}

/*
	**一覧でない中身は箱のまま残る**（透けるのは右のペインの箱・画面が被せた器・共通LISTの
	入れ物の3枚だけで、`data-app-explorer-extra`はその外側）。窓の余白はここへ持たせる
	（`elsaSettingsExplorerMain`の余白は透けて効かなくなるため）。
*/
.elsaAppExplorer.is-search-in-band.is-main-extra [data-app-explorer-extra] {
	grid-area: extra;
	min-height: 0;
	overflow: auto;
	padding: 10px 12px 0;
	box-sizing: border-box;
}

/*
	右のペインの箱を透かして、共通LISTの検索枠と表を窓のマスへ直接置く。
	**DOMは1つも動かさない**ので、共通LISTが自分の入れ物の中から検索枠を見つける
	配線（`$el`の中を探す）は生きたままである。

	透かす3枚は、窓のペイン・画面が被せた器・共通LISTの入れ物である。いずれも
	**ブロックのルートではない**（画面はLISTを`elsa_block_draw()`で描き、
	`.block`の行を挟まない）。ルートを外の祖先から装飾しない規則を守るためで、
	`tests/field_block_style_test.php`が見張っている。

	**`[data-app-explorer-list-scope]`は4枚目・任意の器**（Issue #2786・
	2026-09-04）。画面がJavaScriptの操作範囲としてLISTと画面固有のボタン類を
	同じ1つの器へ入れておきたいとき（Amazon出荷指示の右下固定ボタンなど）に、
	その器へこの属性を足す。**DOMは動かさない**——器はそのまま残り、CSSの
	透かしだけがこの器も通過する。器の中で`position: fixed`のボタンは元々
	描画のフロー外なので、透かしても位置は動かない。器自身に見た目
	（枠線・余白）を持たせている画面は使わないこと（透けると消える）。
*/
.elsaPaneWindow.elsaAppExplorer.is-search-in-band > .elsaAppExplorerMain,
.elsaAppExplorer.is-search-in-band [data-app-explorer-body],
.elsaAppExplorer.is-search-in-band [data-app-explorer-list],
.elsaAppExplorer.is-search-in-band [data-app-explorer-list-scope],
.elsaAppExplorer.is-search-in-band [data-app-explorer-list] > .elsaListContainer {
	display: contents;
}

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

	**検索は帯の1行に収める**（2026-08-30に利用者が実画面で見つけた崩れの根治）

	共通LISTの検索枠は、本文の中で全幅の帯として立つ作りである（12列のGridで、
	中の行は`flex-wrap: wrap`）。それを窓の細いマスへそのまま入れたため、
	**キーワード欄の下へ「？」と「削除済を表示」が折り返し、帯が2段（実測77px）に
	膨らんで上下の線から突き抜けて見えていた。** 左の帯（28pxのボタン1つ）と行が
	そろわず、ツリーの上に空白も生まれていた。

	直し方は3つで、**どれも窓の中だけに効く**（他の画面の一覧の検索枠は1pxも
	変わらない）。

	  1. 12列のGridを**帯の1行**（`flex`）へ畳み、右端へ寄せる
	  2. 中の行を**折り返さない**（`nowrap`）
	  3. 入力欄の高さを**帯のボタンと同じ**にし、狭くなったら**幅だけを縮める**

	**「削除済を表示」は消さない**（管理者だけの機能で、消えると在ることに
	気づけない）。2026-09-03からは検索枠の隣ではなく**左のボタン行の末尾**に
	立つ（下の`.elsaListDeletedToggleSlot`）。狭い画面では検索そのものが帯の
	下の1行へ降りる。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

.elsaAppExplorer.is-search-in-band .elsaListTools {
	grid-area: rsearch;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	/*
		**上下も左右も高さも行と同じトークン**（2026-09-06の利用者指摘。出荷指示画面
		Ver.`5437a74d`で「検索ボックスの上下の隙間がほとんど無く、他画面と高さが違う」）。

		検索枠は帯とは**別のマス**（`rsearch`）なので、行の内側余白も最低の高さも
		自動では効かない。以前はここが`padding: 0 10px`だけで、**検索しか無い画面の
		行だけが入力欄の高さそのもの**になっていた。中身は縦の中央（上の`align-items`）。
	*/
	min-height: var(--elsa-pane-window-band-height);
	padding: var(--elsa-pane-window-band-padding-block) var(--elsa-pane-window-band-padding-inline);
	border-bottom: 1px solid var(--elsa-pane-window-border);
	background: var(--elsa-pane-window-band);
}

/*  入れ物は幅を主張しない（中の入力欄の幅がそのまま帯での占有幅になる）。  */
.elsaAppExplorer.is-search-in-band .elsaListSearch,
.elsaAppExplorer.is-search-in-band .elsaListSearchBox {
	width: auto;
	min-width: 0;
	margin: 0;
}

/*  **折り返さない。** ここが折り返すと帯が2段になる（今回の崩れそのもの）。  */
.elsaAppExplorer.is-search-in-band .elsaListSearchRow {
	flex-wrap: nowrap;
	min-width: 0;
}

/*
	入力欄は**帯のボタンと同じ高さ**にする。高さを揃えないと、左の帯の28pxの
	ボタンと行がそろわない。**共通の既定（`core/css/base.css`）が2026-09-03に
	`--elsa-block-action-height`へ揃ったので、ここは同じ値を書いているだけである。**

	幅は`18em`を目安に置き、狭くなったら**共通の下限（`--elsa-list-search-min-width`
	＝14em）まで縮める。** 畳んで消すことはしない。以前は狭いPC幅で`7em`まで
	縮めていたため、「×」「？」の右余白を引くと**打てる幅が24pxしか残らなかった**
	（2026-09-03の棚卸し）。下限を共通側で持たせたので、ここに`@media`の
	段階的な縮小は要らない。
*/
.elsaAppExplorer.is-search-in-band .elsaListSearchRow input[type="search"] {
	flex: 0 1 auto;
	box-sizing: border-box;
	width: 18em;
	height: var(--elsa-block-action-height, 28px);
	min-height: 0;
}

/*  「？」「×」は縮めない（押せる大きさを保つ）。  */
.elsaAppExplorer.is-search-in-band .elsaListSearchControls { flex: 0 0 auto; }

/*
	**表の箱が本文のマスで、自分で送る。** 透かした箱はもう送れないので、送る役目は
	一覧側の`option.scroll_body`が引き受ける（`core/php/blocks/list/list.php`）。
	追加読み込みの見張りもその中に居る。
*/
.elsaAppExplorer.is-search-in-band .elsaListScroll {
	grid-area: main;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/*
	CHATブロックを描く画面（みんなのオフィス・お問い合わせ）の帯検索（Issue #3659）。
	**検索欄そのものはLISTと同じ`.elsaListTools`を名乗る**（`core/php/blocks/
	communication_space/view.php`の`elsa_communication_space_view_search_tools()`）ので、
	上の`rsearch`マスの規則をそのまま受け取り、ここへ新しい規則は要らない。ここが
	要るのは、**一覧＋会話の2カラム（`.elsaCommunicationSpaceSplit`）を`main`マスへ
	据える**規則だけである——LISTの`.elsaListScroll`に当たる器がCHATには無いため。

	検索を持たない画面（`option.search`を渡さない）は`.elsaCommunicationSpaceSplit`
	を描いても`is-search-in-band`が付かないので、この規則は効かない。
*/
.elsaAppExplorer.is-search-in-band .elsaCommunicationSpaceSplit {
	grid-area: main;
	min-height: 0;
	margin: 0;
}

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

	最下段の行にも下線を戻す（2026-08-31、developmentの実画面（/departments/）で
	利用者が見つけた不具合）

	`core/css/base.css`の`.elsaList tbody tr:last-child td { border-bottom: none; }`は、
	表を囲む`.elsaListScroll`自身の外枠（`border: 1px solid var(--elsa-border, #d2d2d2)`）と最下段の下線が
	二重に見えないための省略である。**統合窓（`is-search-in-band`）はその外枠を持たない**
	（すぐ上の規則で`border: 0`）ので、二重線を避ける理由が無いのに最下段だけ線が消え、
	表の下端が閉じていないように見えていた。

	値は基本の行の下線（`core/css/base.css`の`.elsaList th, .elsaList td`）と
	1文字も違えず揃える——色や太さが少しでもずれると、最下段だけ違う表に見える。
	統合窓の共通骨格（`elsa_app_explorer_window()`）を使う画面すべて（設定領域・
	取引先情報・みんなのオフィス）に効き、個別画面のCSSは持たない。
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorer.is-search-in-band .elsaList tbody tr:last-child td {
	/*  Issue #3797: 基本の行の下線が「枠線色」へ移ったので、ここも同じ変数へ合わせる。  */
	border-bottom: 1px solid var(--elsa-border-color, #d4d4d4);
}

/*
	**「削除済を表示」は左のボタン行の末尾**（2026-09-03の利用者決定）。共通の
	クライアント（`core/js/elsa_list.js`）が器ごとこの行へ運ぶので、器は行の
	並びの一員として立つ。**見た目は運ぶ前と1pxも変えない**——高さは他の道具と
	同じ`--elsa-block-action-height`である。
*/
/*
	行は`justify-content: space-between`なので、そのままだと器が行の右端まで飛び、
	左のボタン群から離れて検索枠へくっついて見える（2026-09-03のdevelopmentの実画面で
	確認）。**自動余白を右へ置いて、左のボタンの直後に留める。** 自動余白は
	`space-between`より先に余りを取るため、行の中身は左へ詰まる。
*/
.elsaAppExplorer .elsaAppExplorerActions > .elsaListDeletedToggleSlot { flex: 0 0 auto; margin-right: auto; }

/*  パンくずは全幅の1本だけ。**下にもう1本置かない。**  */
.elsaPaneWindow.elsaAppExplorer > .elsaPaneWindowTrail { grid-area: trail; }

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

	アカウント表示（2026-08-31の[USER DECISION]・Issue #2169）

	**PC（768px〜）はパンくずと同じ行の右端**に、会社名＋氏名の小さなチップが立つ。
	押すと小さなメニューが開き、旧い青いメニューのアカウント区画と同じ項目
	（メールアドレス変更・パスキー設定・テナント切替・ログアウト）が並ぶ。

	**帯の高さは1pxも変えない。** チップは道筋の段（`.elsaPaneWindowTrailStep`）と
	同じ行の高さ（`line-height: 2`）に収まる。地色も枠も持たないので、**普段は
	静かで、触れたときだけふわっと浮く**（＞マーク・スクロールバーと同じ作法）。

	**マークアップはスマホ用の区画と2つ在るが、決めごとは1つである**
	（`core/php/function/nav_account.php`が項目・行き先・権限を持つ）。姿が2つに
	なるのは、利用者決定が「PCは帯の右端のチップ、スマホは旧画面と同じメニューの
	最上部」と別の形を指しているためである。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*
	**スマホ用の区画は既定で出さない。** この宣言は下の`@media`より前に置く
	（≡・ロゴのヘッダーと同じ理由。後ろへ置くと、同じ強さの規則が後から
	`display: none`へ戻し、狭い画面でアカウントが消える）。
*/
.elsaAppExplorerIdentityPane,
.elsaAppExplorerIdentityPaneLogout,
.elsaAppExplorerNavInfo { display: none; }

/*
	**道筋の最後の子として右端へ寄る。** 帯は`flex`なので`margin-left: auto`で足りる。
	`flex: 0 0 auto`なのは、パンくずが長いときに縮んで消えないようにするためである
	（各段のほうが`…`で縮む）。
*/
.elsaAppExplorerIdentity {
	flex: 0 0 auto;
	min-width: 0;
	margin-left: auto;
	color: var(--elsa-account-text-color, #333333);
}

.elsaAppExplorerIdentityChip {
	display: flex;
	align-items: baseline;
	gap: .5em;
	box-sizing: border-box;
	max-width: 22em;
	min-width: 0;
	padding: 0 .6em;
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**枠は場所を取らせない**（2026-08-31に中央サーバーの実画面で実測して直した）

		「パンくず帯の高さは維持する」が利用者の条件である。ところが
		`1px solid transparent`の枠を持たせると、上下の1pxぶんチップだけが**29.6px**に
		なって道筋の段（28px）を追い越し、**帯が34.8px→36.4pxへ伸びていた。**
		見た目には気づきにくい1.6pxだが、窓の骨格の条件そのものである。

		触れたときの枠は`box-shadow: inset`で描く。**影は場所を取らない**ので、
		チップは常に段と同じ28pxのままでいられる。

		実測: 枠のとき 帯36.4px／チップ29.6px、影のとき 帯34.8px／チップ28px（＝段と同じ）。
		チップを消したときの帯も34.8pxなので、**足しても帯は1pxも動かない。**

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	border: 0;
	/*  帯の他の要素と同じ行の高さ（`.elsaPaneWindowTrailStep`の`line-height: 2`）。  */
	border-radius: var(--elsa-field-control-border-radius, 4px);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 2;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}

/*  触れたときだけ、ふわっと。開いているあいだも同じ顔のままにする。  */
.elsaAppExplorerIdentityChip:hover,
.elsaAppExplorerIdentityChip:focus-visible,
.elsaAppExplorerIdentityChip[aria-expanded="true"] {
	background: var(--elsa-surface, #ffffff);
	box-shadow: inset 0 0 0 1px var(--elsa-pane-window-border);
	outline: none;
}

/*  キーボードで来たことは分かるようにする（枠だけでは弱い）。  */
.elsaAppExplorerIdentityChip:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: -2px;
}

.elsaAppExplorerIdentityChipCompany,
.elsaAppExplorerIdentityChipUser {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*
		**大きさは2つで1つの宣言**（2026-08-31の利用者決定）。会社名と氏名を完全に
		同格にするため、氏名だけが持っていた`.85em`をここへ引き上げた。**別々に
		書かない**——片方だけを直したときに静かにずれるからで、会社名が1em・氏名が
		0.85emのままだった直前の状態がまさにそれである。

		2026-09-02（Issue #2689 段階3）に**外観設定の項目**になった（利用者決定の
		「アカウントの文字サイズ」）。既定はフォーム文字サイズの85%の実測から14pxで、
		**2つで1つの宣言**、という決めごとは変えていない。
	*/
	font-size: var(--elsa-account-font-size, 14px);
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	**会社名を強調しない**（2026-08-31の利用者指示。実画面 Ver.f727f168 を見ての判断）

	「パンくず右端のアカウントチップで**会社名が目立ちすぎている**ので、氏名と同じ
	強調なしの表示に揃えてください」。チップは*いま誰で入っているか*を静かに示すもので、
	帯の中で最も目を引く要素になってはいけない（＞マーク・スクロールバーと同じ
	「普段は静かに」の作法である）。

	**外したのは太さだけ。** 色はもともとどちらも指定を持たず、チップの`color: inherit`
	から同じものを継いでいる（＝色の強調は最初から無い）。**幅の上限（12em）は残す**
	——利用者の条件が「チップ全体の幅・帯の高さ34.8pxは維持」であり、長い会社名が
	チップを押し広げない歯止めはそのまま要るためである。

	**文字の大きさも揃えた**（2026-08-31の利用者決定の追記。「会社名の文字サイズも氏名と
	同じに。チップは数px狭くなってよい」）。最初は太さと色だけを揃え、大きさは
	「幅は維持」と衝突するとして残していたが、**数px狭くなってよいと決まったので
	完全に同格にした。** 宣言は上の共有規則に1つだけ置く（片方だけが持つ形へ戻さない）。

	**帯の高さは動かない。** 帯の高さを決めているのは道筋の段（28px）であり、チップは
	それより低くなるだけである（小さくする側では帯は伸びない）。

	**狭い画面（〜767px）の区画は触らない。** あちらは旧いスマホメニュー準拠
	（`.elsaNavCompanyName`と同じ1.05em・700）で、この指示の対象ではない。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*
	幅の上限は`em`なので、大きさを揃えたぶん上限も一緒に縮む（会社名12em＝約143px）。
	長い会社名がチップを押し広げない歯止め、という役目は変わらない。
*/
.elsaAppExplorerIdentityChipCompany { max-width: 12em; }
.elsaAppExplorerIdentityChipUser { max-width: 9em; }

/*
	**開いたメニューは`position: fixed`である。** 窓（`.elsaPaneWindow`）は角丸の外を
	切るために`overflow: clip`を持つので、帯の中から下へ垂らすと切り落とされる。
	画面に対して置き、はみ出さないよう`core/js/elsa_app_explorer.js`が位置を測って
	収める（左右も上下も画面の内側へ寄せ直す）。
*/
.elsaAppExplorerIdentityMenu {
	position: fixed;
	z-index: 40;
	box-sizing: border-box;
	min-width: 220px;
	max-width: min(90vw, 320px);
	padding: 4px;
	border: 1px solid var(--elsa-pane-window-border);
	border-radius: 8px;
	background: var(--elsa-surface, #ffffff);
	box-shadow: 0 8px 24px rgba(36, 51, 63, .18);
}
/*  `hidden`属性のとおり本当に隠す（この規則より上で`display`を持たせない）。  */
.elsaAppExplorerIdentityMenu[hidden] { display: none; }

/*  開いた先でだけ役割（権限グループ）を読む。チップは会社名と氏名だけの小さな面である。  */
.elsaAppExplorerIdentityMenuHead {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 10px 8px;
	border-bottom: 1px solid var(--elsa-pane-window-border);
	margin-bottom: 4px;
}
.elsaAppExplorerIdentityMenuCompany { font-weight: 700; overflow-wrap: anywhere; }
.elsaAppExplorerIdentityMenuUser { font-size: .85em; overflow-wrap: anywhere; }

.elsaAppExplorerIdentityMenuItem {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--elsa-form-control-height, 34px);
	padding: 0 10px;
	border-radius: var(--elsa-field-control-border-radius, 4px);
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease;
}
.elsaAppExplorerIdentityMenuItem:hover,
.elsaAppExplorerIdentityMenuItem:focus-visible {
	background: var(--elsa-pane-window-band);
	outline: none;
}
.elsaAppExplorerIdentityMenuItem:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: -2px;
}
/*  いま開いている画面は行き先ではない。木の現在地と同じ塗り方にする。  */
.elsaAppExplorerIdentityMenuItem[aria-current="page"] { font-weight: 700; }
/*  ログアウトだけは他の操作と意味が違うので、線1本で分ける（色は変えない）。  */
.elsaAppExplorerIdentityMenuItem--logout {
	margin-top: 4px;
	border-top: 1px solid var(--elsa-pane-window-border);
	border-radius: 0 0 4px 4px;
}

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

	QAを終了（Issue #2634）

	**この行だけは行き先ではなく操作である。** 既存の正規ルートは
	`POST /qa/session/exit/`（QA専用CSRF）なので`<a>`では出せず、フォームと
	ボタンになる。**姿は隣の行とまったく同じにする**——同じ高さ・同じ余白・
	同じ触れたときの塗り。QA中だけ現れる行が、ここだけ違う顔で立たないように
	する。

	**器（`<form>`）は`display: contents`で消す。** メニューは`role="menu"`の
	直下に行が並ぶ作りなので、あいだに箱が1つ増えると行の幅と間隔が崩れる。
	消えるのは箱だけで、ボタン自身は`role="menuitem"`のまま辿れる。

	ログアウトと同じく線1本で分ける（並びは旧メニューと同じ「QAを終了 →
	ログアウト」）。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerIdentityForm { display: contents; }
.elsaAppExplorerIdentityMenuItem--qa-exit { margin-top: 4px; }
/*
	ボタンの既定の姿（地色・字・寄せ）を消して、隣の行と同じ面にする。

	**色はここで決めない。** 行の色は行のクラスが持っており（PCのメニューは
	`color: inherit`、スマホのログアウトは`#555`）、`button.…`はそれより詳細度が
	1つ高い。ここで色を書くと**行のクラスの色を上書きする**——2026-09-01の実画面で、
	スマホのQA終了だけが`#333`になり、真下のログアウト（`#555`）とずれていた。
*/
button.elsaAppExplorerIdentityMenuItem,
button.elsaAppExplorerIdentityPaneLogout {
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
/*
	**幅と枠はボタンより強い側で決める。**

	`<button>`は`display: flex`にしても**内容の幅までしか広がらない。** 2026-09-01の
	実画面で、隣の行が210pxのところQA終了だけ82pxで、触れたときの塗りが文字のぶん
	しか出ていなかった。行いっぱいの幅をここで明示する。

	枠も、`button.…`は`.…`より詳細度が1つ高いので、ここで`border: 0`だけを書くと
	行ごとの線（QA終了の上の1本）まで消える。消すのと引くのを同じ強さの規則で持つ。

	**スマホのログアウトの幅（80%）はここで触らない。** あちらは行のクラスが持って
	おり、ここで`width`を書くと詳細度で勝って80%を潰す。
*/
button.elsaAppExplorerIdentityMenuItem {
	width: 100%;
	border: 0;
}
button.elsaAppExplorerIdentityMenuItem--qa-exit {
	border: 0;
	border-top: 1px solid var(--elsa-pane-window-border);
}

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

	著作権表記（2026-08-31の[USER DECISION]・Issue #2169）

	情報バーの右端から**アカウントメニューの最下部**へ移した。**押せる行ではない**
	ので、操作の行（`.elsaAppExplorerIdentityMenuItem`）の高さも塗りも借りない——
	借りると、マウスを乗せたときに押せそうな顔になる。

	PC（ドロップダウン）とスマホ（アカウント区画）で**同じ静かさ**にする。文字は
	情報バーの刻印と同じ一段静かな色である。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerIdentityMenuCopyright,
.elsaAppExplorerIdentityPaneCopyright {
	display: block;
	padding: 6px 10px 2px;
	color: var(--elsa-text-muted, #667085);
	font-size: .85em;
	white-space: nowrap;
}
/*
	スマホのメニューの一番下の著作権（Issue #4603）は左ペインの直下に居る。
	**768px以上では出さない**（PCの置き場は右上のチップのメニュー）。狭い画面の
	`@media`の中で`display: block`へ戻す。
*/
.elsaAppExplorerNavPane > .elsaAppExplorerIdentityPaneCopyright { display: none; }

/*━━━ 右ペインの上部のボタン行 ━━━*/

/*
	**行は折り返さない。** 入りきらない道具は共通の畳み（`elsa_pane_window_overflow.js`）が
	右から「…」へ移す。測る幅は**右のペインの列の幅**である（2026-09-01の帯廃止。
	それまでは窓の全幅を測っていたが、左ペインの上には道具を置かなくなった）。
*/
.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerActions {
	grid-area: actions;
	display: flex;
	align-items: center;
	/*  ボタン同士の隙間は窓のトークン1つ（2026-09-03の利用者指摘・2026-09-06の1本化）。  */
	gap: var(--elsa-pane-window-band-gap);
	min-width: 0;
	/*
		**高さも窓のトークン1つ**（2026-09-06の利用者指摘）。以前はここだけ
		`--elsa-form-control-height`（入力欄の高さ）を読んでおり、ボタンの高さ
		（28px）とも、検索しか無い画面の行の高さとも食い違っていた。
	*/
	min-height: var(--elsa-pane-window-band-height);
	overflow: hidden;
	flex-wrap: nowrap;
	/*  余白・地色・下線は共通の帯（`.elsaPaneWindowBand`）のままで、値を写し取らない。  */
	border-bottom: 1px solid var(--elsa-pane-window-border);
}

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

	**押せるものが1つも無い行は場所を取らない**（2026-09-01の[USER DECISION]・後続列①）

	利用者決定は「道具の無い画面は行そのものを出さない＝縦スペース回収」である。
	**それでも器そのものはHTMLへ出す**——中身を差し替えるクライアント3本（取引先情報・
	みんなのオフィス・Amazon注文情報）が`[data-app-explorer-tools]`でこの器を掴んで
	おり、器が消える画面があるとその画面を直接開いた人のクライアントが丸ごと止まる
	（2026-08-30に印の綴りを変えて実際に起こした壊れ方である）。

	**場所を取らせないのはここの仕事**である。押せるもの（ボタン・リンク・入力）も、
	自動保存の状態文も無い行を`display: none`にする。空のSTATUSは将来の保存結果の
	受け口なのでDOMには残すが、文字が入るまでは行を立ち上げない。畳みの「…」（`elsa_pane_window_overflow.js`が
	足すボタン）は入りきらない道具が在るときだけ`hidden`が外れるので、`:not([hidden])`で
	数に入れない——入れると、空の行にも常に`button`が1つ在ることになって畳めない。

	入力フォームのとき（＝器は在るが中身が空）に効くのがこの規則で、**そのぶん右の
	ペインの本文がパンくずのすぐ下から始まる。**

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerActions:not(:has(button:not([hidden]), a, input, select, textarea, .elsaStatusBlock:not(:empty))) {
	display: none;
}

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

	**ナビゲーション型TABの帯そろえ**（2026-09-14の利用者裁定・Issue #3686）

	共通TABブロックを使う画面で、タブを切り替えるとTABの並び自体が縦に動く
	不具合があった。原因はこの上の規則——**道具の帯は画面ごとに中身が変わり、
	空なら行ごと畳む**。統合窓の「ナビゲーション型TAB」（`elsa_field_block_tab_markup()`
	の`$_navigation`。クリックのたびに別のEnvironment操作へ実際に遷移する）は、
	タブを切り替えるたびに右ペイン全体を差し替えるため、道具の帯の中身も
	タブごとに変わる。実測（development環境の「容量の共有」⇄「DB使用量」）:
	「容量の共有」は帯に「作成する」を持つが「DB使用量」は道具を持たず、
	帯が畳まれた分だけ下のTABの並びが約40px上へ動いた。

	**直すのは並びを持つTABブロック1か所**——画面ごとにこの帯へ手を入れない。
	呼び出し元が「このタブの並びには帯を使うタブがある」と分かっているときだけ
	`option.reserve_band`（`elsa_field_block_tab_markup()`の最後の引数）を渡し、
	そのTABブロックの根に`data-elsa-tab-reserve-band="true"`が立つ。**その印が
	無い並び（帯を使うタブが1つも無い画面）は今までどおり畳まれたまま**——
	CSSはこの印の有無だけで判定し、道具の帯の中身を見て推測しない。

	**畳まないだけで、見た目は足さない。** 対象の`.elsaAppExplorerActions`は
	既に自分の余白・下線・地色を持っている（このファイルの上、および
	`core/css/elsa_pane_window.css`の`.elsaPaneWindowBand`）。ここが上書きするのは
	`display`と、下の1行だけの高さ調整なので、空のときは「何も乗っていない、
	帯を使うタブと同じ高さの帯」がそのまま出る——枠線の重なりや余分な線は増えない。

	**高さを`+1px`する理由。** `--elsa-pane-window-band-height`（`elsa_pane_window.css`）は
	「上下の余白 × 2 ＋ ボタンの高さ」だけの式で、この帯自身が持つ`border-bottom: 1px`を
	数えていない。ボタン・リンクが実際に載る帯は、内容物の高さでこの1pxぶん床（`min-height`）
	より高く育つため実測は「トークン＋1px」になる——ここが空のまま素通りすると、
	ちょうどトークンどおりの高さで止まり、帯を使う隣のタブより1px低くなる
	（実測は`tests/tab_band_reserve_browser_test.js`）。トークン自体は帯全般の式なので
	ここでは変えず、**この上書き規則の`min-height`にだけ+1pxを足して合わせる。**

	**`[data-app-explorer-tools]`を足して詳しさを上げている。** 上の畳む規則
	（`:not(:has(...))`）と同じ4クラスだけでは詳しさが同点になり、ソース順に
	頼る脆い勝ち方になる。この画面固有の実装印を1つ足すことで、ファイルの
	並び順に関係なく必ずこちらが勝つ。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaPaneWindow.elsaAppExplorer:has([data-elsa-tab-reserve-band="true"]) > .elsaAppExplorerActions[data-app-explorer-tools].elsaPaneWindowBand {
	display: flex;
	min-height: calc(var(--elsa-pane-window-band-height) + 1px);
}

/*
	行の中のまとまり。線や地色で仕切らない——1本の行を仕切ると、結局2本に見える。
*/
.elsaAppExplorerActionGroup {
	display: flex;
	align-items: center;
	gap: var(--elsa-pane-window-band-gap);
	min-width: 0;
}

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

	**行の中で隙間を作る器は、どれも窓のトークンを読む**（2026-09-06の利用者指摘）

	行の中には、画面ごとの器（取引先・みんなのオフィス・カレンダー・設定や出荷）、CONTROLLER、
	共通の一覧ツールバーが入れ子で並ぶ。それぞれが自分で`gap`を書いていたため、
	**同じ意味の隙間が画面ごとに違う値**になっていた（実測で6pxと8pxが混在）。

	**ここが唯一の宣言である。** 画面ごとのCSSからは`gap`を消した——残っていると、
	その画面だけが違う隙間に戻る。器の名前をここに並べるのは、器そのものは画面が
	作る（クラス名は画面が持つ）ためで、**値は1つしか無い。** 統合窓でない窓の帯
	（`.elsaPaneWindowBand`。TREEブロック検証の畳みの見本など）の器も同じ宣言で読む
	（Issue #4935。見本だけが4pxだったのを全画面の巡回が見つけた）。

	**CONTROLLERはここに並べない。** ブロックのルートを外の祖先から装飾しない規則
	（`tests/field_block_style_test.php`）に触れるので、帯の姿の隙間はCONTROLLER
	自身のmodifier（`.elsaController--band`。`core/css/base.css`）が同じトークンを読む。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerActions [class*="ToolGroup"],
.elsaPaneWindowBand [class*="ToolGroup"],
.elsaAppExplorerActions .elsaSettingsExplorerController,
.elsaAppExplorerActions .elsaCalendarBandTools,
.elsaAppExplorerActions .elsaExplorerListToolbar,
.elsaAppExplorerActions .elsaExplorerListToolbarGroup {
	gap: var(--elsa-pane-window-band-gap);
}

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

	**行の中の器も1行に並べる**（Issue #4935）

	ボタンエリアは1段である（上の「右ペインの上部のボタン行」）。ところが画面が作る器
	（`elsaSettingsExplorerController`・`elsa...ToolGroup`）の多くは`display`を書いておらず
	ブロックのままで、中にCONTROLLER（それ自体が1行のブロック）を2つ以上入れた画面では
	**CONTROLLERが縦に積まれて2〜4段**になっていた（実測: 出荷の書類の画面で4段）。
	縦に積まれると幅は余るので、共通の畳み（「…」）も動かない。

	**ここが唯一の宣言である。** 画面ごとのCSSに分岐を足さない。器の名前を並べるのは
	上の隙間の宣言と同じ理由（器そのものは画面が作る）。**ボタンとボタンの隙間は
	上の隙間の宣言が持つ**（この器の名前もそこへ並べてある。ここで`gap`を書かない）。
	`.elsaController`はここに並べない（外の祖先から塗らない。上の隙間の宣言と同じ規則）——
	器が1行のflexになれば、CONTROLLERは行の1要素として横に並ぶ。

	**中身を入れ替える器（`.elsaTabBandTools`・`[data-band-tools-slot]`）はここに並べない。**
	それは下の規則（Issue #4829）が`display: contents`で透かす——同じ器をここでflexにすると
	器が1つの箱に戻り、帯の道具を1つずつ畳めなくなる。賃貸の器
	（`elsaRentalExplorerToolGroup`）は名前に`ToolGroup`を含みつつ`data-band-tools-slot`も
	持つので、`:not([data-band-tools-slot])`で外す（外さないと詳しさでこちらが勝つ）。

	畳まれた器（`[data-overflow-folded]`）と`hidden`の器は外す——同じ詳細度の
	畳みの規則（`elsa_pane_window.css`）とファイルの読み込み順で勝ち負けが決まらない
	ようにするためである。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerActions [class*="ToolGroup"]:not([hidden]):not([data-overflow-folded="true"]):not([data-band-tools-slot]),
.elsaAppExplorerActions .elsaSettingsExplorerController:not([hidden]):not([data-overflow-folded="true"]) {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	min-width: 0;
}

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

	**中身を入れ替えるための器は、行の並びに箱として参加しない**（Issue #4829）

	画面は「記録を選び替えたら中身だけを入れ替える」ために、道具を器
	（タブに連動する`.elsaTabBandTools`、画面が置く`data-band-tools-slot`の器）で
	包む。器が普通の箱のままだと、器の中のCONTROLLERが2つ以上あるとき、器ごとに
	縦へ積まれて**行が2段・3段に割れる**（1280pxの物件情報・契約・請求で実際に割れていた）。
	ボタンエリアは幅に関わらず常に1段で、狭いときに増やすのは「…」の中身である
	（`docs/development-policy.md` 5節）。

	**器は`display: contents`で透かす。** DOMは動かさないので、器を名指しして中身を
	入れ替えるJSも、タブの出し入れ（`hidden`）もそのまま働き、中の道具は行の
	直接の並びとして測られて、入りきらない分は右から「…」へ畳まれる
	（`core/js/elsa_pane_window_overflow.js`は1文字も変えていない）。
	`hidden`の器は透かさない（隠す指定を詳しさで負かさない）。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerActions .elsaTabBandTools:not([hidden]),
.elsaAppExplorerActions [data-band-tools-slot]:not([hidden]) {
	display: contents;
}

/*
	この画面の説明の「?」（Issue #2887）。**どの画面でも行のいちばん右**に立つ。
	道具を1つも持たない画面（綿半CSV変換）でも左端へ寄らないよう、置き場所は
	並び順ではなく`margin-inline-start: auto`が決める。**縮ませない**——
	共通の操作面（`--elsa-block-action-height`）は狭い画面でも守る。
*/
.elsaAppExplorerActionGroup--help {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

/*━━━ ペイン（送るのはここだけ） ━━━*/

.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerNavPane,
.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerMain {
	min-height: 0;
	overflow: auto;
	/*  端まで送ったあとページごと動かない（エクスプローラーと同じ）。  */
	overscroll-behavior: contain;
}

/*
	**先頭に置いたTABの並びは、ボタンエリアと同じく送らない行になる**（Issue #4204、
	オーナー決定2026-09-29）。右のペイン（`.elsaAppExplorerMain`）は普段は自分ごと送るが、
	送る箱の先頭にTAB（`data-elsa-tab-leading`、`core/js/elsa_tab.js`が付ける）が
	あるときだけ、ペインから選択中の本文（`.elsaTabPanel`）までを縦のflexでつなぎ、
	**送るのは本文だけ**にする。並びはその上の固定の行に残り、スクロールバーも本文の
	範囲だけに付く。途中に置いたTAB（見出しの後ろ等）・タブの中のタブは目印を
	持たないので、今までどおり本文と一緒に流れる。画面ごとの組み替えは持たない
	（間の器は「先頭のTABを含む」という構造だけで選ぶ）。一覧の帯モードは元から窓の
	行（`grid-area: tabs`）。狭い画面はページ送りなので下の`@media`の側
	（ボタンエリアと同じ`sticky`）が受け持つ。
*/
@media (min-width: 768px) {
	.elsaPaneWindow.elsaAppExplorer:not(.is-search-in-band) > .elsaAppExplorerMain:has(.elsaTabBlock[data-elsa-tab-leading="true"]) {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		/*  TABの側（core/css/elsa_tab.css）が読む切り替え。ブロックのルートは外から装飾しない。  */
		--elsa-tab-fixed-row-display: flex;
		--elsa-tab-fixed-row-overflow: auto;
	}
	.elsaPaneWindow.elsaAppExplorer:not(.is-search-in-band) > .elsaAppExplorerMain:has(.elsaTabBlock[data-elsa-tab-leading="true"]) > :not(.elsaTabBlock[data-elsa-tab-leading="true"]) { flex: none; }
	.elsaPaneWindow.elsaAppExplorer:not(.is-search-in-band) > .elsaAppExplorerMain:has(.elsaTabBlock[data-elsa-tab-leading="true"]) :has(.elsaTabBlock[data-elsa-tab-leading="true"]) {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		/*  間の器の幅は元の置き方のまま（縦のflexで横いっぱいに伸ばす。`.block .right`の計算幅も外す）。  */
		width: auto;
		min-width: 0;
		min-height: 0;
	}
}

.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerNavPane {
	grid-area: tree;
	color: var(--elsa-tree-text-color, #333333);
}
.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerMain { grid-area: main; }

/*
	境界はボタン行と本文の行を貫く1本である。共通の窓が`grid-area: split`を持つので、
	上の`grid-template-areas`が2行にまたがる形を宣言するだけでよい。
*/

/*━━━ 情報表示エリア（ステータスバー） ━━━*/

/*
	Windowsエクスプローラーの最下部（「11個の項目」）と同じ発想。**画面が数えた統計**を
	並べるだけで、ここが数を数えることはない。統計が無い画面でも器は残す（最下段だけが
	高さを失うと、選び直した瞬間に窓の高さが跳ねる）。
*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

	最下段の並びと、**書式の正本**（2026-08-31の[USER DECISION]・Issue #2169）

	左＝この画面の数（「ラベル 数」を「・」でつないだ1つのまとまり）、
	右＝接続状況の入口、いちばん右＝版の刻印である。

	利用者指摘は「**件数表示と接続警告で書式がばらばら＝統一感がない**」だった。
	原因は、画面ごとに足されてきた結果、**文字の大きさ・色・間の空きが宣言ごとに
	違っていた**ことである。そこで**値をトークンへ1組だけ置き**、統計・区切り・
	刻印がすべてそこを読む。**新しい見た目を足すときも、この5つ以外の数字を
	書かない。**

	著作権はここから外れ、アカウントメニューの最下部へ移った（同日の[USER DECISION]。
	`core/php/function/nav_account.php`）。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerStatusBar,
.elsaAppExplorerNavInfo > .elsaAppExplorerStatusBar {
	/*  書式のトークン。**1種類しか無い**（画面ごとに上書きしない）。  */
	--elsa-app-explorer-status-font-size: var(--elsa-status-font-size, 14px);
	/*
		統計・接続状況・刻印を同じ外形高と垂直中心で並べる。
		2026-09-02の利用者指示「もう少し高さを抑えましょう」で2→1.5em相当へ詰めた
		（文字の大きさは変えない）。
	*/
	--elsa-app-explorer-status-line-height: 1.5;
	/*
		**情報エリアの色と大きさは外観設定の項目である**（2026-09-02の利用者決定。
		Issue #2689 段階3）。既定は今の値そのまま（地は帯の面、字は補助文字、
		大きさは`.85em`＝フォーム文字サイズの85%の実測から14px）である。
	*/
	--elsa-app-explorer-status-color: var(--elsa-status-text-color, #667085);
	--elsa-app-explorer-status-meta-color: var(--elsa-status-text-color, #667085);
	/*  ラベルと数のあいだの空き。  */
	--elsa-app-explorer-status-pair-gap: 4px;
	/*  まとまり（統計・警告・刻印）どうしの空き。  */
	--elsa-app-explorer-status-group-gap: 16px;

	grid-area: status;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px var(--elsa-app-explorer-status-group-gap);
	box-sizing: border-box;
	/*  高さの正本は窓が名乗る変数である（下の注記）。  */
	min-height: var(--elsa-app-explorer-status-height, 28px);
	padding: 2px 10px;
	border-top: 1px solid var(--elsa-pane-window-border);
	background: var(--elsa-status-background-color, #f5f7f9);
	color: var(--elsa-app-explorer-status-meta-color);
	font-size: var(--elsa-app-explorer-status-font-size);
	line-height: var(--elsa-app-explorer-status-line-height);
}

/*
	統計の器。**中身は画面が差し替える**ので、刻印はこの外に置いてある
	（`setStatus()`はこの器の子を丸ごと入れ替える）。

	**横の空きは持たない**（`column-gap: 0`）。項目のあいだを空けるのは下の「・」で、
	区切り文字と空きの両方を持つと、まとまりが2種類の間隔で並ぶことになる。
*/
.elsaAppExplorerStatus {
	display: flex;
	flex: 1 1 0;
	flex-wrap: nowrap;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	column-gap: 0;
	row-gap: 2px;
	color: var(--elsa-app-explorer-status-color);
}

/*
	**「ラベル 数」が1項目である。** ラベルと数は同じ色・同じ大きさで、あいだは
	トークンの空き1つだけ——`:`は使わない（2026-08-31の[USER DECISION]）。
*/
.elsaAppExplorerStatusItem { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
/* ヒントは統計の位置だけを一時利用し、右側の監査・接続・容量・版を残す。 */
.elsaAppExplorerStatus[data-app-explorer-hint-active] { display: none; }
.elsaAppExplorerHint { display: block; white-space: nowrap; text-overflow: ellipsis; }
.elsaAppExplorerStatusLabel,
.elsaAppExplorerStatusValue { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.elsaAppExplorerStatusItem::after { flex: 0 0 auto; }

/*
	**空きはラベルが在るときだけ。** 見出しの無い1文（`"合計 442,470 Byte"`）は
	値だけで出るので、先頭に空きが付くと「・」との間が間延びする。
*/
.elsaAppExplorerStatusLabel + .elsaAppExplorerStatusValue { margin-inline-start: var(--elsa-app-explorer-status-pair-gap); }

.elsaAppExplorerStatusValue { font-variant-numeric: tabular-nums; }

/*
	項目の区切りは「・」である。**HTMLへ書かない**——`setStatus()`で差し替える
	画面と、サーバーが描く画面の2か所へ区切り文字を持たせないためで、最後の項目に
	だけ付け忘れる、という一番起きやすい食い違いもここで消える。

	**末尾側（`::after`）に付ける。** 先頭側だと、折り返した行が「・」で始まる。
*/
.elsaAppExplorerStatusItem:not(:last-child)::after { content: "・"; }

/*
	監査・接続・容量・版は統計と同じ1行へ置く（Issue #3389）。版と各入口の幅を
	確保し、残り幅を統計へ渡す。画面固有の印が在る場合は、そのcaptionだけ縮める。
*/
.elsaAppExplorerStatusMetaGroup {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	align-items: center;
	margin-inline-start: auto;
	gap: 4px var(--elsa-app-explorer-status-group-gap);
	min-width: 0;
}

/*
	版の刻印。**統計より一段静かな色**（`--elsa-app-explorer-status-meta-color`）で
	出す。毎日変わらない文字が、いま数えた件数より目立ってはいけない。

	独立したフッターでは`opacity: .65`を重ねて薄くしており、監査でコントラストが
	2.76:1しか無いと指摘されていた。ここは薄める処理を持たない。

	**右端へ寄せる余白は持たない**（以前はここに`margin-inline-start: auto`が
	在ったが、`.elsaAppExplorerStatusMetaGroup`が接続状況ごと右へ寄せるため、
	ここで重ねる必要が無い。重ねたままだと、器の中で接続状況と版のあいだへ
	余計な空きができる）。
*/
.elsaAppExplorerStatusMeta {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px 12px;
	color: var(--elsa-app-explorer-status-meta-color);
}

/*  配信日時は`title`＝マウスオーバーで出る（2026-08-31の[USER DECISION]）。  */
.elsaAppExplorerStatusMetaItem { white-space: nowrap; }
.elsaAppExplorerStatusMetaItem[title] { cursor: help; }

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

	接続状況（Issue #2616）

	正常時も残る共通入口。通常時は枠・左線・背景を持たず、アカウントチップと同じく
	触れたときと開いているときだけ白い面と内側の1px線を出す。

	**統計と刻印のあいだに立つ。** 左＝画面の統計、右＝アプリの刻印という並びは
	そのままで、警告はその間へ入る（刻印の`margin-inline-start: auto`が右端へ
	留める作りをそのまま使う）。

	**色は接続状態の共通tokenを使う。** 青・黄・赤・灰の4分類で、文字へ状態色を
	乗せない。トリガーのaccessible nameとパネル内の状態文字が意味を補う。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerStatusAlert {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.elsaAppExplorerStatusAlertCaption { white-space: nowrap; color: var(--elsa-app-explorer-status-meta-color, var(--elsa-text-muted, #667085)); }
.elsaAppExplorerStatusAlert--mark { flex: 0 1 auto; }
.elsaAppExplorerStatusAlert--mark .elsaAppExplorerStatusAlertSummary { min-width: 0; }
.elsaAppExplorerStatusAlert--mark .elsaAppExplorerStatusAlertCaption { overflow: hidden; text-overflow: ellipsis; }

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

	情報バーの要約（2026-08-31の利用者指示）

	丸と短い名札を出す。押すか、マウスを乗せると詳細が開く。
	ボタンなのでキーボードだけでも到達できる。

	通常時は地の文のままにし、hover・focus・openだけアカウントチップと同じ白い面と
	内側の1px線にする。`box-shadow`なので線を出しても寸法は変わらない。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerStatusAlertSummary {
	--elsa-connection-color: var(--elsa-connection-state-idle);
	display: inline-flex;
	align-items: center;
	gap: .5em;
	box-sizing: border-box;
	margin: 0;
	padding: 0 .6em;
	border: 0;
	border-radius: var(--elsa-field-control-border-radius, 4px);
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: var(--elsa-app-explorer-status-line-height);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.elsaAppExplorerStatusAlertSummary.is-healthy { --elsa-connection-color: var(--elsa-connection-state-connected); }
.elsaAppExplorerStatusAlertSummary.is-warning {
	--elsa-connection-color: var(--elsa-connection-state-warning);
}
.elsaAppExplorerStatusAlertSummary.is-error { --elsa-connection-color: var(--elsa-connection-state-error); }

/*  アカウントチップと同じ顔。通常時の寸法を変えず、開いているあいだも保つ。  */
.elsaAppExplorerStatusAlert:not([data-app-explorer-capacity]) > .elsaAppExplorerStatusAlertSummary:hover,
.elsaAppExplorerStatusAlert:not([data-app-explorer-capacity]) > .elsaAppExplorerStatusAlertSummary:focus-visible,
.elsaAppExplorerStatusAlert:not([data-app-explorer-capacity]) > .elsaAppExplorerStatusAlertSummary[aria-expanded="true"] {
	background: var(--elsa-surface, #ffffff);
	box-shadow: inset 0 0 0 1px var(--elsa-pane-window-border);
	outline: none;
}

.elsaAppExplorerStatusAlert:not([data-app-explorer-capacity]) > .elsaAppExplorerStatusAlertSummary:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: -2px;
}

/* 容量はゲージ自身の線を保ち、hover・focus・openで外枠を増やさない。 */
[data-app-explorer-capacity] > .elsaAppExplorerStatusAlertSummary { outline: none; }

/*
	●そのもの。トリガーと各行が**同じ規則**を使う。文字サイズに追従する真円で、
	親の`align-items: center`に任せるためbaseline補正や移動は持たない。
*/
.elsaAppExplorerStatusAlertMark {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--elsa-app-explorer-status-mark-size);
	height: var(--elsa-app-explorer-status-mark-size);
	border-radius: 50%;
	background: var(--elsa-connection-color);
	box-shadow: none;
}

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

	「全ての接続状況」のパネル（2026-08-31の利用者指示）

	要約を押す（またはマウスを乗せる）と開く。**台帳の全部**が並ぶ。

	**●は4色**——接続済み＝安全色、未確認＝注意色、エラー＝警告色、未設定＝灰。
	3色は外観設定に従い、丸に内側の枠線は付けない（Issue #3308）。

	**画面に対して置く**（`position: fixed`）。窓は角丸の外を切る`overflow: clip`を
	持つので、最下段から上へ伸ばす面は切り落とされる。位置はクライアントが測って
	画面の内側へ収める（アカウントメニューと同じ関数）。

	**高さの上限を持つ。** 台帳が育っても画面からはみ出さず、中で送る。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaAppExplorerConnectionPanel {
	position: fixed;
	z-index: 60;
	box-sizing: border-box;
	min-width: 260px;
	max-width: min(360px, calc(100vw - 16px));
	max-height: min(60vh, 420px);
	overflow: auto;
	padding: 10px 12px;
	border: 1px solid var(--elsa-pane-window-border);
	border-radius: 6px;
	background: var(--elsa-surface, #ffffff);
	color: var(--elsa-content-text-color, #333333);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	/*
		**文字は画面の標準に従う**（Issue #3826・2026-09-17のオーナー指摘）。ここが
		`1rem`だとブラウザ既定の16pxに落ち、右ペインの入力欄（14px）と食い違う。
		外観設定「右ペインの文字サイズ」1本に連動させ、器も行も独自の大きさ・太さを
		持たない。
	*/
	font-size: var(--elsa-form-font-size, 16px);
}

.elsaAppExplorerConnectionPanel[hidden] { display: none; }

/*
	ボタンエリア（Issue #3750・#3826）。**渡されたときだけHTMLに現れる**ので、
	渡さない呼び出し（接続状況・容量・画面ひとつぶんの印）はこの器ごと出ない
	（2026-09-17のオーナー決定で「?」も無くなり、監査の「今すぐ検査」だけが残る）。
	**本文にボタンを置かない。**
*/
.elsaAppExplorerConnectionPanelHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--elsa-block-spacing, 8px); margin-block-end: 4px; }
.elsaSystemAuditRun { flex: 0 0 auto; height: var(--elsa-block-action-height, 28px); min-height: var(--elsa-block-action-height, 28px); white-space: nowrap; }
.elsaSystemAuditRunStatus:empty { display: none; }
.elsaSystemAuditRunStatus { flex: 1 1 100%; min-width: 0; color: var(--elsa-text-muted, #667085); overflow-wrap: anywhere; }

.elsaAppExplorerConnectionList { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

/*
	1件ぶん。**●と名前（＋状態）が1行**である。`.is-…`が●の色を決める
	（`--elsa-connection-color`を差し替えるだけ）。
*/
.elsaAppExplorerConnectionRow {
	--elsa-connection-color: var(--elsa-connection-state-warning);
	display: grid;
}
.elsaAppExplorerConnectionRow.is-healthy {
	--elsa-connection-color: var(--elsa-connection-state-connected);
}
.elsaAppExplorerConnectionRow.is-error {
	--elsa-connection-color: var(--elsa-connection-state-error);
}
.elsaAppExplorerConnectionRow.is-idle {
	--elsa-connection-color: var(--elsa-connection-state-idle);
}

.elsaAppExplorerConnectionRowHead { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; min-width: 0; }
/*
	名前は`<span>`のことも`<a>`のこともある（Issue #3565）。**下線は付けない**
	（利用者指示・デザイン上の理由）——押せることはホバー・フォーカスの色変化
	だけで伝える。色以外はplain textと同じ見た目にする。
*/
.elsaAppExplorerConnectionName {
	/*
		**太さは標準のまま**（Issue #3826）。ここだけ600にすると、同じ一覧の中で
		名前だけが太く、他の画面の一覧と見た目が揃わない。
	*/
	appearance: none;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: start;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}
.elsaAppExplorerConnectionName.is-actionable:hover,
.elsaAppExplorerConnectionName.is-actionable:focus-visible {
	color: var(--elsa-primary-color, #24333f);
}
/*
	行に残してよい数値（Issue #3826・2026-09-17 18:35〜18:45 JSTのオーナー決定）。
	監査・接続状況は渡さない。容量だけが行の形を崩さない割合（例「1.4%」）を渡す。
	大きさ・太さは持たない——器の文字サイズにそのまま従う。
*/
.elsaAppExplorerConnectionState { margin-inline-start: auto; min-width: 0; overflow-wrap: anywhere; color: var(--elsa-text-muted, #667085); }
/*
	行を押すと開く詳細（Issue #3826）。**開発者向けの診断だけ**がここへ入る。
	利用者の画面にはこの器ごと現れない。
*/
.elsaAppExplorerConnectionDetail { margin-block-start: 4px; padding-inline-start: 1.3em; color: var(--elsa-text-muted, #667085); overflow-wrap: anywhere; }
.elsaAppExplorerConnectionDetail[hidden] { display: none; }
.elsaAppExplorerConnectionDetail p { margin-block: 2px; }

/* 容量のゲージは接続と同じ意味色を使う。枠と塗りだけを持ち、文字は読み上げへ渡す。 */
.elsaAppExplorerCapacityGauge {
	display: inline-flex;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* popup本文の縮小とは分離し、行のゲージも情報帯の文字サイズに揃える。 */
	font-size: var(--elsa-app-explorer-status-font-size, inherit);
	width: 4em;
	height: var(--elsa-app-explorer-status-mark-size);
	border: 1px solid var(--elsa-pane-window-border);
	border-radius: 2px;
	background: transparent;
	overflow: hidden;
}
.elsaAppExplorerCapacityGaugeFill { flex: 0 0 auto; height: 100%; background: var(--elsa-connection-color); }
.elsaAppExplorerCapacityGauge.is-unavailable { border-color: var(--elsa-connection-state-warning); }

/* 長い数値だけは狭幅で折り返す。 */
.elsaAppExplorerCapacityPanel { min-width: min(260px, calc(100vw - 16px)); }

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

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

	右のペインは**カレンダー（上）とタスク（下）だけ**を、余白なくいっぱいに出す。
	あいだは左右のペインと**同じ境界の部品**を上下向きにした線1本で、掴んで高さの
	配分を変えられる。

	**左右の2ペインと同じ組み方**である——`[段] [境界] [段]`の3つを並べ、動くのは
	1段目の寸法を決めるCSS変数1つだけ（左右は幅、ここは高さ）。共通のクライアントが
	その変数へ`px`を書き込むので、**ここに書く既定値だけが画面ごとの違い**になる。

	**送るのは段の内側だけ。** 段そのものが`overflow: auto`を持ち、窓の外は動かない
	（「スクロールはペインの内側だけで起きる」という⓪の決定をそのまま守る）。

	**枠も影も持たない。** カレンダーは外枠を外した姿（`--flush`）で描かれ、一覧は
	もともと外周を持たない。2つが同じ白い面の上に並び、**あいだの1本だけが境目**に
	なる——これが「1枚の作業面」の姿である。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.elsaHomePanes {
	display: grid;
	/*
		動くのは1段目の高さだけ。2段目は残り全部で、`minmax(0, 1fr)`にしておかないと
		中身の高さで押し広げられ、段の中で送られなくなる。
	*/
	grid-template-rows: var(--elsa-home-top-height, 420px) auto minmax(0, 1fr);
	min-height: 0;
	height: 100%;
	background: var(--elsa-surface, #ffffff);
}

.elsaHomePanes--continuous { flex: 1 1 auto; }
.elsaHomePanes--single { grid-template-rows: minmax(0, 1fr); }

/*
	**トップだけ、右ペインの左右端まで使う。** 共通のペインは通常画面の本文を
	読みやすくするため左右10pxの余白を持つ（`elsa_pane_window.css`）。その余白を
	共通側から外すと、設定・一覧など全てのExplorerが端へ張り付いてしまう。

	トップはカレンダーとタスクを「1枚の作業面」として端まで出す画面なので、
	`index.php`だけが持つ`data-home-panes`を目印に、**左右だけ**共通余白ぶん広げる。
	上下余白・ペイン内スクロール・上下の境界は動かさない。

	**打ち消す量はペインが持つ項目そのものから導く**（Issue #3489 段階2・第1回）。
	ここに`-10px`と直値で書くと、利用者が外観設定の「右側の内容と外枠の間に取る
	余白」を変えたときだけトップの左右がずれる。
*/
.elsaSettingsExplorerMain--fill > [data-home-panes] { margin-inline: calc(-1 * var(--elsa-content-pane-padding, 10px)); }

.elsaHomePane {
	min-width: 0;
	min-height: 0;
	overflow: auto;
}

/*━━━ ボタン行の中の道具（分類の枝を持たない画面の共通形） ━━━*/

/*
	CONTROLLERは**右ペインのボタン行の中身**である（2026-08-30の利用者決定）。全幅の1行として
	描かれる既定を、行の1要素へ収める。**塗るのはCONTROLLER自身のmodifier
	（`option.variant => "band"`）で、画面のクラスから`.elsaController`は塗らない**
	（ブロックのルートを外の祖先が装飾しない規則。`tests/field_block_style_test.php`）。
*/
.elsaSettingsExplorerController { min-width: 0; flex: 1 1 auto; }

/*━━━ 一覧ツールバー（Issue #2610） ━━━*/

.elsaExplorerListToolbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	/*
		**内側余白は持たない**（2026-09-03の利用者指摘 → 2026-09-06に上下も0へ）。
		左右は行（`.elsaAppExplorerActions`）が持つので、ここでも空けると左だけ厚く
		なり右端と揃わない。**上下も同じ理屈**で、行の上下の余白へこの3pxが足されると、
		一覧の画面だけ帯が6px高くなっていた（利用者指摘「上下左右の隙間が画面によって
		異なる」の実体の1つ）。高さは行の`min-height`が保つ。
	*/
	padding: 0;
	/*  隙間は上の共通の宣言（窓のトークン）が与える。ここでは書かない。  */
}

/*
	帯の中では**隙間は`gap`だけが作る**（2026-09-03の利用者指摘の後始末）。共通の
	`.button`が持つ`margin-right: 8px`が残っていると`gap`と足し算になり、隙間が
	また2種類できる（実測: まとまりの中6+8=14px、境目6+8+6+1=21px）。トークンを
	1つにした意味が消えるので、道具の器の中だけ余白を0へ落とす。
*/
/*
	**祖先から塗らない。** 道具に付く印（`...Action` / `...MenuToggle`）は要素自身が
	持つクラスなので、ブロックのルートを外の祖先から装飾する規則違反にならない
	（`tests/field_block_style_test.php`）。

	**クラスを重ねているのは詳細度のため。** 勝たせたい相手は
	`.button.elsaCommandBlock:not(.elsaCommandBlock--wide)`（クラス3つ相当）で、
	印1つでは負ける（2026-09-03の配信後の実測で実際に負けていた）。**どれも同じ
	要素が持つクラス**なので、ブロックのルートを外の祖先から装飾しない規則は
	守っている。
*/
.button.elsaCommandBlock.elsaExplorerListToolbarAction,
.button.elsaExplorerListToolbarMenuToggle {
	margin: 0;
}

.elsaExplorerListToolbarGroup {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/*  隙間は上の共通の宣言（窓のトークン）が与える。ここでは書かない。  */
	min-width: 0;
}

/*
	まとまりの境目は**隙間の2倍＋区切り線**である（2026-09-03の利用者指摘）。行の
	隙間がまとまりの手前に1つ、この余白がもう1つ入るので、境目だけが素の隙間の
	2倍になる。区切りは線として明示するので、広い隙間の意味が読み取れる。
*/
.elsaExplorerListToolbarGroup + .elsaExplorerListToolbarGroup {
	padding-left: var(--elsa-pane-window-band-gap);
	border-left: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
}

.elsaExplorerListToolbarAction,
.elsaExplorerListToolbarMenuToggle {
	box-sizing: border-box;
	min-height: var(--elsa-block-action-height, 28px);
}

/*
	**図像だけのボタンの図像は、一覧の行の図像と同じ大きさ**（2026-09-03の利用者
	指示）。共通アイコンの既定は`1em`（帯の文字で14px）で、一覧の行の操作
	（16.8px）より明らかに小さかった。値は共通トークンが持つので、ここで名指しする
	のは「どの図像へ効かせるか」だけである。名前を持つ並べ替えは文字の隣に並ぶ
	図像として文字の大きさに従う。一方、表示は一覧を表す操作図像として、後段の
	専用規則でも同じ共通寸法を使う。
*/
.elsaExplorerListToolbarAction > .elsaCommonArrowUpIcon,
.elsaExplorerListToolbarAction > .elsaCommonFolderPlusIcon,
.elsaExplorerListToolbarAction > .elsaCommonDocumentPlusIcon,
.elsaExplorerListToolbarAction > .elsaCommonDownloadIcon,
.elsaExplorerListToolbarAction > .elsaCommonDeleteIcon,
.elsaExplorerListToolbarAction > .elsaExplorerListToolbarDocumentIcon,
.elsaExplorerListToolbarAction > .elsaExplorerListToolbarViewIcon {
	width: var(--elsa-block-action-icon-size);
	height: var(--elsa-block-action-icon-size);
}

.elsaExplorerListToolbarAction[href] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.elsaExplorerListToolbarMenuHost { position: relative; }

.elsaExplorerListToolbarMenuToggle {
	display: inline-flex;
	align-items: center;
	gap: .42em;
	padding-inline: .65em .5em;
	white-space: nowrap;
}

.elsaExplorerListToolbarSortIcon,
.elsaExplorerListToolbarDocumentIcon,
.elsaExplorerListToolbarViewIcon,
.elsaExplorerListToolbarChevron {
	display: block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background: currentColor;
}

.elsaExplorerListToolbarSortIcon {
	-webkit-mask: var(--elsa-icon-move) var(--elsa-icon-move-mask-position, center) / var(--elsa-icon-move-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	mask: var(--elsa-icon-move) var(--elsa-icon-move-mask-position, center) / var(--elsa-icon-move-mask-size, var(--elsa-icon-mask-size)) no-repeat;
}

.elsaExplorerListToolbarDocumentIcon {
	-webkit-mask: var(--elsa-icon-document) var(--elsa-icon-document-mask-position, center) / var(--elsa-icon-document-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	mask: var(--elsa-icon-document) var(--elsa-icon-document-mask-position, center) / var(--elsa-icon-document-mask-size, var(--elsa-icon-mask-size)) no-repeat;
}

.elsaExplorerListToolbarViewIcon {
	width: var(--elsa-block-action-icon-size);
	height: var(--elsa-block-action-icon-size);
	-webkit-mask: var(--elsa-icon-list) var(--elsa-icon-list-mask-position, center) / var(--elsa-icon-list-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	mask: var(--elsa-icon-list) var(--elsa-icon-list-mask-position, center) / var(--elsa-icon-list-mask-size, var(--elsa-icon-mask-size)) no-repeat;
}

.elsaExplorerListToolbarChevron {
	width: .8em;
	height: .8em;
	-webkit-mask: var(--elsa-icon-arrow-down) var(--elsa-icon-arrow-down-mask-position, center) / var(--elsa-icon-arrow-down-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	mask: var(--elsa-icon-arrow-down) var(--elsa-icon-arrow-down-mask-position, center) / var(--elsa-icon-arrow-down-mask-size, var(--elsa-icon-mask-size)) no-repeat;
}

.elsaExplorerListToolbarMenuToggle[aria-expanded="true"] .elsaExplorerListToolbarChevron,
.elsaCommonExpandedArrowDownIcon {
	transform: rotate(180deg);
}

/*
	**`<body>`直下へ置くので、文字の大きさを自分で持つ**（2026-09-03の利用者指摘
	「並べ替えのポップアップの文字が帯や一覧より明らかに大きい」）。画面に対して置く
	（`position: fixed`）ために器を`<body>`へ移すため、放っておくと帯（14px）ではなく
	`<body>`（16px）の文字を継ぐ。帯・一覧と同じ共通トークンを読む。
*/
.elsaExplorerListToolbarMenu {
	position: fixed;
	font-size: var(--elsa-form-font-size, 16px);
	z-index: 120;
	top: calc(100% + 4px);
	left: 0;
	box-sizing: border-box;
	min-width: 12em;
	max-width: min(24em, calc(100vw - 24px));
	padding: 4px;
	border: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: var(--elsa-field-control-radius, 4px);
	background: var(--elsa-surface, #ffffff);
	color: var(--elsa-font-color, #222);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.elsaExplorerListToolbarMenu[hidden] { display: none; }

.elsaExplorerListToolbarMenuItem {
	display: grid;
	grid-template-columns: 1em minmax(0, 1fr);
	align-items: center;
	column-gap: .55em;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--elsa-block-action-height, 28px);
	padding: .35em .55em;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.elsaExplorerListToolbarMenuItem--direction:first-of-type,
.elsaExplorerListToolbarMenuItem[data-explorer-list-toolbar-menu-group="item"] + .elsaExplorerListToolbarMenuItem--direction {
	margin-top: 4px;
	padding-top: calc(.35em + 5px);
	border-top: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: 0 0 3px 3px;
}

.elsaExplorerListToolbarMenuItem:hover,
.elsaExplorerListToolbarMenuItem:focus-visible {
	background: var(--elsa-list-row-hover-bg, rgba(42, 124, 234, .1));
	outline: none;
}

.elsaExplorerListToolbarMenuMark {
	display: block;
	width: .52em;
	height: .52em;
	margin: auto;
	border-radius: 50%;
	background: transparent;
}

.elsaExplorerListToolbarMenuItem[aria-checked="true"] .elsaExplorerListToolbarMenuMark {
	background: currentColor;
}

/*
	**帯から本文までの余白は、窓の共通ペインが1か所で持つ**（Issue #3489 段階2・
	第1回）。

	2026-09-21の実寸監査（`tests/spacing_audit_browser_test.js`）で、同じ「帯〜本文」
	の距離が器ごとに違う値で宣言されていることが分かった。

	  * 通常の統合窓（文書保存など）… `.elsaPaneWindow > .elsaPaneWindowPane--main`が
	    外観設定の項目「右側の内容と外枠の間に取る余白」＝`--elsa-content-pane-padding`
	    （既定10px）を四辺に持つ（`core/css/elsa_pane_window.css`）
	  * 設定の統合窓 … 外側を0にしたうえで、内側の器が**直値**
	    `var(--elsa-block-spacing, 8px) 12px 16px`（PC幅。狭い幅は同 8px 16px）を持つ

	つまり設定配下だけ、上は「入力欄の間隔」の項目、左右と下は誰も動かせない直値、
	という3つ目・4つ目の決め方が混じっていた。段階1（2026-09-11）がシステム設定配下の
	隙間の違和感の原因として名指ししたのがこれである。

	**直しは1か所。** 内側の器は余白を持たず、外側の共通ペインが持つトークンに
	任せる。こうすると設定配下も通常画面も帯〜本文の距離が同じ1つの項目から決まり、
	外観設定を変えたときに設定配下だけ動かない、という食い違いも消える。

	`--fill`（お問い合わせのアコーディオン・トップ）は端まで広げる従来の別契約で、
	自分で`padding: 0`を宣言しているためこの行に触れられても姿は変わらない。
*/
.elsaSettingsExplorerMain { padding: 0; }

/*  一覧も入力フォームも、狭い窓では自分の中で横へ送る（窓ごと横へ広がらない）。  */
.elsaSettingsExplorerMain .elsaListScroll { overflow-x: auto; }

/*
	**ペインの残りの高さを使い切る本文**（お問い合わせのアコーディオン。Issue #2169
	統合順3番の追加決定）。右のペインは自分で送れるが、ここは送らせない——チャットの
	外側にもう1つ送れる面ができると、入力欄が画面の外へ出る。

	**画面が名乗ったときだけ効く**（`main_class`）。一覧の葉は今までどおり、中身の
	高さぶんだけ縦へ伸びる。

	**中の子へ`flex`を配らない。** アコーディオンの器は自分で`height: 100%`を持って
	いるので（`core/css/elsa_communication_space.css`）、ここで配ると同じことを2か所で
	決めることになる。実測でも、子への規則を丸ごと外して**実ブラウザの検査は全件
	通った**（＝効いていない規則だった）。器の高さの宣言だけを持つ。

	**余白も持たない**（2026-08-31の利用者指示）。共通LISTがそうであるように、
	アコーディオンはペインの端まで目いっぱい広がる。ここに余白が残っていると、
	枠を外しても**中身だけが一回り内側に浮いて見える。**
*/
.elsaSettingsExplorerMain--fill {
	display: flex;
	height: 100%;
	min-height: 0;
	padding: 0;
	flex-direction: column;
}

/*
	**自分の余白を0にするだけでは端まで届かない**（2026-09-02のQA指摘）。共通ペイン
	（`.elsaPaneWindowPane`、`elsa_pane_window.css`）が本文を読みやすくするため
	全画面に10pxの余白を持っており、ここで自分の`padding`を0にしても、その外側の
	10pxがCHATの外枠と右のペインの縁のあいだに隙間として残っていた。

	**`.elsaSettingsExplorerMain--fill`はトップページ（`index.php`）とも共有する
	クラスなので、ここへ直接`margin`は書けない。** トップは左右だけを
	`[data-home-panes]`側で打ち消しており（すぐ上のブロック）、ここへ全方向の
	`margin: -10px`を足すと、トップの左右が二重に打ち消される・トップの上下の
	余白まで消える、の両方が起きる。そこで**CHATを持つときだけ**（お問い合わせ・
	回覧のアコーディオン）に絞って自分自身を外へ押し出す。

	**左右は`margin`だけで届くが、上下は`height`も直す必要がある。** 幅は指定して
	いない（`width: auto`）ので、負の`margin-inline`ぶんブラウザが自動で幅を
	広げてくれる。高さは上のブロックで`100%`と数で指定しているため、
	`margin-block: -10px`で上へ10px・下へ10pxはみ出しても高さの数字自体は変わらず
	**下端が10+10=20px足りなくなる**（実ブラウザの検査で発見）。そこで高さも
	`+20px`する。

	**はみ出す量も足す高さも、ペインが持つ項目そのものから導く**（Issue #3489
	段階2・第1回）。直値の10px・20pxのままだと、利用者が外観設定の「右側の内容と
	外枠の間に取る余白」を変えたときだけお問い合わせの下端が足りなくなる。
*/
.elsaSettingsExplorerMain--fill:has(.elsaChatBlock) {
	height: calc(100% + (var(--elsa-content-pane-padding, 10px) * 2));
	margin: calc(-1 * var(--elsa-content-pane-padding, 10px));
}

/*━━━ 木の見え方（メニューの階層と画面の分類を1本に見せる） ━━━*/

/*
	**色は変えず、いま開いている画面だけを太字＋左の細い印にする。** 線や地色を
	増やすと、利用者が「境目のある2つの木」として読んでしまう。
*/
.elsaAppExplorer .elsaTreeItem[aria-selected="true"] > .elsaTreeItemRow { font-weight: 700; }
.elsaAppExplorer .elsaTreeItem[aria-current="location"] > .elsaTreeItemRow { font-weight: 700; }

/*
	遅延読み込みの途中に出る「読み込み中…」は、統合窓だけのものではない（据え置きの
	TREEならどこでも使える）ので、TREEの他の行と同じ`core/css/base.css`が持つ。
*/

/*━━━ 狭い画面（375px） ━━━*/

/*
	**左右を積まず、一度に片方だけを出す。** 積むと、フォルダを選ぶたびに右の内容が
	画面の外へ押し出される（いまのスマホと同じ不便）。切り替えても**パンくずと
	情報表示は同じ場所に居続ける**ので、いま何を見ているかを見失わない。
	送られるのは、そのとき出ているペインの中だけである。

	ツリーの器そのもの（`display`）を切り替えるので、浮かせる面も裏の暗幕も要らない。
	画面に浮く≡が入口と出口を兼ねる。
*/

/*
	ツリーの出し入れの入口。**広い画面では左右が同時に見えている**ので出さない。

	**この宣言は下の`@media`より前に置く。** 後ろへ置くと、同じ強さの規則が後から
	`display: none`へ戻し、狭い画面で≡が消える（2026-08-30に中央サーバーの実画面で375pxを
	見て見つけた。スマホからツリーを開く手段が無くなっていた）。
*/
.elsaAppExplorerPaneToggle { display: none; }

/*
	375px幅のロゴのヘッダー（2026-08-31の利用者指示。旧画面と同じ見た目）。
	**この宣言も下の`@media`より前に置く**（≡と同じ理由。後ろへ置くと、同じ
	強さの規則が後から`display: none`へ戻す）。
*/
.elsaAppExplorerMobileHeader { display: none; }

@media (max-width: 767px) {
	.elsaAppExplorer {
		/*
			**狭い画面では木のペインが畳まれる**ので、画面へ浮くボタンの基準も戻す
			（2026-08-31にdevelopmentの375pxで実測）。広い画面と同じ280pxのままだと、
			左に何も無いのに下の帯が140pxだけ右へずれる。
		*/
		--elsa-content-left: 0px;
		grid-template-areas:
			"trail"
			"actions"
			"main"
			"status";
		grid-template-columns: minmax(0, 1fr);
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**各行が中身より高く伸びる崩れの根治**（帯廃止・Issue #2671の担当からの
			申し立てで発覚。帯があった頃からの既存の状態で、今回のPRの変更が
			生んだものではない）。

			この`.elsaAppExplorer`は`#elsaLayout > .elsaAppExplorer`（IDセレクタ）の
			`flex: 1 1 auto`で高さが決まる（`#elsaLayout`はflex列で、bodyの
			`min-height: 100dvh`のぶんまで伸びる）。中身が短い画面では、375pxの
			この`section`自身の外枠がその高さまで引き伸ばされる。

			**そこへ、5行すべてが`auto`のGridが乗っていた。** Gridの`align-content`の
			既定値`normal`は、`fr`を1本も持たないGridでは`stretch`と同じに働き、
			余った高さを**`auto`の行へ均等に**配る。パンくず・ボタン行・検索行・
			情報表示のどれも中身は数十pxしかないのに、5等分された余りを1本ずつ
			抱え込み、実測でパンくずが28px→87px、情報表示が28px→180px超まで
			膨らんでいた（development・375px・`/tasks/`・`/documents/`で確認）。

			**`start`にする。** 余った高さを複数の`auto`行へ均等配分させないための
			宣言で、これ自体は今も要る——`main`だけを`1fr`にした後も、`main`以外の
			行（パンくず・ボタン行・検索行）を`auto`のまま中身どおりの高さに保つのは
			この宣言である。

			**is-tree-open・is-search-in-band・is-main-extraも1本で効く。** どの変化形も
			`grid-template-rows`を書き換えるだけで`align-content`を触らないため、
			ここ1か所の宣言がそのまま伝わる。

		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		align-content: start;
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**情報バーの下に空白が残らないよう`main`だけを`1fr`にする**（利用者報告
			2026-09-04 22:35・development /electronic-books/・390×844。実測で、
			一覧が画面の半分ほどで終わり、情報バー（フォルダ4個・電子帳簿0件／
			●接続状況／Ver.xxxxxxxx）が3行に分かれた直後、画面下端まで白い余白が
			続いていた）。

			**2026-08-31時点は`main`も`auto`だった**（1つ上の注記のとおり）。理由は
			「`main`を`1fr`にすると短い画面で情報バーが下端へ押し戻され、固定されて
			いたときと見分けが付かなくなる」だった。だが実際には逆に、**`main`が
			中身どおりの高さで止まる一方、`.elsaAppExplorer`自身は`#elsaLayout`の
			`flex: 1 1 auto`と`body`の`min-height: 100dvh`のぶんだけ画面いっぱいの
			高さを持ち続ける。** `align-content: start`は行を上へ詰めるだけで、その
			高さの差（画面の残り）は`.elsaAppExplorer`の中に空白として残ったまま
			消えない。情報バーは中身の直後に収まるが、そこから画面の下端までが
			白紙になる——今回の実機で見つかった崩れである。

			**`main`へ`1fr`を戻すと、その残り高さを`main`が引き取る。** 情報バーは
			`main`の直後、`.elsaAppExplorer`の最後の行のまま変わらないので、
			**中身が短い画面では情報バーが自然に画面の下端まで届き**、**中身が
			長い画面では`main`が中身の高さで伸びてページ全体が送られ、情報バーは
			その続きに現れる。** どちらも`position: fixed`ではない——固定ボタン
			（`.elsaAppExplorerPaneToggle`）のように表示エリアへ重なって食い込む
			ことはなく、2026-08-31の決定（「固定だと表示エリアを食いつぶす」）を
			破らない。**見た目が「画面下端に張り付く」ことと、実装が
			`position: fixed`であることは別である。**

			**`is-tree-open`は対象外。** ツリーの行は`.elsaAppExplorerNavPane`が
			`position: fixed`で覆うため、`tree`行の中身は画面の高さに関係しない。
			`is-search-in-band`・`is-main-extra`は同じ理由で`main`行を`1fr`へ変える
			（検索が挟まる／一覧でない中身が乗るだけで、「情報バーの直前の行が
			残り高さを引き取る」という役目は変わらない）。

		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**情報バーは画面下へ貼り付けず、ページの最下部へ置く**（2026-08-31の利用者指示）

		> 固定だと表示エリアを食いつぶす

		広い画面の窓は「画面の高さで立ち、送るのはペインの内側だけ」である（⓪の決定）。
		そのため情報バーは常に画面の下端に居座り、**狭い画面では貴重な高さを毎回
		持っていく。** スマホでは旧画面のフッター（©表示）と同じ感覚——**中身の流れの
		いちばん下に自然に続き、スクロールして到達する**——へ戻す。

		直し方は「ページを普通に送れるようにする」ことである。3つを解く必要がある。

		 1. `body`の高さの上限と`overflow: hidden`（ページが1pxも動かない元）
		 2. `#elsaLayout`の`overflow: hidden`
		 3. 本文のペインが**自分の中で送っている**こと（`overflow: auto`）

		3つ目を残すと、ページは伸びるのに中身はペインの中で送られ、情報バーは
		結局いつもの場所に居続ける。**`main`の行は`1fr`のまま**である（上の
		`.elsaAppExplorer`の宣言を見よ）。`body`・`#elsaLayout`・`.elsaAppExplorer`の
		どこにも定まった高さ（px・vhの直値）が無く、`min-height`が下限を持つだけ
		なので、`main`の中身が画面より長い日は`main`がその中身の高さまで伸び、
		足りない日は`main`が残りを引き取って情報バーを画面の下端まで押し出す。
		どちらの日も同じ1本の宣言で表せる。

		**768px以上には1文字も効かない**（この`@media`の中だけ）。広い画面の窓は
		これまでどおり画面の高さで立ち、送るのはペインの内側だけである。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	/*
		**`body`の宣言は下の1か所へまとめてある**（`padding-top: var(--elsa-mobile-header-height)`と同じ規則）。
		ここで2本目を書くと、狭い画面の`body`の規則を先頭から探す検査が別の塊を掴む
		（2026-08-31に実際に落とした）。
	*/
	body.elsaAppExplorerBody #elsaLayout { overflow: visible; }
	/*
		本文のペインは自分で送らない（ページが送る）。**ツリーのペインはそのまま**
		——木は開いているあいだだけ出る別の面で、そちらは中で送れてよい。
	*/
	.elsaPaneWindow.elsaAppExplorer > .elsaPaneWindowPane--main { overflow: visible; }
	/*
		2026-09-13（Issue #3663）: 統合窓の右のペインの姿がsplitへ統一され、
		`elsaCommunicationSpaceAccordion`は削除された。**この上書きはアコーディオン
		専用だった**——アコーディオンは`height: auto`で中身の高さぶん伸びるため、
		ページではなくペイン自身を送る必要があった。splitは自分の高さを
		（`core/css/elsa_communication_space.css`の`.elsaCommunicationSpaceSplit`の
		`calc(100dvh - ...)`で）明示し、一覧・会話それぞれが自分の内側で送るため、
		ペイン自身を送る必要が無い。上の既定（`overflow: visible`。ページが送る）の
		ままでよいので、この上書きは削除した。
	*/

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

		**右下の丸ボタンが情報バーを隠さないようにする**（2026-08-31に実画面で見つけた
		重なりの根治。2026-09-05の利用者指示で横の逃げは撤去し、下の逃げだけへ
		一本化した）

		ボタンは画面に浮いたまま（`position: fixed`）である。2026-08-31当時は下の余白
		（`padding-bottom`）だけでは足りないと判断し、横にもボタンの1列ぶん
		（`padding-inline-end`）を空けていた。**この横の逃げが、情報バーを常に2行以上へ
		押し下げていた。** 統計と接続状況＋版を合わせた幅は390px幅の画面でも1行に
		収まりうるのに、横の逃げが約82px（ボタン50px＋余白20px＋隙間12px）を毎回削って
		いたため、1行に収まる日も強制的に2行へ折り返っていた。

		**直し方は下の逃げだけに一本化することである。** ページが最後まで送られた
		（＝情報バーの下端が画面の下端に一致した）状態で、`padding-bottom`はバーの
		中身の下端をボタンの上端よりさらに上（実測12px分）へ押し上げる——中身のY座標が
		常にボタンのY座標帯より上に収まるので、**Y座標が重ならなければX座標は関係ない。**
		行が何行になろうと、この関係は`padding-bottom`の値だけで決まり、行数や折り返しの
		位置に依存しない。**「行が何行になろうと」を守るのに横の逃げは要らなかった**
		（Playwrightでの実測: 横の逃げを外しても`.elsaAppExplorerStatus`と
		`.elsaAppExplorerStatusMetaGroup`はY座標もX座標もボタンの矩形と重ならないことを
		確認済み）。

		**寸法はボタンと同じ変数から作る。** ここへ`82px`のような数字を直に書くと、
		ボタンの大きさや位置を変えた日に、逃げの幅だけが古いまま取り残される
		（下の`.elsaAppExplorerPaneToggle`が同じ変数を読む）。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaPaneWindow.elsaAppExplorer {
		/*
			**帯の高さは、行に並ぶものの高さに追従する**（2026-09-06の利用者指摘）。
			狭い画面では検索欄が指で押す高さへ戻る（下の`input[type="search"]`。
			2026-09-05・Issue #3050）ので、行の最低の高さも同じ値から組み直す。
			**式は変えず、読む値だけを差し替える**——`--elsa-pane-window-band-height`は
			トークンの足し算なので、ここを書き換えるだけで行も検索のマスも一緒に動く。

			**`em`は「読む場所の文字サイズ」で決まる（2026-09-17の修正・Issue #3798）**

			`--elsa-form-control-height`は`calc(2em + ...)`で、この`em`はCSSカスタム
			プロパティの仕様どおり、値を**代入した場所ではなく`var()`で読んだ場所**の
			文字サイズを拾う。ボタンエリア（`.elsaAppExplorerActions`）は今回、自分の
			`font-size`を外観設定「ボタンエリアの背景色」の並び（`--elsa-band-font-size`）
			へ固定した。読む場所が2つに割れる——**行自身**がこのトークンを`min-height`で
			読むときは新しい`--elsa-band-font-size`基準になるのに、**行の高さを借りる
			よそのブロック**（みんなのオフィスのスペースの分割ブロック、
			`core/css/elsa_communication_space.css`の`@media (max-width: 767px)`）は、
			自分の文字サイズ（一般の`--elsa-form-font-size`を継いだ値）のまま`em`を
			解決するため、**同じトークンなのに読む場所によって違う数値**になり、
			分割ブロックの上端が右のペインの実際の開始位置とずれた
			（`tests/communication_space_accordion_browser_test.js`の
			「375px・200%文字」実測。行375.9px相当）。

			**`em`をやめ、`--elsa-band-font-size`を名指しで読む。** カスタムプロパティは
			値そのもの（この場合は文字サイズという1つの数値）なら、読む場所に関わらず
			同じ値を返す。行自身が読んでも、行の高さを借りるよそのブロックが読んでも、
			**同じ`--elsa-band-font-size`を足し算の材料にする**ため、答えは必ず揃う。
			検査欄（`.elsaText--band`）は元々自分の`font-size`を`--elsa-band-font-size`へ
			揃えていたので、ここでの計算結果はそちらの実際の高さとも変わらない
			（後方互換）。
		*/
		--elsa-pane-window-band-control-height: calc(
			(var(--elsa-band-font-size, 16px) * 2)
			+ (var(--elsa-form-control-padding-block, 3px) * 2)
			+ (var(--elsa-form-control-border-width, 1px) * 2)
		);
		--elsa-app-explorer-fab-size: 50px;
		--elsa-app-explorer-fab-inset: 20px;
		/*  ボタンの縁とバーの中身のあいだに残す隙間。  */
		--elsa-app-explorer-fab-gap: 12px;
		--elsa-app-explorer-fab-reserve: calc(
			var(--elsa-app-explorer-fab-size) + var(--elsa-app-explorer-fab-inset) + var(--elsa-app-explorer-fab-gap)
		);
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**丸ボタンを情報エリアの上へ持ち上げる量**（Issue #3124・利用者承認2026-09-06）

			2026-09-05までは情報バーの`margin-bottom`にボタンの逃げ幅
			（`--elsa-app-explorer-fab-reserve`）を常時持たせ、常に空白を残していた。
			情報バーが画面内に見えていない日（一覧が長く、まだ最後まで送っていない日）
			にも同じ空白が付きっぱなしで、情報エリアの下に用途のない余白が残った。

			**既定は`0px`。** 情報バーが画面外（未可視）のときはボタンは従来どおり
			画面右下20pxの定位置に留まる。`core/js/elsa_app_explorer.js`の
			`IntersectionObserver`が情報バー（`.elsaAppExplorerStatusBar`）の可視を
			検知したときだけ、実測した高さ＋余白（`--elsa-app-explorer-fab-gap`）を
			ここへ書き込む。**このtokenの値そのものはJSだけが書き換える**——CSSの
			既定値は「JSが動く前・動かない環境で従来位置に留まる」ための保険であり、
			ここへ計算式を書かない（情報バーは内容量で高さが変わるため、固定式では
			表せない）。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		--elsa-app-explorer-fab-lift: 0px;
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**四隅の角丸を落とす**（2026-09-05・Issue #3050、下角は同日Issue #3052の追加要件で拡張）

			`.elsaPaneWindow`の共通角丸（`core/css/elsa_pane_window.css`の
			`--elsa-pane-window-radius: 10px`）は、左右にペインが並ぶ「1枚の窓」が
			周囲に余白を持つ前提の見た目である。狭い画面では`#elsaLayout`の左右
			paddingが0（`body.elsaAppExplorerBody #elsaLayout { padding: 0; }`）で
			枠が画面の左右端まで届き、**すぐ上のヘッダーとの縦の隙間も無くした**
			（このファイル下部の`body.elsaAppExplorerBody { padding-top: var(--elsa-mobile-header-height); }`）
			ため、角が浮いた飾りに見えていた。

			**当初は上角だけを落としていた**（下角は画面最下部でスクロールして
			到達する位置にあり、Issue #3050の4点は上角だけを挙げていた）。
			**2026-09-05のIssue #3052追加要件で下角も落とした**——利用者添付の
			実画面で、情報表示エリアの下に残る空白を角丸付きの外枠が囲んでおり、
			「左下・右下のborder-radiusをなくす」と明示されたため。角丸の正本
			である`--elsa-pane-window-radius`はここでは変えず、四隅すべてを
			`0`で上書きする。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**上端・下端のborderも落とし、ヘッダーから最下部まで1枚の面にする**
			（上端は2026-09-05・Issue #3052、下端は同日の追加要件）

			`.elsaPaneWindow`の共通外枠（`core/css/elsa_pane_window.css`の
			`border: 1px solid var(--elsa-pane-window-border)`）は四辺すべてに付く。
			#3050で隙間・上角の角丸を無くした結果、この枠の**上辺**がヘッダー
			（`.elsaAppExplorerMobileHeader`）の直下にそのまま露出し、地色が同じ
			（上の注記）灰色の帯の上へ余分な横線が1本引かれて見えていた。

			**下辺も同じ理由で落とす。** 利用者添付の実画面で、情報表示エリアの
			下に残る空白の最下端を角丸付きの外枠線が囲んでいた（Issue #3052
			追加要件「ページ最下部の外側コンテナにある境界線をなくす」）。

			**残すのは左右だけ。** 画面端の縁として意味を持つ。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		border-top: 0;
		border-bottom: 0;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**共通の上部ボタンエリアをヘッダー直下へsticky表示する**（2026-09-05・Issue #3056）

		利用者決定「ボタンエリアのsticky表示をChatだけでなくすべてのページで
		採用する」。狭い画面で「+新規登録」など画面全体に作用するボタンは、
		統合窓の骨組み（Issue #2169）が最初から1つの器（`.elsaAppExplorerActions`）へ
		集約している——一覧画面はもちろん、みんなのオフィス（スペース）の
		「+新規作成」も2026-08-31の統合で同じ器へ移設済みなので、**Chatも
		画面別の対応なしにこの1行で一緒にstickyになる。** Issue #3145でスペースの
		設定歯車もこの帯へ移したため、選択中スペースを設定する入口も狭い画面では
		同じ位置に残る。参加/退出などCHAT内だけに作用する操作は従来どおり別要素
		（`.elsaCommunicationSpaceHeaderActions`）であり、ここの対象外である。

		**`fixed`ではなく`sticky`にする。** `fixed`は常にviewportへ重なるため、
		本文の高さ計算・アンカー移動・フォーカスの可視領域に影響しうる
		（Issue本文が名指しで避けている）。`sticky`はページの通常の流れに
		乗ったまま、スクロールで祖先の可視範囲を超えるまでは通常位置に留まる。

		**`top`は共通ヘッダーの実高さトークン`--elsa-mobile-header-height`
		（Issue #3052で新設）を読む。** ヘッダーの高さを次に変えるときも、
		ここを個別に直す必要が無い。

		**sticky化を阻む祖先の`overflow`は無い。** この帯の親
		`.elsaPaneWindow.elsaAppExplorer`は`core/css/elsa_pane_window.css`の
		`overflow: clip`（`hidden`ではない）を継ぐ。同じファイルの既存コメントが
		「`clip`は器を作らずに切るので、貼り付けたまま角も丸いままにできる」と
		明記しており、**同じ祖先の下で左ペインの境界の取っ手が既に
		`position: sticky`で動作している**（2026-08-29導入、`.elsaPaneSplitter`）。
		`#elsaLayout`・`.elsaPaneWindowPane--main`も狭い画面では`overflow: visible`
		（Issue #3050）で、ページ全体（`body`）がスクロールする。sticky対象を
		遮る`overflow: hidden`の祖先は無い。

		**押せるものも表示中の状態文も無い画面では、この帯自体が`display: none`のまま**
		（`.elsaAppExplorerActions:not(:has(button:not([hidden]), a, input,
		select, textarea, .elsaStatusBlock:not(:empty)))`が既に畳む。すぐ上で定義済み）ので、空の固定領域を
		新たに作ることはない。ボタンが多い画面の1段維持・横方向の畳み
		（「…」）は`elsa_pane_window_overflow.js`の既存の仕組みがそのまま働く
		——stickyは位置決めだけを変え、中身の並べ方には触れない。

		**検索欄（`rsearch`グリッド行）はここに含めない。** Issue本文が
		「検索欄...を無条件に固定対象へ含めない」と明示しており、`.elsaListTools`は
		この帯とは別の要素なので、何もしなければ対象に入らない。

		**z-indexは31。** ヘッダー32・丸ボタン33より下、ツリーの全画面
		オーバーレイ30より上に置く（帯がヘッダーの真下に来るときヘッダーより
		手前に出て隠すことはなく、スクロールで下から来る本文の上には出る）。

		**入力フォームの戻る・保存・削除もここに乗る**（2026-09-06の[USER DECISION]）。
		2026-08-30の「フォームは本文の上下へ戻す」例外は廃止され、CONTROLLERは一覧でも
		入力フォームでもこのボタン行の1組だけになった。**この1行がそのまま効く**ので、
		フォームのための別の宣言は要らない（#3056の棚卸しコメントで「別Issue」と
		していた課題は、置き場が揃ったことで消えた）。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerActions {
		position: sticky;
		top: var(--elsa-mobile-header-height);
		z-index: 31;
	}
	/*
		**タブの並びもこの帯の真下に残る**（Issue #4204、オーナー決定2026-09-29）。
		狭い画面はページ全体が送られ、この帯が`sticky`で残る作りなので、送る箱の
		先頭に置いたTAB（`data-elsa-tab-leading`、`core/js/elsa_tab.js`）の並びも
		同じ仕組みで帯の実寸の真下に貼り付く。帯の高さは載っている物で変わるため
		`core/js/elsa_app_explorer.js`が実寸を`--elsa-app-explorer-actions-height`へ
		書く（畳まれた帯は0）。並びは右のペインの上の余白ぶん上へ伸びた無地の帯を
		持つので、貼り付いた瞬間にタブの縦位置は動かず、送られた本文も覗かない
		（先頭のTABだけなので、上に伸びた帯が覆うのはペインの余白だけ）。
		一覧の帯モードの並びは窓の自分の行（`grid-area: tabs`）に居て余白を持たない。
	*/
	.elsaPaneWindow.elsaAppExplorer:not(.is-search-in-band) > .elsaAppExplorerMain .elsaTabBlock[data-elsa-tab-leading="true"] > .elsaTabList,
	.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-tabbed-list .elsaTabList {
		position: sticky;
		top: calc(var(--elsa-mobile-header-height, 0px) + var(--elsa-app-explorer-actions-height, var(--elsa-pane-window-band-height)));
		z-index: var(--elsa-z-sticky-tab-list, 4);
	}
	.elsaPaneWindow.elsaAppExplorer:not(.is-search-in-band) > .elsaAppExplorerMain .elsaTabBlock[data-elsa-tab-leading="true"] > .elsaTabList {
		margin-top: calc(-1 * var(--elsa-content-pane-padding, 10px));
		padding-top: var(--elsa-content-pane-padding, 10px);
	}
	/* 監査・接続の名札と容量・版を375pxでも同じ行へ収める。 */
	.elsaAppExplorerStatusMetaGroup:has([data-app-explorer-audit]) { column-gap: .5em; }
	.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerStatusBar {
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**丸ボタンの逃げは`margin`で持ち、バー自身の地色を最小限に保つ**
			（2026-09-05・Issue #3052。利用者報告「文字列の下に大きな空白が
			残っている」）

			2026-09-04の[USER DECISION]で`main`行を`1fr`にし、情報バーを常に
			画面の下端まで届かせるようにした（中身が短い日でも下端まで白紙が
			残らないように）。その結果、情報バーは**いつも画面の下端に接する**
			ようになったが、丸ボタンの逃げ（`--elsa-app-explorer-fab-reserve`、
			約82px）はバー自身の`padding-bottom`だったため、バーの地色
			（`--elsa-status-background-color`）がその82pxぶんまで灰色に
			塗られ、**文字の直下に灰色の大きな空白**として常に見えていた
			（画面が短くて送る必要が無い日ほど目立つ）。

			**`padding`から`margin`へ変える。** 丸ボタンとの縦の位置関係
			（バーの下端をボタンの上端よりさらに上へ逃がす、という2026-09-05
			朝のPR #3043の決め方）は1pxも変えない——グリッドの子要素は
			margin-collapseが起きないので、確保する距離は従来と同じである。
			**変わるのは色だけ。** バー自身の地色は文字の高さぶんだけに
			収まり、その下の逃げは（背景が同じ色の会社であっても）バーの
			面としては描かれない、地の色（ページの背景）になる。

			**PR #3043の「縦の余白だけ残す」判断そのものは変えていない。**
			横の逃げ（`padding-inline-end`）を持たないこと、行数や送りの位置に
			依存しないことは元のままである。

			**2026-09-06、Issue #3124でこの固定の逃げ自体を0にした。** 常時
			`--elsa-app-explorer-fab-reserve`（82px）を持たせる方式は、情報バーが
			画面内に見えていない日にも同じ空白を残し続けていた（利用者報告
			「一覧最下部の情報エリア下の余白」）。**逃げはもう情報バー側が持たない。**
			代わりに、ボタン自身が情報バーの可視を検知して自分の`bottom`を持ち上げる
			（下の`.elsaAppExplorerPaneToggle`、実測と切り替えは
			`core/js/elsa_app_explorer.js`）。情報バーは内容どおりの高さだけを占め、
			ボタンとの縦の位置関係（重ならないこと）はボタン側の計算（情報バーの
			実測高さ＋`--elsa-app-explorer-fab-gap`）が担う。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		margin-bottom: 0;
	}

	/*  幅を変える相手が居ないので、境界は静かに引っ込む（据え置きTREEと同じ作法）。  */
	.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerNavPane,
	.elsaPaneWindow.elsaAppExplorer > .elsaPaneSplitter { display: none; }

	/*
		**ツリーを出しているあいだは本文と入れ替える。** 残るのは「ツリーか本文か」
		だけである。
	*/
	.elsaAppExplorer.is-tree-open {
		grid-template-areas:
			"trail"
			"tree"
			"status";
		/*
			開状態は3領域なので、行サイズも3行へ揃える（Issue #3265）。

			通常状態の4行用`auto auto minmax(0, 1fr) auto`を引き継ぐと、
			3番目のstatus行が`1fr`になり画面高まで伸びる。その一時的な高さを
			#3124の持ち上げ監視が正しく採用した結果、右下の丸ボタンが右上へ
			押し出されていた。余り高さを受けるのは固定オーバーレイになるtree行、
			status行は中身どおりの`auto`にする。
		*/
		grid-template-rows: auto minmax(0, 1fr) auto;
	}
	/*
		開く前にページが長いとrootの縦スクロールバーが幅を取る。ツリーを開くと
		本文が`display: none`になり、その幅だけviewportが広がって固定ボタンが右へ
		動いていた（Development実測15.2px、Issue #3265の配信後QA）。開状態だけ
		同じgutterを予約し、閉状態の短いページやPC幅には新しい余白を加えない。
	*/
	html:has(body.elsaAppExplorerBody .elsaAppExplorer.is-tree-open) {
		scrollbar-gutter: stable;
	}
	.elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerNavPane { display: block; }
	.elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerMain { display: none; }
	/*
		**ツリーを見ているあいだ、画面の操作は出さない。** その操作が効く本文が
		画面に居ないためで、押せてしまうと何に効いたのかが読めない。≡は画面に
		浮いたまま残る（`position: fixed`なのでGridの外に居る）。
	*/
	.elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerActions { display: none; }
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**開いているあいだは、パンくずも含めて画面全体を覆う**（Issue #2169の
		利用者報告`[TO:CLAUDE][MOBILE MENU]`、2026-09-04。375px幅の実機で、
		木を開いてもパンくずが上に露出したまま読めていた）。

		原因はgridの並びである。`.elsaAppExplorer.is-tree-open`は
		`"trail" "tree" "status"`の3行で、木は`tree`の行にしか広がらない。
		`display: block`（すぐ上の宣言）は木を**その行の中で**箱として見せる
		だけで、`trail`の行（パンくず）はそのまま上に残って見えてしまう。

		旧い青いメニュー（`.elsaNavMenu`、`core/css/base.css`の
		`@media (max-width: 670px)`）は最初から`position: fixed`でヘッダーの
		直下から画面の下端まで覆っており、パンくずとメニューが同じgridの行に
		並ぶ作りではなかった。統合窓はgridで組んだぶん、この覆いを引き継いで
		いなかった。

		**直し方はfixedへ切り替えるだけで、gridの並びそのものは変えない。**
		`display: block`は上の宣言のまま触らない（複数箇所からその文字列どおり
		参照されている）。fixedにした要素はgridの外へ浮くので、`trail`・
		`status`の行は空のまま残るが、木が画面いっぱいで真上に重なるため
		見えなくなる。

		**ヘッダーの実高さぶんだけ下げ、残りの高さいっぱいに広げる**（値は
		共通トークン`--elsa-mobile-header-height`。2026-09-05のIssue #3052で
		ヘッダーを64pxから縮めたとき、この値も1本の変数で自動的に連動する
		——**旧`.elsaNavMenu`（`core/css/base.css`）と数字を揃える意図はもう
		無い**。旧いスマホメニューは統合窓を使わない別画面の別実装であり、
		揃っていたのはヘッダー高さがたまたま同じ64pxだった時期の話である）。
		z-index30はヘッダー（`.elsaAppExplorerMobileHeader`のz-index32）にも
		丸ボタン（`.elsaAppExplorerPaneToggle`のz-index33）にも勝たない。
		閉じるための≡ボタンと、ロゴを再読込するリンクを兼ねるヘッダーは、
		木の上からも常に押せる。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerNavPane {
		position: fixed;
		z-index: 30;
		top: var(--elsa-mobile-header-height);
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(100dvh - var(--elsa-mobile-header-height));
		overflow-y: auto;
		overscroll-behavior-y: contain;
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**左右の内側余白は0**（利用者指示2026-09-04・「各メニュー項目の幅を
			画面幅の80%にしてほしい（390pxなら312px、375pxなら300px）」）。

			`.elsaAppExplorerNavPane`は`elsa_pane_window.css`の`padding:
			var(--elsa-tree-pane-padding, 10px)`（外観設定の項目・既定10px）を
			共有側から受け継ぐ。**デスクトップの分割ツリーには要る余白だが、
			この全画面オーバーレイでは効いてはいけない**——木の行・アカウント欄・
			コピーライトはどれも`width: 80%; margin: 0 auto;`で自分の幅を決めて
			おり、その「80%」は**この`.elsaAppExplorerNavPane`の中身の幅**（＝
			containing block）を基準に計算される。10pxの内側余白が残ったままだと、
			基準が390pxではなく370px（390 − 10×2）になり、80%が312pxではなく
			296pxにしかならない——**旧い`.elsaNavMenu`（`core/css/base.css`の
			`@media (max-width: 670px)`）は`padding: 0 0 70px`で左右の余白を
			最初から持たず、80%は画面幅そのものを基準にしていた。** 統合窓は
			共有のツリー余白をそのまま引き継いだため、旧側より項目が狭く
			なっていた（利用者報告のとおり、左右の外側余白が約47pxあった）。

			**ここを0にするだけで、木の行・トグル・アカウント項目・ログアウト・
			コピーライトの`width: 80%`が全部いっせいに390px基準へ揃う。** 個々の
			行のCSSを触らずに済む（同じ計算式を共有しているため）。上下の余白は
			この指示の対象外なので触らない。

		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		padding-inline: 0;
	}

	/*
		**狭い画面では検索を横へ並べない。** ボタン行の下へ1行として置く
		（文書保存が同じ幅でしている扱い）。横に並べると、道具と検索がどちらも
		読めない幅まで痩せる。
	*/
	.elsaPaneWindow.elsaAppExplorer.is-search-in-band {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"trail"
			"actions"
			"rsearch"
			"main"
			"status";
		/*  `main`だけが残り高さを引き取る（上の`.elsaAppExplorer`と同じ理由）。  */
		grid-template-rows: auto auto auto minmax(0, 1fr) auto;
	}
	/*
		降りた1行は全幅を使う。**入力欄が伸び、「？」と「削除済を表示」は右端に
		並んだまま**である（消さない）。
	*/
	.elsaAppExplorer.is-search-in-band .elsaListTools { justify-content: flex-start; }
	.elsaAppExplorer.is-search-in-band .elsaListSearch,
	.elsaAppExplorer.is-search-in-band .elsaListSearchBox,
	.elsaAppExplorer.is-search-in-band .elsaListSearchRow { flex: 1 1 auto; width: 100%; min-width: 0; }
	/*  伸びるのは入力欄だけ（「？」と「削除済を表示」は右端の定位置に残る）。  */
	.elsaAppExplorer.is-search-in-band .elsaListSearchRow input[type="search"] { flex: 1 1 auto; width: auto; }

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

		**スマホでは「一覧を検索」欄をタップしやすい高さへ戻す**（2026-09-05・Issue #3050）

		PC幅（帯の右端に検索がある一体型）は入力欄をボタン行と同じ28px
		（`--elsa-block-action-height`）に揃えている（このファイル冒頭の
		`.elsaAppExplorer.is-search-in-band .elsaListSearchRow input[type="search"]`）。
		**それはPCではボタンと1行に並ぶための約束であり、
		指で押すスマホの基準ではない。** 狭い画面では検索欄はボタン行から
		降りて自分だけの行になるので、揃える相手がもう居ない。

		**新しいトークンは作らない。** 通常の入力欄（TEXT等）が既に使っている
		共通の高さ`--elsa-form-control-height`（既定のフォーム文字サイズ16pxで
		約40px＝`2em + 上下padding + 上下border`）をそのまま使う。表示設定で
		文字サイズを変えれば通常の入力欄と同じだけ追従する。

		**この宣言は上の`height: 28px`より後ろに置く**（同じ詳細度4なので、
		記述順で後ろが勝つ。767px以下でだけ効き、768px以上のPC幅には1文字も
		影響しない）。
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorer.is-search-in-band .elsaListSearchRow input[type="search"] {
		height: var(--elsa-form-control-height);
		min-height: var(--elsa-form-control-height);
	}

	/*
		**帯の高さもそれに追従する**（2026-09-06の利用者指摘）。読む値の差し替えは
		この`@media`の先頭（`--elsa-app-explorer-fab-*`と同じ宣言）で1度だけ行う——
		同じ素のセレクタをこのファイルへ2つ作ると、上角の角丸・上辺の枠線を狭い画面
		だけに閉じている契約（`tests/app_explorer_test.php`）が崩れる。
	*/

	/*
		**一覧でない中身を連れているとき**は、検索の下へもう1行足す（デスクトップ幅と
		同じ`extra`。狭い画面は1列なので単純に行を挟むだけでよい）。
	*/
	.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-main-extra {
		grid-template-areas:
			"trail"
			"actions"
			"rsearch"
			"extra"
			"main"
			"status";
		/*  `main`だけが残り高さを引き取る（上の`.elsaAppExplorer`と同じ理由）。  */
		grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
	}

	.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-tabbed-list {
		grid-template-areas:
			"trail"
			"actions"
			"rsearch"
			"tabs"
			"main"
			"status";
		grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
	}

	/*
		ツリーを出しているあいだは一覧そのものが隠れるので、検索のマスも畳む。
		**透かした箱は`display: none`が効かない**（子が直接グリッドに居る）ので、
		検索枠と表のそれぞれを引っ込める。
	*/
	.elsaPaneWindow.elsaAppExplorer.is-search-in-band.is-tree-open {
		grid-template-areas:
			"trail"
			"tree"
			"status";
	}
	.elsaAppExplorer.is-search-in-band.is-tree-open .elsaListTools,
	.elsaAppExplorer.is-search-in-band.is-tree-open .elsaListScroll { display: none; }
	/*  一覧でない中身も、ツリーを出しているあいだは同じく引っ込める。  */
	.elsaAppExplorer.is-search-in-band.is-main-extra.is-tree-open [data-app-explorer-extra] { display: none; }
	.elsaAppExplorer.is-search-in-band.is-tabbed-list.is-tree-open .elsaTabList,
	.elsaAppExplorer.is-search-in-band.is-tabbed-list.is-tree-open .elsaTabPanel:not([hidden]) { display: none; }

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

		375px幅は旧画面と同じ丸ボタン・同じ固定ヘッダー（2026-08-31の利用者指示）

		旧画面（統合前・`core/css/base.css`の`@media (max-width: 670px)`）は、
		右下固定の丸ボタンでメニューを開き、上部固定のヘッダーに大きくロゴを
		中央表示する。統合窓は四角い≡だけを持ち、ヘッダーは無かった。

		**仕組みはそのまま、375px幅の見た目だけを旧画面へ揃える。** ≡の配線
		（`data-app-explorer-pane-toggle`／押すとツリーが開く）は1文字も
		変えない。値（右下20px・50px角丸・帯色`--elsa-primary-color`・
		アイコン`--elsa-icon-menu`）は旧い`.elsaNavToggleButton`と同じ数字を
		そのまま使う（`core/css/base.css`）。**別の値を書くと、外観設定で
		色を変えたときに片方だけが取り残される。**

		768px以上は`display: none`のまま1文字も変わらない（この`@media`の中だけ）。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	/*
		**大きさと位置は情報バーの逃げと同じ変数を読む**（2026-08-31）。ここへ数字を
		直に書き戻すと、ボタンを大きくした日にバーの逃げ幅だけが古いまま残り、
		刻印がまたボタンの下へ潜る。値の宣言は上の`.elsaPaneWindow.elsaAppExplorer`。
	*/
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**情報エリアが見えているときだけ、その上へ持ち上がる**（Issue #3124）

		`bottom`は「画面端からの通常の逃げ（`--elsa-app-explorer-fab-inset`）」＋
		「情報バーぶんの追加の持ち上げ（`--elsa-app-explorer-fab-lift`）」の2本を
		足す。**通常の逃げは1pxも変えない**——情報バーが画面に見えていない日
		（一覧の途中）は`fab-lift`が既定の`0px`のままなので、従来と同じ右下20pxに
		立つ。

		情報バーが画面内に入った瞬間（＝一覧の末尾までスクロールした瞬間）だけ、
		`core/js/elsa_app_explorer.js`の`IntersectionObserver`が`fab-lift`へ
		「情報バーの実測高さ＋`--elsa-app-explorer-fab-gap`」を書き込み、ボタンが
		情報バーの上端よりさらに上へ乗る。情報バーから離れる（＝上へスクロール
		して見えなくなる）と、同じJSが`fab-lift`を`0px`へ戻し、ボタンは元の位置へ
		沈む。

		**`transition`で滑らかにする**（利用者指示「トランジション付き」）。切り替えの
		たびにボタンが瞬間移動せず、情報バーの出入りに追従して動いて見える。
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerPaneToggle {
		position: fixed;
		z-index: 33;
		right: var(--elsa-app-explorer-fab-inset, 20px);
		bottom: calc(var(--elsa-app-explorer-fab-inset, 20px) + var(--elsa-app-explorer-fab-lift, 0px));
		transition: bottom .2s ease;
		display: grid;
		place-items: center;
		width: var(--elsa-app-explorer-fab-size, 50px);
		height: var(--elsa-app-explorer-fab-size, 50px);
		padding: 0;
		border-radius: 50%;
		background: var(--elsa-primary-color, #24333f);
		color: var(--elsa-primary-contrast, #fff);
	}
	/*  文字の「≡」はJSが動かない環境の控え。375px幅では隠し、共通アイコンへ差し替える。  */
	.elsaAppExplorerPaneToggleGlyph { display: none; }
	.elsaAppExplorerPaneToggle::before {
		display: block;
		width: 24px;
		height: 24px;
		background: currentColor;
		content: "";
		-webkit-mask: var(--elsa-icon-menu) var(--elsa-icon-menu-mask-position, center) / var(--elsa-icon-menu-mask-size, var(--elsa-icon-mask-size)) no-repeat;
		mask: var(--elsa-icon-menu) var(--elsa-icon-menu-mask-position, center) / var(--elsa-icon-menu-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	}
	/*  開いているあいだは閉じるアイコンへ。JSは`aria-expanded`しか書き替えないので、そこだけを読む。  */
	.elsaAppExplorerPaneToggle[aria-expanded="true"]::before {
		-webkit-mask: var(--elsa-icon-close) var(--elsa-icon-close-mask-position, center) / var(--elsa-icon-close-mask-size, var(--elsa-icon-mask-size)) no-repeat;
		mask: var(--elsa-icon-close) var(--elsa-icon-close-mask-position, center) / var(--elsa-icon-close-mask-size, var(--elsa-icon-mask-size)) no-repeat;
	}

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

		**上部固定のロゴのヘッダー。** 当初の値は旧い`.elsaNavBrand`／
		`.elsaNavMobileBrand`と同じ数字（高さ64px・下側の角丸22px・地色
		#fafafa・影・ブランド枠320×48px）だった。中身（`elsa_mobile_brand_html()`）
		は今も同じ関数を呼んでいるので、ロゴの有無・代わりの会社名文字は
		旧画面と同じ振る舞いのままである。

		**高さ・padding・角丸・影は2026-09-05のIssue #3052で縮めた。** 「一覧の
		表示領域をもっと広く」という利用者指示（同Issueのコメント）で、
		ロゴを一段小さくし、それに合わせてヘッダー全体も低くした。

		**実高さは`--elsa-mobile-header-height`という1本の変数が持つ**（下で
		宣言する`body.elsaAppExplorerBody`が正本）。この値は2か所が読む——
		(1) 木を開いたときの覆い（`top`・`height: calc(100dvh - …)`、上の
		`.elsaPaneWindow.elsaAppExplorer.is-tree-open > .elsaAppExplorerNavPane`）、
		(2) 本文を下げる`body`の`padding-top`（Issue #3050）。ヘッダーの高さを
		また変えるときはこの1本を直すだけでよく、3か所を個別に揃え直す必要が
		無い。
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerMobileHeader {
		position: fixed;
		z-index: 32;
		top: 0;
		right: 0;
		left: 0;
		/*  2段: ロゴの帯（上）とパンくずの帯（下）。高さは下の`body.elsaAppExplorerBody`の変数（Issue #4924）。  */
		display: grid;
		grid-template-rows: var(--elsa-mobile-header-logo-height, 44px) var(--elsa-mobile-header-trail-height, 28px);
		width: 100%;
		/*
			**カード自身の高さ＝固定領域の総高**（2026-09-19・Issue #3849の
			オーナー回答で「影の逃げ16pxそのものを無くす」方針に確定。2026-09-06の
			「カード＋影の逃げ」の2階建てを廃止した）。`--elsa-mobile-header-height`は
			この`--elsa-mobile-header-card-height`と同じ値になり、本文はカードの
			直下（隙間0）から始まる。影（`box-shadow`）は残すが、本文の上へ重ねて
			描く（下の`box-shadow`の注記）——白い帯で予約する領域ではない。
		*/
		height: var(--elsa-mobile-header-height, 72px);
		padding: 0;
		border-radius: 0 0 18px 18px;
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**地色はPC版のパンくず（ヘッダー）と同じ項目を読む**（2026-09-19・
			Issue #3849のオーナー決定）。

			2026-09-05・Issue #3052では`--elsa-pane-window-band`（＝ボタン行と同じ
			`--elsa-surface-sunken`）を直接引いていた。しかしスマホのこのロゴ帯は
			PC幅で「パンくずのあるヘッダー」に相当する場所であり、ボタン行
			（`.elsaAppExplorerActions`／`--elsa-band-background-color`）とは別の
			外観設定項目（`breadcrumb_background_color`）が対応する。**同じ場所には
			同じ設定項目を使う**——スマホだけ別の項目（ベース色）に連動していると、
			外観設定でヘッダー背景色だけを変えてもスマホの帯が動かず、逆にベース色を
			変えるとスマホのヘッダーとPCの左メニューの地が意図せず一緒に動いていた。

			PC側のパンくず行（`.elsaPaneWindowTrail.elsaPaneWindowBand`、
			`core/css/elsa_pane_window.css`）と同じ変数・同じ既定値を読む。新しい色は
			作らない。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		background: var(--elsa-header-background-color, #f5f7f9);
		/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

			**影は残すが、白い帯で予約しない**（2026-09-05・Issue #3052の利用者訂正、
			2026-09-19・Issue #3849のオーナー回答で確定）。

			2026-09-05当初のPRはヘッダーとボタンエリアの境目にあった横線を消すために、
			ヘッダー自身の`box-shadow`も一緒に削除していた。**削るべきだったのは
			ボタンエリア側が重複して持っていた上端線（`.elsaPaneWindow.elsaAppExplorer`の
			`border-top`。この下の別の宣言）だけで、ヘッダー本体の影は残す**、
			というのが利用者の訂正である。

			2026-09-06は「影が透けて見える」報告を受け、影の逃げ16px分だけ本文の
			開始位置を下げ、その領域を不透明な地色で塞ぐ形にした。**これは#3052の
			「影は残す」を「影の領域を本文の外へ予約する」という意味まで拡大した
			読み替えだった**——オーナーは2026-09-19に「下部に変な隙間がある。この
			隙間をなくして」と指摘し、影は残してよいが**本文の上に重ねて描く**（帯を
			予約しない）という回答で確定した。ヘッダーは`position: fixed`で
			`z-index: 32`を持つため、`box-shadow`は本文（スクロールする側）より
			手前に描かれ、本文の一部が影の下を通っても構わない（下の`::before`が
			角の外側だけを塞ぐので、その部分にちらつきは残らない）。

			値は元の宣言（Issue #3052以前）と同じに戻す。
		┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
		box-shadow: 0 4px 12px rgba(36, 51, 63, 0.14);
		/*
			**`<a>`の既定の見た目（青・下線）を消す。** 2026-08-31の中央サーバーの375px実測で、
			ロゴの文字が既定のリンク色で出ていた（`.elsaMobileBrandText`に色は
			持たせていたが、下線を消し忘れていた）。旧い`.elsaNavBrand`もリンクだが、
			中の`.elsaMobileBrandText`が自分の色（#263746・下線無し）を持つので
			リンクの既定は見えない。
		*/
		color: inherit;
		text-decoration: none;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**角の外側だけを、カードの内側で不透明な地色で塞ぐ**（2026-09-06の利用者
		報告・訂正／2026-09-19・Issue #3849のオーナー回答で範囲を縮小・同日の
		再オープンで色の正本を訂正）

		カードは下側だけ角丸で、**角の外側の三角の隙間**はカード自身が塗らない。
		固定領域の後ろを本文が通ると、その三角だけ動くものが透けて見えていた
		（「ちらちら見える」）。

		**器を1枚も足さない。** 敷くのはカードの`::before`で、`z-index: -1`によって
		**カード自身の地色・角丸・影より後ろ**に描かれる。カードは`position: fixed`で
		積み重ねの文脈を作るので、この`-1`はその文脈の中に収まる——**本文より前、
		カードより後ろ**という、ちょうど欲しい位置である。

		**範囲はカード自身の高さの内側だけ**（`top: 0; bottom: 0`）。2026-09-06版は
		ここを影の逃げ分だけ下へはみ出させ（`bottom`が負）、半透明の影ごと不透明な
		地色で塞いでいたが、それは「影を本文の外へ予約する」設計と一体だった。
		2026-09-19のオーナー回答（「影は残してよいが、本文の上に重ねる形にし、
		白い帯で16pxを予約しない」）により、影自体は本文の上へ普通に重ねて描く
		対象へ変わったため、この`::before`は**角の外側の三角**（カードの範囲内）
		だけを塞げばよい。**幅は画面いっぱい**（`left: 0; right: 0`）。

		**色はカード本体（`.elsaAppExplorerMobileHeader`）と同じ
		`--elsa-header-background-color`が正本**（2026-09-19、development
		Ver.498d45f4のオーナー指摘で再オープン）。三角はカードの内側・カードより
		後ろに描かれるため、カードの地色と揃っていないと境目の三角だけ別の色が
		見える。カード側はこの少し上（PC版パンくずと同じ変数）を読んでいるので、
		ここも同じ変数・同じ既定値を読み、**新しい色は作らない**。「ページと同じ
		`--elsa-surface`」という以前の理由づけは誤りだった——三角はページの地色では
		なく、隣接するカードの地色と揃えるべき箇所である。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerMobileHeader::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: var(--elsa-header-background-color, #f5f7f9);
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**ロゴの右横の「閲覧のみ」の札**（Issue #4924・オーナー決定2026-10-16）

		**2段目はパンくずの帯**（Issue #4924・オーナー決定2026-10-17）。767px以下では
		パンくずの行が丸ごと隠れるので、ヘッダーの下の段（28px）に道筋の写しを置く
		（写すのは`core/js/elsa_pane_window_trail.js`。並びも「閲覧のみ」の札も道筋そのもの）。

		- **上の段（44px）は今までどおりトップへのリンク。** `<a>`の`::after`が上の段の箱
		  （`.elsaAppExplorerMobileHeaderBrandBand`、`position: relative`）いっぱいを覆う。
		  下の段の段は道筋と同じ行き先へ渡すので、リンクの覆いは下の段へ広げない。
		- **札は今いる画面名のすぐ右。** 札は折り返さない文字（`.elsaTrialBadge`の
		  `white-space: nowrap`）なので文字の幅より縮まない。長い画面名・長い前の階層は名前の側が
		  `text-overflow: ellipsis`で「…」になり、札は帯の中に収まる。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerMobileHeaderBrandBand {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		padding: 6px;
		overflow: hidden;
	}
	.elsaAppExplorerMobileHeaderLink {
		/*  ロゴの箱（`.elsaAppExplorerMobileHeaderBrand`）と同じ上限。  */
		max-width: 240px;
		min-width: 0;
		/*  リンクの既定の下線を消す（下線は中の控えの文字へ伝わる）。帯が`<a>`だったときは帯が持っていた。  */
		text-decoration: none;
	}
	.elsaAppExplorerMobileHeaderLink::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	/*  下の段: パンくずの帯。文字の大きさは帯の高さ（28px）に収まる値に決め打ちする（PCのパンくずの文字の大きさは読まない）。  */
	.elsaAppExplorerMobileTrail {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
		padding: 0 12px;
		overflow: hidden;
		font-size: 13px;
		white-space: nowrap;
	}
	.elsaAppExplorerMobileTrail > .elsaPaneWindowTrailStep {
		display: block;
		flex: 0 1 auto;
		min-width: 1.5em;
		max-width: none;
		min-height: 0;
		overflow: hidden;
		font-size: inherit;
		line-height: var(--elsa-mobile-header-trail-height, 28px);
		text-overflow: ellipsis;
	}
	/*  前の階層から先に縮める（今いる画面名をなるべく読ませる）。  */
	.elsaAppExplorerMobileTrail > .elsaPaneWindowTrailStep:not([aria-current="page"]) { flex-shrink: 4; }
	/*  区切り（›）はPCのパンくずと同じ大きさ・濃さで見せる（767px以下の隠れた道筋の淡い区切りは読まない）。  */
	.elsaAppExplorerMobileTrail > .elsaPaneWindowTrailSeparator { flex: none; width: .75em; height: .75em; background: var(--elsa-text-muted, #667085); }
	.elsaAppExplorerMobileHeaderBrand {
		display: flex;
		align-items: center;
		justify-content: center;
		width: min(100%, 240px);
		height: auto;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**ロゴを他社サイトと同程度の相対サイズへ縮める**（Issue #2169の利用者報告
		`[TO:CLAUDE][MOBILE MENU]`、2026-09-04）。旧`.elsaNavBrand`と数字を揃えた
		当初の48pxは、375px幅で高さが画面幅の約13%・横幅が枠いっぱい（320px≒85%）に
		達し、ワードマークだけがヘッダーを埋めていた。

		比較対象はさくらパソコンサービスのWebサイト（`https://www.sakura-pcs.com/`）を
		内蔵ブラウザで375px表示にして実測した値である——ロゴ画像は幅213px・高さ20px
		（画面幅の約57%・約5.4%）。**厳密な一致ではなく同程度の比率**を狙い、
		`clamp()`で画面幅の狭い端末でも文字が読める下限を残しつつ、画面幅を基準にする。

		**2026-09-05のIssue #3052でもう一段縮めた**（「一覧の表示領域を広げる」
		利用者指示）。下限20px→16px・基準6vw→5vw・上限28px→22pxで、
		375px幅での実測は22.5px→18.75pxになる。**縦横比・中央配置は変えていない**
		（`width: auto`のまま、コンテナの`justify-content: center`も不変）。
		上限22pxは767px直前（このブロックの境界）でも肥大しないための天井である。

		2026-09-09のIssue #3418で、上記viewport基準を外観設定の倍率へ置き換えた。
		スマホヘッダーの文字サイズを1emとし、画像と控え文字へ同じ倍率を適用する。
		大きい値は下のカード高トークンで収容し、倍率自体を上限で縮めない。

		**デスクトップ幅（768px以上）には1文字も効かない**（この`@media`の中だけ）。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerMobileHeaderBrand .elsaMobileBrandImage {
		/*  ロゴの帯（44px）から上下の余白を引いた高さを越えない（大きい文字の設定でもはみ出さない。Issue #4924）。  */
		max-height: calc(var(--elsa-mobile-header-logo-height, 44px) - 12px);
		width: auto;
		height: calc(1em * var(--elsa-header-logo-scale, 1.2));
		max-width: 100%;
	}
	/*
		**文字色もPC版のパンくずと同じ項目**（`breadcrumb_text_color`）**を読む**
		（2026-09-19・Issue #3849のオーナー決定）。以前は地の文の色
		（`--elsa-content-text-color`）を読んでおり、地色をヘッダー背景色へ
		揃えた上でも文字色だけ別項目に残っていた——背景色を変えたときに
		文字色が追従しないと、狙い次第でコントラストが崩れる組み合わせが
		起こる。
	*/
	.elsaAppExplorerMobileHeaderBrand .elsaBrandWordmark {
		color: var(--elsa-breadcrumb-text-color, #333333);
	}
	/*  控えの文字も画像と同じ外観設定の比率で描く（Issue #3418）。  */
	.elsaAppExplorerMobileHeaderBrand .elsaMobileBrandText {
		/*  行の高さ1.2で、ロゴの帯（44px）から上下の余白を引いた高さを越えない（Issue #4924）。  */
		font-size: min(calc(1em * var(--elsa-header-logo-scale, 1.2)), calc((var(--elsa-mobile-header-logo-height, 44px) - 12px) / 1.2));
		color: var(--elsa-breadcrumb-text-color, #333333);
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/*
		**画像があるときの控えの文字は、`hidden`属性のとおり本当に隠す。**
		2026-08-31、developmentの375px実測で見つけた——`core/css/base.css`の
		`.elsaMobileBrandText { display: block; ... }`（クラス名を旧いブランドと
		共有しているため、この画面にも効く）が`display`を持つと、ブラウザ標準の
		`[hidden] { display: none; }`（作者側のCSSより優先度が低い）に負ける。
		控えの文字が画像の裏に居座り、はみ出した端（頭文字）が見えていた。
		属性つきの選択子で明示的に打ち消す。
	*/
	.elsaAppExplorerMobileHeaderBrand .elsaMobileBrandText[hidden] {
		display: none;
	}
	/* 画像失敗時もhiddenを作者CSSより優先し、控え文字の中央配置を保つ（#3418）。 */
	.elsaAppExplorerMobileHeaderBrand .elsaMobileBrandImage[hidden] {
		display: none;
	}

	/*
		**ヘッダーの分だけ本文を下げる。** 値はヘッダーの実高さちょうど
		（Issue #3050）。**以前は64px＋余白12px＝76pxだった**（旧`#elsaLayout`の
		`padding: 76px 16px 16px`と同じ数字を流用した名残）が、統合窓では
		ヘッダー直下が即コンテンツ枠であり、この12pxが「ヘッダーと枠のあいだの
		縦の隙間」として利用者に見えていた。**枠の角丸・上端の枠線も同時に
		落とす**（すぐ下の`.elsaPaneWindow.elsaAppExplorer`の
		`border-top-*-radius: 0`・`border-top: 0`。角丸はIssue #3050、枠線と
		地色の統一はIssue #3052）ため、余白を残す理由が無い。`body.elsaAppExplorerBody`は
		`box-sizing: border-box`（共通リセット）で`height: 100dvh`なので、
		このpaddingは高さの外へはみ出さず、内側の`#elsaLayout`が残りへ
		自動的に縮む（`--elsa-app-explorer-offset`を触らずに済む）。

		**値は`--elsa-mobile-header-height`という1本の変数から読む**
		（2026-09-05・Issue #3052でヘッダーを64pxから縮めたとき追加した）。
		同じ変数を`.elsaAppExplorerMobileHeader`自身の`height`と、木を開いた
		ときの覆い（`.elsaPaneWindow.elsaAppExplorer.is-tree-open >
		.elsaAppExplorerNavPane`の`top`・`height`）も読む。**宣言はここ1か所
		だけ**（`body.elsaAppExplorerBody`がヘッダー・覆い両方の祖先なので、
		CSS変数の継承でどちらにも届く。読み出す側の3か所が書く順序に依存しない）。
		次にヘッダーの高さを変えるときは、この1行の数字だけを直せばよい。
	*/
	/*
		あわせて、**ページを普通に送れるようにする**（2026-08-31の利用者指示で情報バーを
		ページ最下部へ置いたため）。広い画面の`height: 100dvh` ＋ `overflow: hidden`は
		「ページが1pxも動かない」という決まりで、それを解かないと情報バーは画面の下端に
		居座り続ける。

		**縦だけ解く。横は塞いだままにする**（Issue #3040）。`overflow: visible`は
		縦・横の両方を一度に解いていた。文書詳細のFILEプレビュー
		（`core/php/blocks/file/file.php`が出す`<embed type="application/pdf">`。
		`core/css/base.css`の`.elsaFileBlockDropZone`は`width: 100%`＋
		`aspect-ratio`で幅いっぱいに収まる指定だが、375px幅の実機・development
		実機の両方で、開いた直後の描画がPDFの用紙サイズ（約585×828px、A4相当）を
		そのまま使い、狭い画面に収まらないことがある）が、この帯の外で
		横方向にだけ縦幅ぶんはみ出すと、`body`の`overflow`が`visible`（横も含む）
		だったため、ページ全体の横幅そのものが膨らんだ。

		横幅が膨らむと`window.innerWidth`がこの`@media (max-width: 767px)`の
		767pxを超え、スマホ専用の右下メニューボタン（`.elsaAppExplorerPaneToggle`）と
		上部ヘッダーが`display: none`のデスクトップ側へ切り替わり、木の左ペインは
		膨らんだ横幅の右側（画面の外）に置かれたままになる。**「戻る」だけは本文の
		並びの中に居るので押せるが、共通ナビゲーションは画面のどこにも見えなくなる**
		——利用者報告どおりの症状（Issue #3040）。

		直し方は`overflow-x`だけを`hidden`に戻すことである。縦は`visible`のまま
		残すので情報バーの通常スクロールは変えない。横だけ塞げば、はみ出した
		プレビューは（そのはみ出し量ぶん）横に見切れるだけで、ページの横幅・
		この`@media`の判定・ナビゲーションには波及しない。FILEプレビュー自体が
		狭い画面で正しく収まるかは別の課題であり、ここでは扱わない
		（`core/css/base.css`・`core/php/blocks/file/file.php`の持ち物）。
	*/
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**中身が短くても、窓は画面の高さまで伸びる**（2026-09-06の利用者報告。
		2026-09-05・Issue #3052の`min-height: auto`を差し戻す）

		2つの要求が同じ`body`の1行を取り合っていた。

		 * **PR #3033の意図**（2026-09-04の報告）… 中身が短い日は、情報バーが
		   画面の下端に付く。`main`行だけを`minmax(0, 1fr)`にしたのはこのためで、
		   余った高さを`main`が引き取ることで情報バーが自然に下端へ届く。
		 * **PR #3059／Issue #3052の意図**（2026-09-05の報告）… 情報バーの下に
		   大きな空白が残り、その最下部を**角丸付きの外枠**が囲んでいる。

		2026-09-05は`min-height`の下限を外して窓を縮めた。**空白は消えたが、
		同時に情報バーも画面の途中で止まった**（2026-09-06に出荷作業・`/departments/`の
		375pxで再発。実測: ビューポート800pxに対し窓の下端が367px＝433pxの白紙）。

		**外枠のほうを既に落としてあるので、下限は戻してよい。** 狭い画面の窓は
		上の宣言で四隅の角丸と上下のborderを0にしてあり（Issue #3050・#3052）、
		**#3052が問題にした「空白を囲む角丸付きの外枠」はもう描かれない。**
		残っていた「空白」は`main`が余りを引き取れば消える——それが#3033の形である。

		実測（development・375×800・`/departments/`）: 下限を戻すと窓の下端が
		367px→800px（＝画面の下端）、情報バーの下端が285px→718pxへ動く。718pxは
		画面の下端から丸ボタンの逃げ（`--elsa-app-explorer-fab-reserve`、82px）を
		引いた位置で、**逃げの分だけ上に居るのは意図どおり**である
		（下の`.elsaAppExplorerStatusBar`の`margin-bottom`）。

		**中身が画面より長い日は1pxも変わらない。** `min-height`は下限であって
		上限ではないので、中身が下限を超えていればこの宣言は何もしない——情報バーは
		今までどおりページの最下部に現れ、そこまで送って到達する。

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

		**固定領域はカード自身の高さちょうど（影の逃げは廃止）**（2026-09-06の利用者
		報告を2026-09-19・Issue #3849のオーナー回答で再訂正）

		2026-09-06の利用者報告は「**固定ヘッダーの下側の角Rの外側（左右の角の隙間）
		に、下をスクロールするコンテンツがちらちら見える**」だった。当時の直し方は、
		カードの下へ影の逃げ（16px）を足した「固定領域」を作り、その領域全体を
		不透明な地色で塞ぐことだった——**角の外側の三角**だけでなく**半透明の影**も
		まとめて本文の外へ予約していた。

		2026-09-19、オーナーは「下部に変な隙間がある。この隙間をなくして」と指摘し、
		ロゴをその予約領域の中央へ送る形（一度実装したが再訂正の対象になった案）は
		不採用となり、**予約領域そのものを無くす**ことで確定した——「影は残してよいが、
		本文の上に影が重なる形にし、白い帯で16pxを予約しない」。

		 * `--elsa-mobile-header-logo-height` … ロゴの帯（44px）・`--elsa-mobile-header-trail-height` …
		   パンくずの帯（28px）。2026-10-17のオーナー決定（Issue #4924）で、それまでの1段
		   （`--elsa-mobile-header-card-height`、56px以上）をこの2段（合計72px）へ置き換えた。
		 * `--elsa-mobile-header-height` … **固定領域の総高＝2段の和**
		   （2026-09-19以降、影の逃げを含まない）。本文を下げる`body`の
		   `padding-top`、ボタン行のsticky（`top`）、木を開いたときの覆い
		   （`top`・`height`）は**今までどおりこの1本を読む**ので、読む側は1行も
		   変えずにカードの直下（隙間0）から始まる。

		**角Rの外側の三角だけは、カードの範囲内で塞ぎ続ける**（上の`::before`。
		範囲をカード自身の高さの内側へ縮めた）。**半透明の影は本文の上に重ねて
		描く**——ヘッダーは`position: fixed`・`z-index: 32`で本文より手前にあるため、
		影がスクロールする本文と重なっても「透ける」ことはなく、単に本文の上に
		影が乗るだけである。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	/*  高さの正本はこの1か所（Issue #4924・オーナー決定2026-10-17: ロゴの帯44px＋パンくずの帯28px＝72px）。読む側はすべて`--elsa-mobile-header-height`を読む。  */
	body.elsaAppExplorerBody { --elsa-mobile-header-logo-height: 44px; --elsa-mobile-header-trail-height: 28px; --elsa-mobile-header-height: calc(var(--elsa-mobile-header-logo-height) + var(--elsa-mobile-header-trail-height)); padding-top: var(--elsa-mobile-header-height); height: auto; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: visible; }

	/*
		Issue #3489 段階2・第1回。**狭い画面だけの別の値もやめた。**

		ここには「スマホ幅は片方のペインだけが出るので左右の余白をさらに詰める」
		という理由で`var(--elsa-block-spacing, 8px) 8px 16px`が在った。PC幅の
		直値（上のブロック）とあわせて、同じ「帯〜本文」の距離が設定配下だけ
		幅ごとに2通りの決め方を持つ状態だった。帯〜本文の余白は窓の共通ペインが
		持つ1つの項目（`--elsa-content-pane-padding`）に任せ、幅で分けない。
	*/

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

		スマホ幅の左ペインは**従来のスマホメニューの見た目**にする（⑭）

		2026-08-30の利用者指示（390pxの画面の写しつき）。**仕組みは変えない。**
		≡で開く・木の中身・選んだら閉じて本文へ・片方ずつ出す、はそのままで、
		変えるのは見た目だけである。手本は青いメニューの670px以下の姿
		（`core/css/base.css`の`@media (max-width: 670px)`）——白地・全幅に近い
		大きな行・LV1ごとの区切り線・段ごとの字下げ・現在地の塗り。

		**色と行の高さは従来側と同じ変数・同じ数字を読む。** 別の値を書くと、
		外観設定で色を変えたときに片方だけが取り残される。字下げだけは、深い
		分類の親子関係も読めるよう、下で階層ごとの増分と上限を持つ。

		**デスクトップ幅には1文字も効かない。** この`@media`の中だけである。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

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

		**開いたメニューの地色はPC版の左ペインと同じ項目を読む**（2026-09-19・
		Issue #3849のオーナー決定）。

		以前は「ベース色」（`--elsa-surface-sunken`）を直接引いていた（見出しの
		直前のコメントが言う「TREEの背景色ではない」は、この面がPCの左ペインとは
		別の見た目という当時の位置づけを説明していたものである）。しかし開いた
		メニューは統合窓の`.elsaAppExplorerNavPane`そのもの（`.elsaPaneWindowPane`を
		名乗る）で、PC幅では同じ要素が「左側の一覧」（`tree_background_color`）を
		読んでいる——**狭い画面で見た目だけ変えるために、同じ場所が別の設定項目に
		連動していた。** 外観設定で「左側の一覧の背景色」を変えても、スマホの
		開いたメニューだけ取り残されていたのが実際の症状である。

		`.elsaPaneWindow > .elsaPaneWindowPane:not(.elsaPaneWindowPane--main)`
		（`core/css/elsa_pane_window.css`）と同じ変数・同じ既定値を読む。CSSの
		詳しさはこちらが3クラス（`.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerNavPane`）で
		上の2クラスの規則に勝つため、宣言そのものは残し、値だけ揃える。
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaPaneWindow.elsaAppExplorer > .elsaAppExplorerNavPane { background: var(--elsa-tree-background-color, #ffffff); }

	/*
		字下げと帯の戻し量は通常TREEと同じ計算を使う（Issue #3406）。
		80%幅と中央配置は行ごとではなく根の一覧が持つ。子の容器が字下げで
		狭くなっても、共通の負のmarginが帯を根の左右端まで戻せるようにする。
	*/
	.elsaAppExplorerNavPane .elsaTreeList {
		width: 80%;
		margin-inline: auto;
		padding: 0;
	}

	/*
		行そのもの。従来のスマホメニューのLV1（`.elsaNavMenu > .elsaNavLeaf`）と
		同じ幅・高さ・区切り線・文字色にする。**区切り線は行の上側だけが持つ**
		（従来と同じ。下側にも置くと2本並んで二重線に見える）。

		左右余白と字下げはbase.cssの共通行に任せ、上下余白だけ0にする。
		paddingやmarginの一括指定で共通の段数計算を打ち消さない。
	*/
	/*
		**文字色もPC版の左ペインと同じ項目**（`left_pane_text_color`→
		`--elsa-tree-text-color`）**を読む**（2026-09-19・Issue #3849のオーナー
		決定）。以前は補助文字色（`--elsa-text-muted`）を直接引いていたが、
		PC幅の同じ木の行は`.elsaAppExplorerNavPane`が継ぐ地の文
		（`--elsa-tree-text-color`。`core/css/elsa_pane_window.css`の
		`.elsaPaneWindowPane`規則）をそのまま使い、行ごとに補助色へ弱めていない。
		同じ場所は同じ設定項目、同じ濃さに合わせる。
	*/
	.elsaAppExplorerNavPane .elsaTreeItemRow {
		box-sizing: border-box;
		min-height: 65px;
		padding-block: 0;
		border-top: 1px solid var(--elsa-menu-border-color, #fff);
		border-radius: 0;
		background: transparent;
		color: var(--elsa-tree-text-color, #333333);
		gap: .5em;
	}

	/*  木のいちばん上の行には線を引かない（従来の`:first-child`と同じ扱い）。  */
	.elsaAppExplorerNavPane .elsaTreeList > .elsaTreeItem:first-child > .elsaTreeItemRow { border-top: 0; }

	/* 子の行高だけをスマホ用に維持し、字下げの段数上限は追加しない。 */
	.elsaAppExplorerNavPane .elsaTreeGroup > .elsaTreeItem > .elsaTreeItemRow { min-height: 55px; }

	/*
		**分類の枝（種別・フォルダ）も同じ行**である。木は「メニューの葉で終わる
		もの」と「その下に分類が続くもの」を同じ`aria-level`の連番で持つので、
		上の宣言がそのまま効く。ここに分類のための別扱いは書かない。
	*/

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

		**選択中の見せ方はPCと同じにする**（利用者指示2026-09-05 08:28。ホームなど
		スマホメニューの選択中項目が濃い青のベタ塗りで、PC左ナビの選択中（薄い青の
		地・左端の縦線・通常の文字色）と違って見えていた）。

		**以前はここで`background`・`color`を上書きし、旧い青いメニューの
		`aria-current="page"`（角丸4px・下位メニューの色・白文字）を再現していた。**
		これは「アプリ全体で選択中の見せ方は1つ」という2026-09-02の決定
		（`core/css/base.css`「選択中」の見せ方はアプリ全体で1つである）より前の
		スマホ専用の作り込みで、その決定と食い違ったまま残っていた。

		**直し方はこの上書きを消すことである。** `.elsaAppExplorerNavPane .elsaTreeItem`
		も`.elsaTreeItem[aria-selected="true"] > .elsaTreeItemRow`という同じ祖先無しの
		セレクタに当たるので、上書きが無くなれば`core/css/base.css`の共通規則
		（`background: var(--elsa-selected-bg, #dceeff)`・`color: var(--elsa-selected-color)`・
		`font-weight: 700`。2026-09-27の決定で左端の縦線は廃止済み）がそのまま効く。
		**スマホ専用の色は新設しない**——PC・スマホとも同じ変数・同じ1つの規則を読む。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

	/*
		開閉の矢印は**行の右端**（従来のアコーディオンと同じ位置）で、**常に見える**。
		通常の姿ではマウスを乗せているあいだだけ出すが、スマホには乗せる操作が無い。

		右へ寄せるのに`margin-left: auto`を使わない。行末の状態（`.elsaTreeItemMeta`）も
		同じ寄せ方を持っており、両方が寄せると余白が2つに割れて別の列に見える。
		**名前を伸ばして押し出す**ほうが、状態のある行でも並びが崩れない。
		回転（開いていれば90度）は共通の宣言がそのまま持つ。
	*/
	.elsaAppExplorerNavPane .elsaTreeItemLabel { order: 1; flex: 1 1 auto; }
	.elsaAppExplorerNavPane .elsaTreeItemMeta { order: 2; margin-left: 0; }
	.elsaAppExplorerNavPane .elsaTreeItemRow > .elsaTreeToggle { order: 3; width: 1em; height: 1em; opacity: 1; }
	.elsaAppExplorerNavPane .elsaTreeItemMenu { order: 4; }
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**札を持つ行では、押し出す役は名前と札のまとまり**（`.elsaTreeItemName`。
		Issue #4449・一号機裁定2026-10-06）。

		上の`order`は、この幅で▸を行の右端へ置くために行の直下の要素を並べ替える。
		**並べ替えの対象になるのは行の直下に居る要素だけ**なので、札が行の直下に
		居たあいだ、`order`を持たない札は既定の`0`として**名前より前（左）へ
		出ていた**（2026-10-06の実測。375pxで「試用中」が名前の左）。札を名前と
		同じまとまりへ入れたので、行から見える箱は1つになり、札は常に名前の後ろに
		居る——**この幅のために札へ`order`を足す必要は無くなった。**

		まとまりが`flex: 1 1 auto`で伸びて▸を右端へ押し出す役を引き継ぐ。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerNavPane .elsaTreeItemName { order: 1; flex: 1 1 auto; }
	/*
		**まとまりの中では`order`も`flex`も打ち消す。** 上の2つは
		`.elsaAppExplorerNavPane .elsaTreeItemLabel`という**子孫**の指定なので、
		まとまりの中の名前にもそのまま当たる——`order: 1`が残ると、まとまりの
		中で名前が後ろへ回り、`order`を持たない札が**まとまりの中で先頭（名前の
		左）へ出る**（2026-10-06に実測。行の直下に札が居たときと同じ見え方に
		なるので、まとまりで包んだだけでは直らない）。`flex: 1 1 auto`が残ると
		名前の箱だけが広がり、札が名前の文字から離れて右端へ飛ぶ。
	*/
	.elsaAppExplorerNavPane .elsaTreeItemName > .elsaTreeItemLabel { order: 0; flex: 0 1 auto; }

	/*  幅を変える取っ手はこの幅では出ないので、木の器も枠を持たない。  */
	.elsaAppExplorerNavPane .elsaTreePanel--inline { border: 0; background: transparent; box-shadow: none; }

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

		スマホ幅のアカウント表示は**メニューの最上部**（2026-08-31の[USER DECISION]）

		利用者決定は「**旧画面と同じくメニューの最上部**」である。右下の丸ボタンで
		開く左ペイン（＝旧スマホメニューの姿。⑭）の一番上に、会社名・氏名（役割）の
		大きな行が立ち、押すと下へ「メールアドレス変更／パスキー設定／テナント切替」が
		開く。**ログアウトは最下部**に1行である。

		**帯の右端のチップはこの幅では出さない**（同じ中身が2つ出る）。

		**値は旧側と同じ変数・同じ数字を読む**（`core/css/base.css`の
		`@media (max-width: 670px)`）——幅80%・行の高さ72px／55px／65px・字下げ28px・
		文字色#555・区切り線`--elsa-menu-border-color`・現在地の塗り
		（角丸4px・共通の選択色／導出文字色・太字）。
		**別の値を書くと、外観設定で色を変えたときに片方だけが取り残される。**

		クラス名を旧側から借りないのは、旧側のスマホ用の宣言が`.elsaNavMenu >`で
		始まる（統合窓には無い経路）一方、借りたクラスに効くのは**PC用**の宣言
		（幅210px・濃い地色・白文字）だからである。木の行を作り直したのと同じ扱い。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

	/*  帯の右端のチップはPCだけのもの。  */
	.elsaAppExplorerIdentity { display: none; }

	.elsaAppExplorerIdentityPane { display: block; }

	/*
		アカウントの行。旧側の`.elsaNavMenu > .elsaNavUser > .elsaNavAccountToggle`と
		同じ幅・高さ・地色（透明）・文字色である。**下線は持たない**——旧側も
		この行だけは`border-top: 0; border-bottom: 0`だった。
	*/
	.elsaAppExplorerIdentityPaneToggle {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 80%;
		min-height: 72px;
		margin: 0 auto;
		padding: 0 var(--elsa-tree-row-padding-inline, 6px);
		border: 0;
		background: transparent;
		color: var(--elsa-text-muted, #667085);
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.elsaAppExplorerIdentityPaneToggle:focus-visible {
		outline: 2px solid var(--elsa-primary-color, #24333f);
		outline-offset: -2px;
	}
	/*  開閉の矢印は行の右端。回転は旧側の`.elsaNavBranchToggle::after`と同じ。  */
	.elsaAppExplorerIdentityPaneToggle::after {
		box-sizing: border-box;
		flex: 0 0 auto;
		width: 1em;
		height: 1em;
		margin-left: auto;
		background: currentColor;
		content: "";
		-webkit-mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat;
		mask: var(--elsa-icon-arrow-right) var(--elsa-icon-arrow-right-mask-position, center) / var(--elsa-icon-arrow-right-mask-size, var(--elsa-icon-mask-size)) no-repeat;
		transform: rotate(0deg);
		transition: transform .15s ease;
	}
	.elsaAppExplorerIdentityPaneToggle[aria-expanded="true"]::after { transform: rotate(90deg); }

	/*  値は旧側の`.elsaNavUserInfo` / `.elsaNavCompanyName` / `.elsaNavUserName`と同じ。  */
	.elsaAppExplorerIdentityPaneInfo {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		overflow: hidden;
	}
	.elsaAppExplorerIdentityPaneInfo > span {
		display: block;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.elsaAppExplorerIdentityPaneCompany { font-size: 1.05em; font-weight: 700; }
	.elsaAppExplorerIdentityPaneUser { margin-top: 2px; font-size: .85em; }

	/*  開いた先の項目は旧側のLV2（`.elsaNavChildren > .elsaNavLeaf`）と同じ。  */
	.elsaAppExplorerIdentityPaneMenu { display: block; }
	.elsaAppExplorerIdentityPaneMenu[hidden] { display: none; }
	.elsaAppExplorerIdentityPaneItem {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 80%;
		min-height: 55px;
		margin: 0 auto;
		padding-left: 28px;
		border: 0;
		background: transparent;
		color: var(--elsa-text-muted, #667085);
		text-decoration: none;
	}
	/*  ログアウトは最下部の1行（旧側の`.elsaNavMenu > .elsaNavLogout`と同じ）。  */
	.elsaAppExplorerIdentityPaneLogout {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 80%;
		min-height: 65px;
		margin: 0 auto;
		padding: 0 var(--elsa-tree-row-padding-inline, 6px);
		border: 0;
		border-top: 1px solid var(--elsa-menu-border-color, #fff);
		background: transparent;
		color: var(--elsa-text-muted, #667085);
		text-decoration: none;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**コピーライトの左端をアカウント欄・木の最上位項目と揃える**（利用者報告
		2026-09-04 23:30・development /electronic-books/・390×844。アカウント欄を
		展開すると「© 2026 Sakura PCS Co.」がメニュー項目の文字の左端より約35px
		左（欄の外側）に出ていた）。

		基底の`.elsaAppExplorerIdentityPaneCopyright`（PC・スマホ共通、上の方の
		宣言）は`padding: 6px 10px 2px;`だけで、`width`・`margin`を持たない。
		PCのドロップダウンではそれで文字が枠の内側に収まるが、**スマホの
		アカウント区画は`.elsaAppExplorerIdentityPaneToggle`・
		`.elsaAppExplorerIdentityPaneItem`・`.elsaAppExplorerIdentityPaneLogout`が
		いずれも`width: 80%; margin: 0 auto;`で欄自体を中央の80%幅へ絞ってから
		内側の余白を足す作りである。** コピーライトだけこの絞り込みを持たず、
		器（`.elsaAppExplorerIdentityPaneMenu`）の全幅を基準に`10px`を測っていた
		ため、実測で35px前後左へずれて見えていた。

		**直し方は他の行と同じ型を足すだけ。** `width: 80%; margin: 0 auto;`で
		同じ80%幅の帯へ揃え、左の内側余白はトグル・ログアウト・最上位の木と
		同じ左右余白設定を参照する（Issue #3406）。上下の余白
		（`6px`・`2px`）は基底の宣言のまま変えない。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerIdentityPaneCopyright {
		box-sizing: border-box;
		width: 80%;
		margin: 0 auto;
		padding: 6px var(--elsa-tree-row-padding-inline, 6px) 2px;
	}
	/*  いま開いている画面の塗りは木の現在地と同じ（旧側の`aria-current="page"`と同じ値）。  */
	.elsaAppExplorerIdentityPaneItem[aria-current="page"] {
		border-radius: 4px;
		background: var(--elsa-selected-bg, #dceeff);
		color: var(--elsa-selected-color, #333333);
		font-weight: 700;
	}
	.elsaAppExplorerIdentityPaneItem:focus-visible,
	.elsaAppExplorerIdentityPaneLogout:focus-visible {
		outline: 2px solid var(--elsa-primary-color, #24333f);
		outline-offset: -2px;
	}
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		**メニューの中の情報エリアと著作権**（Issue #4603、オーナー決定）

		狭い画面では窓の下の情報エリアを`core/js/elsa_app_explorer.js`がログアウトの
		下の器（`.elsaAppExplorerNavInfo`）へ移す。器の中では窓の直下ではなくなるので、
		窓の最下段としての宣言（`.elsaAppExplorer > .elsaAppExplorerStatusBar`）は
		効かない。ここでは行の幅をほかの行と同じ80%に揃える。中の並び（統計・監査・
		接続状況・版を1行に置き、長い統計を省略する）は情報エリアの共通の宣言のまま
		で、ここで作り直さない。著作権はその下、メニューの一番下に居る。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaAppExplorerNavInfo {
		display: block;
		box-sizing: border-box;
		width: 80%;
		margin: 0 auto;
		padding: 8px 0;
		border-top: 1px solid var(--elsa-menu-border-color, #fff);
	}
	.elsaAppExplorerNavInfo:empty { display: none; }
	/*
		**移した後は窓の最下段に情報エリアの高さが無い。** 高さの正本
		（`--elsa-app-explorer-status-height`）を0にして、画面の高さから最下段を
		引いている本文（みんなのオフィスの分割など）と固定ボタンの持ち上げを
		画面の下端まで届かせる。JSが動かず移っていない間は従来の28pxのまま。
	*/
	.elsaAppExplorer:has(.elsaAppExplorerNavInfo > .elsaAppExplorerStatusBar) { --elsa-app-explorer-status-height: 0px; }
	.elsaAppExplorerNavInfo > .elsaAppExplorerStatusBar {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0;
		padding: 2px var(--elsa-tree-row-padding-inline, 6px);
		border-top: 0;
		background: transparent;
	}
	/*
		**メニューの中は縦に余裕があるので、統計を1行目に、監査・接続状況・版を
		次の行に置く。** 窓の最下段と同じ1行のままだと、メニューの80%幅では統計と
		画面の印の文字が省略されて読めなくなる（375pxで実測）。
	*/
	.elsaAppExplorerNavInfo .elsaAppExplorerStatus { flex: 1 0 100%; }
	.elsaAppExplorerNavInfo .elsaAppExplorerStatusMetaGroup {
		flex-wrap: wrap;
		margin-inline-start: 0;
	}
	.elsaAppExplorerNavPane > .elsaAppExplorerIdentityPaneCopyright {
		display: block;
		padding-bottom: 16px;
	}

	/* 情報バーは狭い画面でも基底の1行契約を使う。折り返し用の上書きは置かない。 */

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

		**連続週表示を指定しない狭い画面は縦に自然に積む**（2026-08-31の利用者指示
		「375pxでは上下スプリッターは無効化し、縦に自然に積む」）。指で高さを
		分け合う操作は要らない。#3421で明示opt-inしたHomeはこの旧規則の対象外で、
		共通horizontal splitterが高さを決め、カレンダー自身のviewportだけを送る。

		境界そのものは共通CSSが隠すので（`elsa_pane_splitter.css`）、ここは段の高さの
		縛りを外す。覚えている高さ（`--elsa-home-top-height`）は使われなくなり、
		広い画面へ戻ればそのまま効く。中身は右のペイン全体で送る。

		**縮まないことまで言う**（`flex: 0 0 auto`。2026-08-31にdevelopmentの375pxで
		見つけた不具合の修正）。器（`.elsaSettingsExplorerMain--fill`）は縦積みの
		flexなので、**段の並びはflexの子として縮められる。** 行を`auto`にしても、
		縮んだ高さの中で`auto`が配分されるだけで、段は右のペインの高さに押し込まれる。
		段は`overflow: visible`なので中身は箱からはみ出し、**カレンダーの月表示が
		下のタスク一覧の上へ204px重なって描かれていた**（実測: 段の行438pxに対して
		カレンダーの中身642px）。

		縮まないと言えば、段は中身の高さで積み上がり、送るのは右のペインが引き受ける
		（`.elsaAppExplorerMain`が`overflow: auto`を持つ）。**広い画面はこの規則を
		読まない**ので、上下2段の掴める境界には何の影響も無い。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaHomePanes:not(.elsaHomePanes--continuous) { grid-template-rows: auto auto auto; height: auto; flex: 0 0 auto; }
	.elsaHomePanes:not(.elsaHomePanes--continuous) > .elsaHomePane { overflow: visible; }
	/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

		Issue #4214 差し戻し（一号機検収）: 375px・カレンダーだけのトップ（`--single`）は
		右のペインが中身の高さで伸びる設計（この`@media`の外の既定）のため、この器の
		高さが決まらない。決まらないまま`.elsaCalendarViewport`の`max-height:100dvh`
		（`elsa_calendar.css`）だけが定まった値になり、送り枠がヘッダー・ボタンエリア・
		曜日の行・情報バーの分を差し引かず画面いっぱい（100dvh）まで伸びていた
		（ページが1005px、画面812pxまではみ出す。overscroll-behavior:containで
		枠の外へは指が届かず、ヘッダーを送ると曜日の行がボタンエリアの下に潜る）。

		`elsa_communication_space.css`の`.elsaCommunicationSpaceSplit`と同じ式で、
		窓の公開寸法（ヘッダー・ボタンエリア・情報バー・共通ペイン上下余白）だけを
		差し引いた残りへ`--single`自身の高さを決める。カレンダー内側（曜日の行・
		送り枠）は、その決まった高さの中でこれまでどおりflexが自分で配分する
		（曜日の行は`flex:0 0 auto`、送り枠は`flex:1 1 auto`）ので、ここで曜日の
		行の高さを差し引く必要はない。

		**この宣言はこの`@media`の中に置く。** 新しく2本目の`@media (max-width:
		767px)`を書くと、その文字列を`strpos`で探す既存の検査
		（`tests/connection_alert_test.php`の`$narrow`抽出）が新しい方を拾い、
		その手前にある無関係の`.elsaAppExplorerPaneToggle { display: none; }`
		（この`@media`より前の既定値）を巻き込んで壊れる（実際に発生・実測）。

	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
	.elsaHomePanes--single {
		/*
			共通ペイン（`.elsaPaneWindowPane`）が本文の上下に持つ`--elsa-content-pane-padding`
			（既定10px）ぶんの余白も、`[data-home-panes]`自身の高さではなく親のpaddingとして
			別に乗るため、ヘッダー・ボタンエリア・情報バーと同じくここで差し引く（左右は
			`.elsaSettingsExplorerMain--fill > [data-home-panes]`のmargin-inlineが既に
			打ち消しているが、上下はここまで打ち消されていなかった）。
		*/
		height: max(0px, calc(100dvh - var(--elsa-mobile-header-height, 72px) - var(--elsa-pane-window-band-height, 52px) - var(--elsa-app-explorer-status-height, 28px) - (var(--elsa-content-pane-padding, 10px) * 2)));
		flex: 0 0 auto;
	}
}


/* Issue #3313 Stage 2b: account identity has its own header foreground. */
.elsaAppExplorerIdentityText,
.elsaAppExplorerAccount,
.elsaNavUser {
	color: var(--elsa-account-text-color, #333333);
}

/*
	2択のつまみも**行に収まる大きさ**にする。項目の行のSWITCHは押しやすさを優先して
	大きく、狭い画面では幅いっぱいに広がるが、行では他の道具と背丈がそろっている
	ことの方が読みやすい。**広がる指定を行の中だけで打ち消す。**

	もとは文書管理の画面のCSSだけが持っていた。入出庫の簡易／詳細（Issue #3815
	第2段階）もボタンエリアにSWITCHを置くので、**画面ごとに作らず共通へ移した。**

	**トグル型（`.elsaSwitchGroup--toggle`、44×24px）には当てない。** 共通へ移したことで
	ボタンエリアに置いたトグル（帳票の「2ページ目以降にも列見出しを印刷」など）まで
	枠の幅と高さを奪っていた（`elsa_chat.css`の同じ規則と同じ除外の書き方）。
*/
.elsaAppExplorerActions .elsaSwitchGroup:not(.elsaSwitchGroup--toggle) {
	width: max-content;
	min-width: 0;
	min-height: var(--elsa-block-action-height);
	flex: 0 0 auto;
}

.elsaAppExplorerActions .elsaSwitchGroup:not(.elsaSwitchGroup--toggle) .elsaSwitchChoice + label {
	flex: 0 0 auto;
	min-width: 0;
	min-height: calc(var(--elsa-block-action-height) - (2 * var(--elsa-form-control-border-width)));
	padding: 0 10px;
	font-size: .9em;
}