/* ==========================================================================
   План пола или комнаты (plan.js): слева — план сверху (SVG), справа — высота, цвета и поля
   выделенного. На телефоне окно — нижний лист: план сверху, поля под ним. Цвета — переменные
   styles.css
   ========================================================================== */

.plan_window{
	width: min(1120px, calc(100vw - 32px));
	height: min(740px, calc(100vh - 32px));
	height: min(740px, calc(100dvh - 32px));
	flex-direction: column;
	overflow: hidden;
}
.plan_window .window_head{
	flex: none;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
#planWindow[data-type="floor"] .room_only{
	display: none;
}

.plan_body{
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 270px;
}

/* план */
.plan_stage{
	position: relative;
	min-width: 0;
	min-height: 0;
	background: var(--surface-2);
}
.plan_svg{
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
	cursor: grab;
}
.plan_svg:active{
	cursor: grabbing;
}
.plan_tools{
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}
.plan_tools > *{
	pointer-events: auto;
}
.plan_tools .btn{
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.plan_zoom{
	display: flex;
	gap: 2px;
	margin-left: auto;
	padding: 2px;
	border-radius: var(--r-sm);
	background: var(--surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.plan_hint{
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	color: var(--text-3);
	font-size: 12px;
	pointer-events: none;
}

/* элементы плана */
.plan_grid{
	stroke: var(--line);
	stroke-width: 1;
}
.plan_grid.is_major{
	stroke: var(--line-strong);
}
.plan_floor{
	stroke: none;
}
.plan_wall{
	stroke: var(--text);
	stroke-width: 6;
	stroke-linecap: square;
}
.plan_wall.is_floor{
	stroke: var(--text-2);
	stroke-width: 2;
}
.plan_wall.is_sel{
	stroke: var(--accent);
}
.plan_hit{
	stroke: transparent;
	stroke-width: 18;
	pointer-events: stroke;
	cursor: move;
}
.plan_dim{
	font: 500 12px var(--font);
	fill: var(--text-2);
	text-anchor: middle;
	dominant-baseline: middle;
	paint-order: stroke;
	stroke: var(--surface-2);
	stroke-width: 4px;
	stroke-linejoin: round;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.plan_dim.is_sel{
	fill: var(--accent-ink);
}
.plan_vertex{
	fill: var(--surface);
	stroke: var(--accent);
	stroke-width: 2;
	pointer-events: none;
}
.plan_vertex.is_sel{
	fill: var(--accent);
}
.plan_vhit{
	fill: transparent;
	cursor: move;
}
.plan_guide{
	stroke: var(--accent);
	stroke-width: 1;
	stroke-dasharray: 5 4;
	pointer-events: none;
}

/* двери и окна: просвет в стене, полотно и дуга открывания; окно — рама со стеклом. Полотно и рама —
   цветом проёма (style из plan.js) в тёмной обводке, у выделенного обводка — акцентом */
.plan_gap{
	stroke: var(--surface-2);
	stroke-width: 8;
}
.plan_outline{
	stroke: rgba(0, 0, 0, .6);		/* по цвету пола, не темы: пол обычно светлый */
}
.plan_leaf_out{
	stroke-width: 7;
}
.plan_leaf{
	stroke: #e7e1d7;
	stroke-width: 4.5;
}
.plan_frame_out{
	stroke-width: 9;
}
.plan_frame{
	stroke: #f6f6f4;
	stroke-width: 7;
}
.plan_swing{
	fill: none;
	stroke: var(--text-3);
	stroke-width: 1;
	stroke-dasharray: 4 3;
}
.plan_glass_line{
	stroke: #8fc0e4;
	stroke-width: 2.5;
}
.plan_opening.is_sel .plan_outline{
	stroke: var(--accent);
}
/* где стоят двери и окна: размерные линии вдоль стены внутри комнаты (plan.js: openingDims) */
.plan_odim{
	stroke: var(--accent);
	stroke-width: 1;
	opacity: .75;
	pointer-events: none;
}
.plan_otext{
	font: 500 11px var(--font);
	fill: var(--accent-ink);
	text-anchor: middle;
	dominant-baseline: middle;
	paint-order: stroke;
	stroke: var(--surface-2);
	stroke-width: 3px;
	stroke-linejoin: round;
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.plan_ohit{
	stroke: transparent;
	stroke-width: 20;
	pointer-events: stroke;
	cursor: ew-resize;
}

/* справа: комната и выделенное */
.plan_side{
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	padding: 14px;
	overflow-y: auto;
	border-left: 1px solid var(--line);
}
.plan_block{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.plan_sel{
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.plan_block_title{
	font-size: 13px;
	font-weight: 600;
}
.plan_pair{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.plan_field{
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.plan_stats{
	color: var(--text-2);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.plan_note{
	color: var(--text-3);
	font-size: 12.5px;
}
.plan_sel .btn_danger_text{
	margin-top: 0;
}
.plan_foot{
	display: flex;
	justify-content: flex-end;
	flex: none;
	border-top: 1px solid var(--line);
	padding-top: 12px;
}
.plan_foot .btn{
	min-width: 120px;
}

/* телефон: нижний лист, план сверху, поля под ним */
@media (max-width: 899px){
	.plan_window{
		width: 100%;
		height: 92vh;
		height: 92dvh;
	}
	.plan_body{
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.plan_side{
		max-height: 40vh;
		max-height: 40dvh;
		border-left: 0;
		border-top: 1px solid var(--line);
	}
	.plan_hint{
		display: none;
	}
	.plan_tools .btn{
		height: 36px;
	}
}