/*
	STEPPER（工程表示）ブロック。設計の正本は docs/stepper-block.md。

	規則（docs/block-stability.md の共通契約）:
	- クラス単体スコープ。祖先のセレクタに依存しない。
	- `em`で寸法を決めるため、ルートが自分で font-size を決める。
	- 操作面（リンクの押せる面）は 28px 基準を下回らない。
	- 色は外観設定のトークン（--elsa-primary-color 等）へ追従する。
	- 状態は色だけで区別しない（済み＝チェック印、現在＝塗り＋太字、
	  未来＝輪郭の丸と番号）。未来の段を「無効」に見せない（USWDSの指針。
	  薄くしすぎると読めない段ができる）。
	- 640px以下は縦積みへ切り替える（Ant Design・MUI・Carbonが小画面で
	  推奨する形。横overflowを出さないため）。
*/

.elsaStepperBlock {
	/*  `em`寸法（丸2em等）を使うため自分で文字サイズを決める  */
	font-size: var(--elsa-form-font-size, 16px);
	font-family: inherit;
	color: var(--elsa-content-text-color, #333333);
}

.elsaStepperList {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elsaStepperStep {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/*
	段と段をつなぐ線。2つめ以降の段が、自分の左隣までの線を描く。
	左右の逃げ（1em + 8px）で丸に重ならない。
*/
.elsaStepperStep + .elsaStepperStep::before {
	content: "";
	position: absolute;
	top: calc(2px + 1em - 1px);
	left: calc(-50% + 1em + 8px);
	right: calc(50% + 1em + 8px);
	height: 2px;
	background: var(--elsa-button-default-bg, #d2d2d2);
}

/*  済んだ段から伸びる線は前進した印として濃くする  */
.elsaStepperStep--done + .elsaStepperStep::before {
	background: var(--elsa-primary-color, #24333f);
}

.elsaStepperContent {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: var(--elsa-block-action-height, 28px);
	padding: 2px 4px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

/*  押せる段（済み・作成導線）はラベルの下線で示す。**色だけに頼らない**  */
.elsaStepperContent--link .elsaStepperLabel {
	color: var(--elsa-primary-color, #24333f);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elsaStepperContent--link:hover {
	background: color-mix(in srgb, var(--elsa-primary-color, #24333f) 8%, transparent);
	border-radius: 4px;
}

.elsaStepperContent--link:focus-visible {
	outline: 2px solid var(--elsa-primary-color, #24333f);
	outline-offset: 2px;
	border-radius: 4px;
}

.elsaStepperMarker {
	font-size: 1em;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 2em;
	height: 2em;
	border: 2px solid var(--elsa-button-default-bg, #d2d2d2);
	border-radius: 50%;
	background: var(--elsa-surface, #ffffff);
	line-height: 1;
	position: relative;
	z-index: 1;
}

.elsaStepperStep--done .elsaStepperMarker {
	border-color: var(--elsa-primary-color, #24333f);
	background: var(--elsa-primary-color, #24333f);
}

.elsaStepperStep--current .elsaStepperMarker {
	border-color: var(--elsa-primary-color, #24333f);
	background: var(--elsa-primary-color, #24333f);
	color: var(--elsa-primary-contrast, #fff);
	font-weight: 700;
	/*  現在地の輪。塗りと番号の太字に重ねる3つめの手がかり  */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--elsa-primary-color, #24333f) 25%, transparent);
}

/*
	該当なし（この案件では起きない段）。**輪郭の丸＋横棒**で示す。
	薄い色だけにすると「未着手」と見分けが付かず、消すと番号が飛ぶ。
	2026-08-29にLIFECYCLE（工程台帳）の初出で追加した。
*/
.elsaStepperStep--notApplicable .elsaStepperMarker {
	border-style: dashed;
}

.elsaStepperStep--notApplicable .elsaStepperLabel,
.elsaStepperStep--notApplicable .elsaStepperNote {
	color: color-mix(in srgb, var(--elsa-content-text-color, #333333) 60%, var(--elsa-surface, #ffffff));
}

/*  横棒もCSSだけで描く（チェック印と同じ理由で外部画像に依存しない）  */
.elsaStepperSkip {
	font-size: 1em;
	display: block;
	box-sizing: border-box;
	width: 0.8em;
	height: 0;
	border-top: 2px solid var(--elsa-button-default-bg, #d2d2d2);
}

/*  チェック印はCSSだけで描く（外部画像に依存しない）  */
.elsaStepperCheck {
	font-size: 1em;
	display: block;
	box-sizing: border-box;
	width: 0.9em;
	height: 0.5em;
	margin-top: -0.2em;
	border-left: 2px solid var(--elsa-primary-contrast, #fff);
	border-bottom: 2px solid var(--elsa-primary-contrast, #fff);
	transform: rotate(-45deg);
}

.elsaStepperText {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.elsaStepperLabel {
	line-height: 1.4;
}

.elsaStepperStep--current .elsaStepperLabel {
	font-weight: 700;
}

.elsaStepperNote {
	font-size: 0.85em;
	line-height: 1.4;
	color: color-mix(in srgb, var(--elsa-content-text-color, #333333) 72%, var(--elsa-surface, #ffffff));
}

/*
	640px以下は縦積み。丸を左、名前を右に置き、線は丸の中心を縦に通す。
	段名・番号・状態を省略しない（SAP Fioriの「現在段だけラベル」は
	済み段のリンク先が読めなくなるため採らない。docs/stepper-block.md）。
*/
@media (max-width: 640px) {

	.elsaStepperList {
		flex-direction: column;
		gap: 10px;
	}

	.elsaStepperStep {
		flex: none;
	}

	.elsaStepperStep + .elsaStepperStep::before {
		top: -10px;
		right: auto;
		bottom: auto;
		left: calc(4px + 1em - 1px);
		width: 2px;
		height: 10px;
	}

	.elsaStepperContent {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		text-align: left;
	}

	.elsaStepperText {
		flex: 1 1 auto;
	}

}