/*
	LIFECYCLE（工程台帳）ブロック。設計の正本は docs/lifecycle-block.md。

	規則（docs/block-stability.md の共通契約）:
	- クラス単体スコープ。祖先のセレクタに依存しない。
	- `em`で寸法を決めるため、ルートが自分で font-size を決める。
	- ルート要素は縦マージンを持たない（tests/block_root_spacing_test.php）。
	- 押せる面（畳む操作）は 28px 基準を下回らない。
	- 色は外観設定のトークン（--elsa-primary-color 等）へ追従する。
	- 640px以下は現在の段だけを開く（畳みはJavaScriptの上乗せで、
	  読み込めないときは全段が開いたまま読める）。

	**工程玉はSTEPPER、段の見出しはLINEが描く。** ここに丸や見出し帯の
	見た目を書き足さない。書くと同じ見た目の実装が2つになり、片方だけが
	外観設定へ追従しなくなる。

	`.elsaLifecycleWorkspace` `.elsaLifecycleTreePane` `.elsaLifecycleFlowPane`
	`.elsaLifecycleSummary`は**画面のもの**で、`core/css/elsa_rental_lifecycle.css`
	が持つ。同じ接頭辞だが持ち主が違うので、ここへ移さない。
*/

.elsaLifecycleBlock {
	/*  `em`寸法を使うため自分で文字サイズを決める  */
	font-size: var(--elsa-form-font-size, 16px);
	font-family: inherit;
	color: var(--elsa-content-text-color, #333333);
	display: block;
	width: 100%;
	min-width: 0;
}

/*━━━━━━━━ 記録の見出し（種別・名前・場所） ━━━━━━━━*/

/*
	**種別・名前・場所を1行で読ませる。** 選択だけでは「どの建物の101号室か」が
	分からず、同じ部屋名は珍しくない。2026-08-29に契約ライフサイクル画面の
	`elsa_rental_lifecycle.css`から移設した（画面ごとに作り直さないため）。
*/
.elsaLifecycleHead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--elsa-field-control-border-color, #d2d2d2);
}

.elsaLifecycleKind {
	padding: 1px 8px;
	border: 1px solid var(--elsa-primary-color, #24333f);
	border-radius: 999px;
	color: var(--elsa-primary-color, #24333f);
	font-size: .8em;
	white-space: nowrap;
}

.elsaLifecycleName { margin: 0; font-size: 1.15em; }

.elsaLifecyclePath { font-size: .85em; color: var(--elsa-text-muted, #667085); }

/*━━━━━━━━ 段 ━━━━━━━━*/

/*
	**段と段の間隔を、ここで足さない。** 見出しのLINEが自分の
	`--elsa-line-top-spacing`で上の隙間を持っている。ここでgapを足すと、
	利用者が表示設定で詰めても動かない隙間が二重に入る。
*/
.elsaLifecycleStages { display: block; min-width: 0; }

.elsaLifecycleStage { display: block; min-width: 0; }

/*  畳む操作を見出し帯の右端へ重ねるための基準。帯の幅・高さは変えない。  */
.elsaLifecycleStageHead { position: relative; }

/*
	畳む操作。**PC幅では出さない。** 段が全部見えている画面で開閉の操作を
	置いても、押す理由が無いのに押せる面が段の数だけ増える。
*/
.elsaLifecycleStageToggle {
	display: none;
	position: absolute;
	top: var(--elsa-line-top-spacing, 8px);
	bottom: var(--elsa-line-bottom-spacing, 0px);
	right: 4px;
	box-sizing: border-box;
	width: var(--elsa-block-action-height, 28px);
	height: var(--elsa-block-action-height, 28px);
	min-height: var(--elsa-block-action-height, 28px);
	margin: auto 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.elsaLifecycleStageToggle:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 1px;
}

/*  ▼／▶はCSSだけで描く（外部画像に依存しない。STEPPERのチェック印と同じ）  */
.elsaLifecycleStageToggleMark {
	display: block;
	box-sizing: border-box;
	width: 0.5em;
	height: 0.5em;
	margin: 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.elsaLifecycleStageToggle[aria-expanded="false"] .elsaLifecycleStageToggleMark {
	transform: translateX(-0.15em) rotate(-45deg);
}

.elsaLifecycleStageBody { display: block; min-width: 0; }

/*  畳んだ段は中身ごと消す（見出しは残す）  */
.elsaLifecycleStageBody[hidden] { display: none; }

/*
	**見出しと中身の間に、ここで隙間を足さない。**

	段の中身を器（`.elsaLifecycleStageBody`）へ入れたので、見出しのLINEと
	中身の先頭ブロックは兄弟でなくなった。そのため、base.cssの
	`[data-block-type]:not(.elsaAlertBlock) + .elsaAlertBlock`（隣がALERTの
	ときだけ8px）が当たらなくなり、**先頭が何であっても隙間0**にそろう。

	戻す規則を書こうとすると、`.elsaAlertBlock`（別ブロックのルート）を
	この器の中から装飾することになり、`tests/block_root_spacing_test.php`と
	`tests/field_block_style_test.php`の両方が落とす。**落として正しい。**
	隙間が要るなら、それはALERT自身の契約であって、この器の都合ではない。

	載せ替え前の画面も、先頭がLISTの段（①②）は隙間0だった。**多い側へ
	そろえる**ほうが、見た目の差が小さい。
*/

/*━━━━━━━━ 該当なしの段 ━━━━━━━━*/

/*
	**該当しない段を消さない。** 消すと番号が飛び、「まだ来ていない」のか
	「起きない」のかを読み手が区別できない。見出しを残し、理由を言葉で置く。
	色を薄くするだけにしない（色覚特性・白黒印刷でも「ここだけ違う」と
	分かるように、札の枠と地色でも示す）。
*/
.elsaLifecycleStageNone {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: var(--elsa-block-spacing, 8px) 0 0;
	padding: 8px 12px;
	border: 1px dashed var(--elsa-field-control-border-color, #d2d2d2);
	border-radius: 5px;
	background: var(--elsa-surface, #ffffff);
}

.elsaLifecycleStageNoneMark {
	padding: 1px 8px;
	border: 1px solid var(--elsa-text-muted, #667085);
	border-radius: 999px;
	color: var(--elsa-text-muted, #667085);
	font-size: .8em;
	white-space: nowrap;
}

.elsaLifecycleStageNoneReason {
	min-width: 0;
	font-size: .9em;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/*━━━━━━━━ スマホ幅（375px想定） ━━━━━━━━*/

/*
	**現在の段だけを開く。** 4段ぶんの一覧を縦へ積むと、指で送るだけで
	画面3枚分になり、いま手を動かす段へ辿り着けない。開閉はJavaScriptが
	行い（`core/js/elsa_lifecycle.js`）、ここは操作を見せる役だけを持つ。
	境目はSTEPPERが縦積みへ切り替わるのと同じ640pxにそろえる。
*/
@media (max-width: 640px) {

	/*
		見出し帯と操作を2列に並べる。**LINEのクラスを主語にしない。**
		grid の自動配置が1つめの子（LINEの帯）を左列へ、2つめ（操作）を
		右列へ置くので、別ブロックの見た目を外から書き換えずに幅を分けられる
		（`docs/block-stability.md`の祖先依存禁止。検査は
		`tests/field_block_style_test.php`）。
	*/
	.elsaLifecycleStageHead {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 4px;
	}

	.elsaLifecycleStageToggle {
		display: block;
		position: static;
		margin: 0;
	}

}