/*
	Замечания по КП (remark-lib.php): карточки (js/remark-cards.js — студия, страница КП, редактор КП) и то, что
	у них в студии (js/remarks.js): панель, кнопка в шапке, точки на модели, холст рисунка, его панель. Кнопка
	«Add a remark» на встроенной 3D — у страницы КП (css/offer.css: .ox_model_remark). Цвета — переменные --rk-*:
	по умолчанию — студии (тёмная и светлая тема), ниже — страницы КП (тема сайта компании, --sx-*) и редактора
	(Flatma Design System).
*/

.rk,
.remarks_panel,
.rk_layer{
	--rk-text: var(--text, #1C1F24);
	--rk-muted: var(--text-2, #5B616A);
	--rk-line: var(--line, #E4E6EA);
	--rk-bg: var(--surface, #FFFFFF);
	--rk-soft: var(--surface-2, #F3F4F6);
	--rk-accent: var(--accent, #0D99FF);
	--rk-accent-soft: var(--accent-soft, #E6F4FF);
	--rk-on-accent: #FFFFFF;
	--rk-r: var(--r, 7px);
	--rk-done: #1F9D60;
	--rk-cant: #D98A00;
	--rk-danger: #E5484D;
}
/* страница КП: тема сайта компании */
.ox_body .rk{
	--rk-text: var(--sx-ink);
	--rk-muted: var(--sx-muted);
	--rk-line: var(--sx-line);
	--rk-bg: var(--sx-surface);
	--rk-soft: var(--sx-soft);
	--rk-accent: var(--sx-ink);
	--rk-accent-soft: var(--sx-soft);
	--rk-on-accent: var(--sx-paper);
	--rk-r: 10px;
}
/* редактор КП: Flatma Design System (--text-meta там — размер, не цвет) */
.of_body .rk{
	--rk-text: var(--text-primary);
	--rk-muted: var(--text-secondary);
	--rk-line: var(--border-card);
	--rk-bg: var(--surface-page);
	--rk-soft: var(--surface-muted);
	--rk-accent: var(--accent);
	--rk-accent-soft: var(--accent-ring);
	--rk-r: 8px;
}

/* ---------- карточки ---------- */

.rk_list{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rk_card{
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r);
	background: var(--rk-bg);
	color: var(--rk-text);
}
.rk_card.is_active{
	border-color: var(--rk-accent);
	box-shadow: inset 0 0 0 1px var(--rk-accent);
}
.rk_head{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.rk_no{
	flex: none;
	min-width: 24px;
	height: 24px;
	padding: 0 4px;
	border-radius: 12px 12px 12px 3px;
	background: var(--rk-accent);
	color: var(--rk-on-accent);
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.rk_card.is_done .rk_no{ background: var(--rk-done); color: #FFFFFF; }
.rk_card.is_cant .rk_no{ background: var(--rk-cant); color: #FFFFFF; }
.rk_sum{
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.rk_text{
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}
.rk_card.is_active .rk_text{
	-webkit-line-clamp: 1;
	font-weight: 600;
}
.rk_meta,
.rk_last{
	color: var(--rk-muted);
	font-size: 12px;
}
.rk_last{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rk_status{
	flex: none;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--rk-accent-soft);
	color: var(--rk-accent);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.rk_card.is_done .rk_status{
	background: color-mix(in srgb, var(--rk-done) 15%, transparent);
	color: var(--rk-done);
}
.rk_card.is_cant .rk_status{
	background: color-mix(in srgb, var(--rk-cant) 15%, transparent);
	color: var(--rk-cant);
}
.rk_body{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 10px 10px 44px;
}
.rk_full{
	margin: 0;
	overflow-wrap: anywhere;
}
.rk_hint,
.rk_note{
	margin: 0;
	color: var(--rk-muted);
	font-size: 12px;
}
.rk_empty{
	margin: 0;
	padding: 6px 2px;
	color: var(--rk-muted);
}
.rk_notes{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rk_notes li{
	padding: 7px 10px;
	border-left: 3px solid var(--rk-line);
	border-radius: var(--rk-r);
	background: var(--rk-soft);
}
.rk_notes li.is_firm{ border-left-color: var(--rk-accent); }
.rk_notes li.is_firm.is_done{ border-left-color: var(--rk-done); }
.rk_notes li.is_firm.is_cant{ border-left-color: var(--rk-cant); }
.rk_notes p{
	margin: 2px 0 0;
	overflow-wrap: anywhere;
}
.rk_who{
	display: block;
	color: var(--rk-muted);
	font-size: 12px;
	font-weight: 500;
}
.rk_actions{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.rk_actions:empty{
	display: none;
}

/* кнопки и поля — свои, одинаковые в студии, на странице КП и в редакторе */
.rk_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 12px;
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r);
	background: var(--rk-bg);
	color: var(--rk-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.rk_btn .i{
	width: 16px;
	height: 16px;
	flex: none;
}
@media (pointer: fine){
	.rk_btn:hover{ background: var(--rk-soft); }
	.rk_btn_main:hover{ background: var(--rk-accent); filter: brightness(1.08); }
	.rk_head:hover .rk_text{ text-decoration: underline; text-decoration-color: var(--rk-line); }
}
.rk_btn_main{
	border-color: var(--rk-accent);
	background: var(--rk-accent);
	color: var(--rk-on-accent);
}
.rk_btn_danger{
	border-color: var(--rk-danger);
	background: var(--rk-danger);
	color: #FFFFFF;
}
.rk_btn_text{
	border-color: transparent;
	background: none;
}
.rk_btn[aria-pressed="true"]{
	border-color: var(--rk-accent);
	background: var(--rk-accent-soft);
	color: var(--rk-accent);
}
.rk_btn:disabled{
	opacity: .55;
	cursor: default;
}
.rk_link{
	padding: 0;
	border: 0;
	background: none;
	color: var(--rk-accent);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.rk_form,
.rk_compose{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rk_label{
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--rk-muted);
	font-size: 12px;
}
.rk_label textarea,
.rk_label input{
	box-sizing: border-box;
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-r);
	background: var(--rk-bg);
	color: var(--rk-text);
	font: inherit;
	font-size: 13px;
	resize: vertical;
}
.rk_label textarea:focus,
.rk_label input:focus{
	border-color: var(--rk-accent);
	outline: 2px solid var(--rk-accent-soft);
}
.rk_error{
	margin: 0;
	color: var(--rk-danger);
	font-size: 12px;
}
.rk_error[hidden]{
	display: none;
}
.rk_form_actions{
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ---------- студия: панель и кнопка в шапке ---------- */

.remarks_panel{
	grid-area: right;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-left: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
}
.remarks_panel[hidden]{
	display: none;
}
.remarks_panel .panel_title{
	display: flex;
	align-items: center;
	gap: 6px;
}
.remarks_panel .panel_title .i{
	width: 16px;
	height: 16px;
}
.remarks_top{
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: none;
	padding: 0 12px 12px;
	border-bottom: 1px solid var(--line);
}
.remarks_top:empty{
	display: none;
}
.rk_add{
	align-self: flex-start;
}
.rk_compose_title{
	margin: 0;
	font-weight: 600;
}
.rk_compose_tools{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.remarks_list{
	padding: 10px 12px 16px;
}
/* у фирмы — поверх правой колонки, как история версий */
body:not([data-view]) .remarks_panel{
	position: fixed;
	top: var(--header-h);
	right: var(--ads-w, 0px);	/* левее колонки рекламы (styles.css) */
	bottom: 0;
	z-index: 50;
	width: min(340px, 100vw);
	box-shadow: var(--shadow-pop);
}
.remarks_btn[aria-pressed="true"],
.remarks_btn[aria-pressed="true"] .i{
	color: var(--accent);
}
.remarks_badge{
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--danger);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}
.remarks_badge[hidden]{
	display: none;
}
body[data-embed] .remarks_btn{
	display: none;
}
/* просмотр по ссылке «Share» (принимает замечания): панель — колонкой справа, как сборка (styles.css:
   body[data-assembly]), на телефоне — полосой под сценой; карточки материалов на сцене на это время спрятаны */
@media (min-width: 900px){
	body[data-view]:not([data-embed])[data-remarks]{
		grid-template-columns: 0 minmax(0, 1fr) var(--right-w);
	}
}
@media (max-width: 899px){
	body[data-view]:not([data-embed])[data-remarks]{
		grid-template-rows: var(--header-h) minmax(0, 1fr) minmax(0, 52%);
		grid-template-areas:
			"header"
			"view"
			"right";
	}
	body[data-view]:not([data-embed]) .remarks_panel{
		border-top: 1px solid var(--line);
		border-left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
}
body[data-view]:not([data-embed])[data-remarks] .canvas_case > .rpane_mats{
	display: none;
}
/* на телефоне подписи кнопок шапки спрятаны (styles.css), но клиенту по ссылке без неё не понять, что это */
@media (max-width: 899px){
	body[data-view]:not([data-embed]) .remarks_btn .btn_label{
		display: inline;
	}
}
/* фирма: КП, по которым замечания, — «Update the offer» */
.rk_offers{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rk_offer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.rk_offer_name{
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 600;
}
.rk_offer_meta{
	color: var(--rk-muted);
	font-size: 12px;
	font-weight: 400;
}
/* встроенная 3D страницы КП: панель — колонкой справа, на узкой рамке — под сценой */
@media (min-width: 640px){
	body[data-embed][data-remarks]{
		grid-template-columns: minmax(0, 1fr) min(330px, 44%);
		grid-template-areas:
			"header header"
			"view   right";
	}
}
@media (max-width: 639px){
	body[data-embed][data-remarks]{
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 0 minmax(0, 1fr) minmax(0, 52%);
		grid-template-areas:
			"header"
			"view"
			"right";
	}
	body[data-embed] .remarks_panel{
		border-top: 1px solid var(--line);
		border-left: 0;
	}
}

/* ---------- студия: поверх сцены ---------- */

.rk_layer{
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	pointer-events: none;
}
.rk_draw{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.rk_draw.is_drawing{
	cursor: crosshair;
	touch-action: none;
	pointer-events: auto;
}
.rk_pins{
	position: absolute;
	inset: 0;
}
/* точка: кружок с номером на ножке, острие — в точке на детали */
.rk_pin{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 26px;
	height: 26px;
	margin: -36px 0 0 -13px;
	padding: 0 5px;
	border: 2px solid #FFFFFF;
	border-radius: 13px;
	background: var(--rk-accent);
	color: #FFFFFF;
	font: 600 12px/1 var(--font, system-ui);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	cursor: pointer;
	pointer-events: auto;
	transition: opacity .15s;
}
.rk_pin::before,
.rk_pin::after{
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
}
.rk_pin::before{
	top: 100%;
	width: 2px;
	height: 7px;
	margin: 0 0 0 -1px;
	background: #FFFFFF;
}
.rk_pin::after{
	top: calc(100% + 6px);
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: inherit;
	box-shadow: 0 0 0 1.5px #FFFFFF;
}
.rk_pin.is_done{ background: var(--rk-done); }
.rk_pin.is_cant{ background: var(--rk-cant); }
.rk_pin.is_new{
	background: #FFFFFF;
	border-color: var(--rk-accent);
	color: var(--rk-accent);
}
.rk_pin.is_new::after{ background: var(--rk-accent); }
.rk_pin.is_active{
	z-index: 1;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-accent) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .35);
}
.rk_pin.is_behind:not(.is_active){
	opacity: .45;
}
/* подсказка и панель рисунка — внизу сцены: вверху справа — кнопки рамки страницы КП */
.rk_scene_hint{
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	width: max-content;
	max-width: calc(100% - 24px);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 7px 14px;
	border-radius: 99px;
	background: var(--tip-bg, #28282A);
	color: var(--tip-text, #FFFFFF);
	font-size: 13px;
	white-space: nowrap;
	box-shadow: var(--shadow-pop);
	pointer-events: auto;
}
.rk_scene_hint[hidden]{
	display: none;
}
.rk_scene_hint .rk_link{
	margin-left: 6px;
	color: inherit;
}
.rk_drawbar{
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	width: max-content;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: calc(100% - 16px);
	box-sizing: border-box;
	gap: 4px;
	padding: 5px;
	border-radius: 12px;
	background: var(--surface);
	box-shadow: var(--shadow-pop);
	pointer-events: auto;
}
.rk_drawbar[hidden]{
	display: none;
}
.rk_colors{
	display: flex;
	gap: 6px;
	padding: 0 6px 0 4px;
}
.rk_color{
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 0 1px var(--line-strong);
	cursor: pointer;
}
.rk_color[aria-pressed="true"]{
	box-shadow: 0 0 0 2px var(--accent);
}
.rk_tool{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border: 0;
	border-radius: var(--r);
	background: none;
	color: var(--text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.rk_tool .i{
	width: 18px;
	height: 18px;
}
.rk_tool[aria-pressed="true"]{
	background: var(--accent-soft);
	color: var(--accent-ink);
}
@media (pointer: fine){
	.rk_tool:hover:not([aria-pressed="true"]){ background: var(--surface-2); }
}
.rk_tool_done{
	margin-left: 4px;
	padding: 0 12px;
	background: var(--accent);
	color: #FFFFFF;
}
body[data-remark-pin] .canvas{
	cursor: crosshair;
}
/* «As it was»: во фрейме — прежняя версия КП; полоса внизу сцены — вернуться к нынешней */
.rk_was{
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - 24px);
	margin: 0 auto;
	padding: 6px 6px 6px 14px;
	border-radius: 99px;
	background: var(--tip-bg, #28282A);
	color: var(--tip-text, #FFFFFF);
	font-size: 13px;
	box-shadow: var(--shadow-pop);
	pointer-events: auto;
}
.rk_was .rk_btn{
	border-radius: 99px;
}
/* печать страницы КП (PDF): текст замечаний целиком */
@media print{
	.rk_text{
		display: block;
		-webkit-line-clamp: unset;
	}
	.rk_actions,
	.rk_form{
		display: none !important;
	}
}