/* Список проёмов — оформление. Разметка: includes/ui/openings.php,
   поведение: includes/ui/openings.js. Цветов здесь нет, только токены --sk-*. */

.sk-openings { display: flex; flex-direction: column; gap: 6px; }
/* строка проёма (вид · ширина · высота · шт) в одну колонку формы не помещается */
.sk-form > :has(.sk-openings, .sk-openings__list) { grid-column: 1 / -1; }

.sk-openings__list { display: flex; flex-direction: column; gap: 6px; }

.sk-open-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 6px 8px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius-sm, 6px);
	background: var(--sk-paper);
}

.sk-open-row__kind {
	flex: 0 0 auto;
	min-width: 46px;
	font-weight: 600;
	font-size: 13px;
	color: var(--sk-ink-2);
}

.sk-open-row__side { flex: 0 0 88px; }

.sk-open-row__n,
.sk-open-row__off {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--sk-ink-2);
}

.sk-open-row__n .sk-ctrl { width: 72px; }
/* стандартное числовое поле в строке (SKField.numHtml): подпись над полем,
   поле узкое, рамка видна на белой строке */
.sk-open-row__n:has(.sk-num) { flex-direction: column; align-items: stretch; gap: 2px; }
.sk-open-row__n .sk-num { width: 104px; }
.sk-open-row__n .sk-num > .sk-input { width: 100%; }

/* Ползунок смещения занимает остаток строки — им ловят положение проёма
   по стене, и чем он длиннее, тем точнее попадание. */
.sk-open-row__off { flex: 1 1 140px; }
.sk-open-row__off input[type="range"] { flex: 1 1 auto; min-width: 80px; }

.sk-open-row__del {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	line-height: 1;
	font-size: 18px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius-sm, 6px);
	background: transparent;
	color: var(--sk-ink-2);
	cursor: pointer;
}
.sk-open-row__del:hover { border-color: var(--sk-bad); color: var(--sk-bad); }

.sk-openings__add { display: flex; gap: 8px; }

.sk-open-empty { margin: 0; font-size: 13px; color: var(--sk-ink-2); }

/* На печати список проёмов не нужен: он есть в «Исходных данных». */
@media print { .sk-openings { display: none; } }

/* Телефон: строка переносится, подпись стороны уходит в свою строку. */
@media (max-width: 560px) {
	.sk-open-row__n .sk-ctrl { width: 60px; }
	.sk-open-row__off { flex: 1 1 100%; }
}