Участник:Kemran2933/Procedure.css

/*
 * Стили для {{Procedure}}.
 *
 * Сворачивание делает штатный mw-collapsible: JS MediaWiki переключает класс
 * .mw-collapsed и сам скрывает содержимое через display:none. Поверх этого здесь
 * плавная анимация и стрелка. Все правила, зависящие от состояния, используют
 * дочерний селектор (>), чтобы вложенные процедуры раскрывались независимо.
 */

.ss220-procedure {
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	border: 1px solid #2b3139;
	border-radius: 8px;
	overflow: hidden;
	background: #191f26;
	color: #c5c9ce;
}

/* Заголовок целиком служит переключателем. */
.ss220-procedure > .ss220-procedure__head {
	display: flex;
	align-items: center;
	gap: 7px;
	float: none;
	box-sizing: border-box;
	min-height: 27px;
	padding: 4px 9px;
	font: 700 12px/18px Roboto, Arial, sans-serif;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease;
}

.ss220-procedure > .ss220-procedure__head:hover {
	background-color: #1f262e;
}

/* Стрелка: вниз, когда раскрыто, вправо, когда свёрнуто. */
.ss220-procedure > .ss220-procedure__head::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.ss220-procedure.mw-collapsed > .ss220-procedure__head::before {
	transform: rotate(-45deg);
}

/*
 * Плавное раскрытие. Сразу после инициализации (.mw-made-collapsible) высоту
 * задаёт grid, а не display:none. До загрузки JS блок скрывает штатный CSS
 * MediaWiki, а без JS содержимое остаётся раскрытым.
 */
.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {
	display: grid !important;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}

.ss220-procedure.mw-made-collapsible.mw-collapsed > .mw-collapsible-content {
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
}

.ss220-procedure__body {
	min-height: 0;
	overflow: hidden;
}

.ss220-procedure__inner {
	border-top: 2px solid #405a75;
	padding: 12px 14px;
	line-height: 1.5;
}

.ss220-procedure__inner > :first-child {
	margin-top: 0;
}

.ss220-procedure__inner > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ss220-procedure > .ss220-procedure__head,
	.ss220-procedure > .ss220-procedure__head::before,
	.ss220-procedure.mw-made-collapsible > .mw-collapsible-content {
		transition: none;
	}
}