/* ==========================================================================
   Каталог готовых деталей (catalog.js): кнопка «Catalog» в блоке «Project parts», окно каталога —
   разделы слева (свободные фигуры, каталог, My parts, Flatma community), детали карточками справа; на телефоне окно — нижний лист, разделы — лентой
   сверху. Строки «Project parts» — styles.css, здесь — превью деталей в них и окно «New part»
   (в конце файла). Цвета — переменные styles.css
   ========================================================================== */

/* кнопка «Catalog» под списком «Project parts» */
.catalog_pick{
	padding: 6px 12px 0;
}
.catalog_pick .btn .i{
	color: var(--accent-ink);
}

/* окно: шапка, под ней разделы и детали */
.catalog_window{
	width: min(900px, calc(100vw - 32px));
	height: min(640px, calc(100vh - 32px));
	height: min(640px, calc(100dvh - 32px));
	flex-direction: column;
	overflow: hidden;
}
.catalog_window .window_head{
	flex: none;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.catalog_body{
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
}

/* разделы */
.catalog_nav{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	overflow-y: auto;
	border-right: 1px solid var(--line);
}
.catalog_tab{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 34px;
	padding: 0 8px 0 10px;
	border-radius: var(--r-sm);
	color: var(--text-2);
	text-align: left;
}
.catalog_tab .i{
	width: 16px;
	height: 16px;
}
.catalog_tab_name{
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.catalog_tab_count{
	color: var(--text-3);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}
.catalog_tab[aria-selected="true"]{
	background: var(--accent-soft);
	color: var(--text);
	font-weight: 500;
}
.catalog_tab[aria-selected="true"] .i{
	color: var(--accent-ink);
}
@media (pointer: fine){
	.catalog_tab:hover:not([aria-selected="true"]){
		background: var(--surface-2);
		color: var(--text);
	}
}

/* детали раздела */
.catalog_main{
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 16px 18px;
}
.catalog_group_title{
	margin: 18px 0 8px;
	color: var(--text-2);
	font-size: 12px;
	font-weight: 600;
}
.catalog_group_title:first-child{
	margin-top: 0;
}
.catalog_grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.catalog_item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	padding: 12px 8px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	text-align: center;
}
.catalog_item .i{
	width: 26px;
	height: 26px;
	stroke-width: 1.3;
	color: var(--text-2);
}
.catalog_item_name{
	font-weight: 500;
	line-height: 1.25;
}

/* превью детали библиотеки (part-thumb.js) — вместо значка: картинка 256 px на 96 px карточки */
.catalog_item.has_thumb{
	justify-content: flex-start;
	padding-top: 8px;
}
.catalog_item_thumb{
	display: block;
	flex: none;
	width: 96px;
	height: 96px;
	object-fit: contain;
}
.catalog_item_hint{
	color: var(--text-3);
	font-size: 11.5px;
	line-height: 1.3;
}
.catalog_item:active{
	background: var(--accent-soft);
	border-color: var(--accent);
}
@media (pointer: fine){
	.catalog_item:hover{
		border-color: var(--accent);
	}
	.catalog_item:hover .i{
		color: var(--accent-ink);
	}
}

/* своя деталь и деталь каталога у администратора (catalog.js: catalogCard, editLibraryCard):
   карандаш в углу карточки — виден при наведении; правка — форма на месте карточки */
.catalog_cell{
	position: relative;
	display: grid;
}
.catalog_cell .catalog_item{
	min-width: 0;
}
.catalog_item_edit{
	position: absolute;
	top: 4px;
	right: 4px;
	width: 28px;
	height: 28px;
	opacity: 0;
}
.catalog_cell:hover .catalog_item_edit,
.catalog_item_edit:focus-visible{
	opacity: 1;
}
@media (pointer: coarse){
	.catalog_item_edit{
		opacity: 1;
	}
}
.catalog_edit{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--accent);
	border-radius: var(--r);
}
.catalog_edit_row{
	display: flex;
	gap: 6px;
	align-items: center;
}
.catalog_edit_row .icon_btn{
	margin-left: auto;
}

/* заголовок раздела своих деталей (и каталога у администратора): название и карандаш */
.catalog_group_head{
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 18px 0 8px;
}
.catalog_group_head:first-child{
	margin-top: 0;
}
.catalog_group_head .catalog_group_title{
	margin: 0;
}
.catalog_group_edit{
	width: 26px;
	height: 26px;
}
.catalog_group_input{
	max-width: 280px;
}

/* поиск в разделе Flatma community (catalog.js: showPublicProjects) и «Loading…» */
.catalog_search{
	display: block;
	width: 100%;
	margin-bottom: 14px;
}
.catalog_note{
	color: var(--text-3);
}

/* блок «Reuse and share» в окне «Part details» (designer-ui.js: refreshPartLibrary) */
.part_library:not([hidden]){
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
}

/* проекты Flatma community — деталью в этот (catalog.js: showPublicProjects): подсказка, поиск, список */
.catalog_projects_hint{
	margin: 0 0 12px;
	color: var(--text-2);
}
.catalog_project_list{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.catalog_project{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: none;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}
.catalog_project:hover,
.catalog_project:focus-visible{
	border-color: var(--accent);
	background: var(--accent-soft);
}
.catalog_project_name{
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.catalog_project_meta{
	flex: none;
	color: var(--text-3);
}
/* с обложкой (project.php: ?cover): картинка слева, название растягивается */
.catalog_project.has_cover{
	align-items: center;
	padding: 6px 12px 6px 6px;
}
.catalog_project_cover{
	flex: none;
	width: 64px;
	height: 40px;
	border-radius: var(--r-sm);
	object-fit: cover;
	background: var(--surface-2);
}
.catalog_project.has_cover .catalog_project_name{
	flex: 1;
	text-align: left;
}

/* пустой раздел (Flatma community) */
.catalog_empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 320px;
	margin: 56px auto 0;
	color: var(--text-3);
	text-align: center;
}
.catalog_empty .i{
	width: 32px;
	height: 32px;
	margin-bottom: 4px;
	stroke-width: 1.2;
}
.catalog_empty_title{
	color: var(--text);
	font-weight: 600;
}

/* телефон: окно — нижний лист (styles.css: .window), разделы — лентой сверху */
@media (max-width: 899px){
	.catalog_window{
		width: 100%;
		height: 86vh;
		height: 86dvh;
	}
	.catalog_body{
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
	}
	.catalog_nav{
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		scrollbar-width: none;
	}
	.catalog_nav::-webkit-scrollbar{
		display: none;
	}
	.catalog_tab{
		height: 36px;
	}
	.catalog_tab_name{
		overflow: visible;
	}
	.catalog_grid{
		grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	}
	.catalog_main{
		padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
	}
}

/* превью детали на плашке строки «Project parts» (designer-parts.js: partRowThumb, setRowThumb) —
   вместо значка: своя деталь — нарисована в студии, деталь библиотеки — с сервера */
.part_icon.has_thumb{
	overflow: hidden;
}
.part_thumb{
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
}

/* окно «New part» (designer-ui.js: startNewPart): со сцены или с чистого листа */
.new_part_choice{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	text-align: left;
}
.new_part_choice .i{
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--accent-ink);
}
.new_part_text{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.new_part_title{
	font-weight: 600;
}
.new_part_hint{
	color: var(--text-3);
	font-size: 12.5px;
	line-height: 1.35;
}
.new_part_choice:active{
	background: var(--accent-soft);
	border-color: var(--accent);
}
@media (pointer: fine){
	.new_part_choice:hover{
		border-color: var(--accent);
	}
}

/* библиотека крепежа (fasten-library.js): окно как у каталога, виды — карточками со значком.
   Стоит у детали — ✓ в углу и рамка цвета выделения; не встанет — бледная (что нужно — в подсказке
   и строкой внизу окна); у вида с размерами под карточкой — список */
.fasten_card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.fasten_card .catalog_item{
	flex: 1;
	min-height: 112px;
	justify-content: flex-start;
	border: 0;
	border-radius: var(--r);
}
.fasten_pic{
	flex: none;
	width: 36px;
	height: 36px;
	color: var(--text-2);
}
.fasten_card_size{
	margin: 0 8px 8px;
	width: auto;
	height: 28px;
	font-size: 12px;
}
.fasten_card_on{
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
}
.fasten_card_on .i{
	width: 12px;
	height: 12px;
	stroke-width: 2.4;
}
.fasten_card.is_on{
	border-color: var(--accent);
	background: var(--accent-soft);
}
.fasten_card.is_on .fasten_pic{
	color: var(--accent-ink);
}
/* стоит, но не на своём месте (направляющая, а щель уже не её): клик подгоняет */
.fasten_card.is_warn{
	border-color: var(--warn-line);
	background: var(--warn-bg);
}
.fasten_card.is_unavailable .catalog_item{
	cursor: help;
}
.fasten_card.is_unavailable .fasten_pic,
.fasten_card.is_unavailable .catalog_item_name{
	opacity: .45;
}
.fasten_card .catalog_item:disabled{
	cursor: default;
	opacity: .6;
}
@media (pointer: fine){
	.fasten_card:hover:not(.is_unavailable){
		border-color: var(--accent);
	}
	.fasten_card .catalog_item:hover{
		border-color: transparent;
	}
	.fasten_card.is_unavailable .catalog_item:hover .i,
	.fasten_card.is_unavailable .catalog_item:hover{
		color: inherit;
	}
}
.fasten_lib_note{
	flex: none;
	margin: 0;
	padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--line);
	background: var(--warn-bg);
	color: var(--warn-text);
	font-size: 12.5px;
	line-height: 1.4;
}