/* «Прямоугольник» — веб-версия. Светлая тема в стиле NWA Viewer: белые панели,
   серые рамки, оранжевый акцент. Полностью повторяет решение «Жертвы 2.0»
   (nwa-zhertva.css), отличия только в именах классов и в том, что у
   «Прямоугольника» нет анимации прохода и тумблеров.

   Страница выводится в обвязке магазина — с той же панелью и подвалом, что на
   «Услугах». Правила отдельной страницы (.nwa-rc-body, .nwa-rc-top, .nwa-rc-main,
   .nwa-rc-foot) остались от локального стенда dev/rect-dev.php — он собирает
   эту оболочку сам, на сайте они не используются. Не удалять.

   Все цвета — в переменных ниже; селектор двойной, потому что на отдельной
   странице шапка и подвал лежат вне блока .nwa-rc, а сам блок должен пережить
   вставку в чужую страницу без класса на body. */
.nwa-rc-body,
.nwa-rc{
	--rc-page:#F4F5F7;          /* фон страницы за панелями */
	--rc-bg:#FFFFFF;            /* фон блока инструмента */
	--rc-panel:#FFFFFF;         /* карточки настроек и метрик */
	--rc-head:#FFFFFF;          /* шапка страницы и блока, подвал */
	--rc-input:#FFFFFF;         /* поля ввода и вторичные кнопки */
	--rc-hover:#F1F3F5;         /* подсветка при наведении */
	--rc-border:#D9DEE3;
	--rc-border-strong:#BFC7CE;
	--rc-text:#1F2328;
	--rc-dim:#6B7280;
	--rc-orange:#DE4E10;        /* заливки, рамки, активные состояния */
	--rc-orange-hover:#F06529;
	/* Оранжевый для текста — темнее заливочного: светлый акцент на белом
	   фоне читается плохо, а надписи должны оставаться разборчивыми. */
	--rc-orange-text:#BD420E;
	--rc-orange-soft:rgba(222,78,16,.08);
	/* Подложка под оранжевым текстом (плашка, выбранный вариант) — серая:
	   оранжевое на оранжевом читалось плохо (владелец, 23.09.2026).
	   Оранжевая --rc-orange-soft осталась там, где текста нет (тумблер). */
	--rc-neutral-soft:#EEEEEA;
	--rc-blue:#1F6FC4;
	--rc-danger:#D22B2F;
	/* Область предпросмотра намеренно остаётся тёмной: это вид сверху, и
	   цвета в nwa-rect.js подобраны под тёмный фон. */
	--rc-stage:#151515;
}

/* ── Защита от стилей магазина ─────────────────────────────────
   Блок выводится в обвязке страницы, и на голые теги внутри него ложатся
   правила bootstrap и темы: у h2 свои размеры и отступы, у label —
   display:inline-block и margin-bottom, у p — нижний отступ. Здесь они
   возвращаются к умолчаниям браузера, как на самостоятельной странице.

   Те же два принципа, что у «Жертвы»: значение revert вместо списка чисел, и
   :where() в селекторах — он не добавляет специфичности, поэтому собственные
   правила инструмента вида .nwa-rc__card-title побеждают. Блок стоит ВЫШЕ
   компонентов и подстилает под них, переносить его в конец файла — сломать
   вид страницы. */
.nwa-rc :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,fieldset,legend,blockquote){
	margin:revert;
	padding:revert;
	font:revert;
	color:revert;
	text-transform:revert;
	letter-spacing:revert;
}
.nwa-rc :where(label){
	display:revert;
	max-width:revert;
	margin:revert;
	font-weight:revert;
}
.nwa-rc :where(input,select,textarea,button){
	margin:revert;
	font:revert;
	line-height:revert;
	text-transform:revert;
	letter-spacing:revert;
	box-shadow:revert;
}
/* Ссылки: у .nwa-rc__btn цвет уже стоит с !important — автор закладывал
   вставку в чужую страницу. Прочим ссылкам возвращается оранжевый акцент
   инструмента, иначе тема красит их своим бежевым var(--nwa-accent). */
.nwa-rc :where(a){
	color:var(--rc-orange-text);
	text-decoration:none;
}

/* ── Каркас отдельной страницы ─────────────────────────────────
   Используется только локальным стендом dev/rect-dev.php (см. выше). */
.nwa-rc-body{
	margin:0;
	padding:0;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	background:var(--rc-page);
	color:var(--rc-text);
	font-family:'Montserrat','Segoe UI',Arial,sans-serif;
	-webkit-font-smoothing:antialiased;
}
.nwa-rc-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	padding:14px 24px;
	background:var(--rc-head);
	border-bottom:1px solid var(--rc-border);
}
.nwa-rc-top__logo{
	display:block;
	line-height:0;
}
.nwa-rc-top__logo img{
	display:block;
	height:52px;
	width:auto;
}
.nwa-rc-top__nav{
	display:flex;
	gap:22px;
	flex-wrap:wrap;
}
.nwa-rc-top__nav span{
	color:var(--rc-dim);
	font-size:14px;
	font-weight:500;
}
.nwa-rc-main{
	flex:1 1 auto;
	width:100%;
	max-width:1560px;
	margin:0 auto;
	padding:22px;
}
.nwa-rc-foot{
	padding:16px 24px;
	border-top:1px solid var(--rc-border);
	background:var(--rc-head);
	color:var(--rc-dim);
	font-size:12px;
	text-align:center;
}

.nwa-rc{
	margin:0 0 28px;
	padding:0;
	border:1px solid var(--rc-border);
	border-radius:14px;
	background:var(--rc-bg);
	color:var(--rc-text);
	font-family:'Montserrat','Segoe UI',Arial,sans-serif;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(16,24,40,.07);
}
.nwa-rc *{box-sizing:border-box}

/* ── Шапка ─────────────────────────────────────────────────────── */
.nwa-rc__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 22px;
	background:var(--rc-head);
	border-bottom:1px solid var(--rc-border);
}
.nwa-rc__title{
	font-size:22px;
	font-weight:700;
	color:var(--rc-text);
	line-height:1.2;
}
.nwa-rc__sub{
	margin-top:3px;
	font-size:13px;
	color:var(--rc-dim);
}
.nwa-rc__badge{
	flex:0 0 auto;
	padding:6px 12px;
	border:1px solid var(--rc-orange);
	border-radius:999px;
	background:var(--rc-neutral-soft);
	font-size:12px;
	font-weight:600;
	letter-spacing:.04em;
	color:var(--rc-orange-text);
	white-space:nowrap;
}

/* ── Раскладка ─────────────────────────────────────────────────── */
.nwa-rc__layout{
	display:grid;
	grid-template-columns:minmax(320px, 420px) 1fr;
	gap:0;
	align-items:start;
}
.nwa-rc__panel{
	padding:14px;
	border-right:1px solid var(--rc-border);
	display:flex;
	flex-direction:column;
	gap:9px;
	min-width:0;
}

/* ── Карточки настроек ─────────────────────────────────────────── */
/* Карточек девять, и в полный рост панель уезжала далеко за экран:
   отступы и строки сжаты, а каждую карточку можно свернуть. */
.nwa-rc__card{
	padding:9px 12px 11px;
	border:1px solid var(--rc-border);
	border-radius:10px;
	background:var(--rc-panel);
}
.nwa-rc__card-title{
	position:relative;
	margin:0 0 9px;
	padding:1px 22px 1px 0;
	font-size:13px;
	font-weight:700;
	color:var(--rc-text);
	text-transform:none;
	letter-spacing:0;
	cursor:pointer;
	user-select:none;
}
/* Галочка-указатель: вниз у раскрытой карточки, вправо у свёрнутой. */
.nwa-rc__card-title::after{
	content:"";
	position:absolute;
	top:50%;
	right:4px;
	width:7px;
	height:7px;
	margin-top:-5px;
	border-right:2px solid var(--rc-dim);
	border-bottom:2px solid var(--rc-dim);
	transform:rotate(45deg);
	transform-origin:center;
	transition:transform .15s ease, border-color .15s ease;
}
.nwa-rc__card-title:hover::after{border-color:var(--rc-orange)}
/* Карточки, которые не сворачиваются: ни стрелки, ни руки на курсоре. */
.nwa-rc__card[data-no-collapse] .nwa-rc__card-title{cursor:default;padding-right:0}
.nwa-rc__card[data-no-collapse] .nwa-rc__card-title::after{display:none}
.nwa-rc__card-title:focus-visible{outline:2px solid var(--rc-orange); outline-offset:2px}
.nwa-rc__card.is-collapsed .nwa-rc__card-title{margin-bottom:0}
.nwa-rc__card.is-collapsed .nwa-rc__card-title::after{
	margin-top:-4px;
	transform:rotate(-45deg);
}
/* Свёрнутая карточка показывает только заголовок. */
.nwa-rc__card.is-collapsed > *:not(.nwa-rc__card-title){display:none}
.nwa-rc__grid{
	display:flex;
	flex-direction:column;
	gap:6px;
}
.nwa-rc__row{
	display:grid;
	grid-template-columns:1fr 132px;
	align-items:center;
	gap:12px;
	margin:0;
	font-weight:400;
}
.nwa-rc__label{
	font-size:13px;
	color:var(--rc-dim);
	line-height:1.3;
}
.nwa-rc__input{
	width:100%;
	min-width:0;
	height:30px;
	padding:4px 9px;
	border:1px solid var(--rc-border);
	border-radius:6px;
	background:var(--rc-input);
	color:var(--rc-text);
	font-family:inherit;
	font-size:13px;
	font-weight:600;
	line-height:1.2;
	transition:border-color .15s ease;
}
.nwa-rc__input:focus{
	outline:none;
	border-color:var(--rc-orange);
}
.nwa-rc__input.is-bad{border-color:var(--rc-danger)}
select.nwa-rc__input{
	appearance:none;
	-webkit-appearance:none;
	padding-right:26px;
	background-image:linear-gradient(45deg,transparent 50%,var(--rc-dim) 50%),linear-gradient(135deg,var(--rc-dim) 50%,transparent 50%);
	/* Стрелка нарисована фоном, её положение считается от верха поля — при
	   смене высоты поля эти два числа пересчитывать. */
	background-position:calc(100% - 14px) 13px, calc(100% - 9px) 13px;
	background-size:5px 5px, 5px 5px;
	background-repeat:no-repeat;
	cursor:pointer;
}
/* Строки с длинными списками: подпись сверху, поле на всю ширину —
   иначе выбранный пункт не помещается и обрезается. */
.nwa-rc__row--wide{
	grid-template-columns:1fr;
	gap:5px;
}

/* ── Карточки стороны реза ─────────────────────────────────────── */
.nwa-rc__cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	margin:8px 0 0;
}
.nwa-rc__side{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	padding:10px 6px 8px;
	border:1px solid var(--rc-border);
	border-radius:8px;
	background:var(--rc-input);
	color:var(--rc-dim);
	font-family:inherit;
	font-size:12px;
	cursor:pointer;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.nwa-rc__side:hover{
	border-color:var(--rc-border-strong);
	background:var(--rc-hover);
	color:var(--rc-text);
}
.nwa-rc__side.is-active{
	border-color:var(--rc-orange);
	color:var(--rc-orange-text);
	background:var(--rc-neutral-soft);
}
.nwa-rc__side-pic{
	width:100%;
	height:40px;
	display:block;
}
.nwa-rc__side-name{font-weight:600}
/* Линия реза на картинках стороны реза: красный пунктир. Цвет задан явно и
   не наследует currentColor — иначе на выбранной карточке рез перекрасился
   бы в оранжевый и перестал отличаться от контура детали.
   ⚠️ stroke-linecap:butt обязателен: круглые концы из общего правила
   затягивают короткие штрихи, и пунктир превращается в сплошную линию. */
.nwa-rc__side-pic .nwa-rc__cut{
	stroke:var(--rc-danger);
	stroke-dasharray:4 3.5;
	stroke-linecap:butt;
}
/* Ноль по Z — вариантов два, а не три. */
.nwa-rc__cards--two{grid-template-columns:repeat(2,1fr)}
/* Фигур пять, и кладём их по три в ряд: в пять столбцов карточка уже
   подписи — «Прямоугольник» вылезал за её край. */
.nwa-rc__cards--five{grid-template-columns:repeat(3,1fr)}
.nwa-rc__cards--five .nwa-rc__side{padding:7px 4px 6px;font-size:11px}
.nwa-rc__cards--five .nwa-rc__side-pic{height:28px}
.nwa-rc__cards--five .nwa-rc__side-name{
	text-align:center;
	line-height:1.2;
	overflow-wrap:anywhere;
}
/* Поля размеров, не относящиеся к выбранной фигуре. Прячем, а не убираем:
   значения остаются в форме и не теряются при переключении. */
.nwa-rc__row.is-hidden,
.nwa-rc__grid.is-hidden{display:none}

/* ── Тумблер ───────────────────────────────────────────────────── */
/* Сам флажок скрыт, но НЕ через display:none: так он остаётся в
   порядке обхода с клавиатуры и читается диктором. Видимую часть
   рисует дорожка, состояние приходит от :checked. */
.nwa-rc__switch{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 2px;
	font-size:13px;
	font-weight:600;
	color:var(--rc-text);
	cursor:pointer;
}
.nwa-rc__switch input{
	position:absolute;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}
.nwa-rc__switch-track{
	position:relative;
	flex:0 0 auto;
	width:38px;
	height:22px;
	border:1px solid var(--rc-border);
	border-radius:11px;
	background:var(--rc-input);
	transition:background .15s ease, border-color .15s ease;
}
.nwa-rc__switch-track::after{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:14px;
	height:14px;
	border-radius:50%;
	background:var(--rc-dim);
	transition:transform .15s ease, background .15s ease;
}
.nwa-rc__switch input:checked + .nwa-rc__switch-track{
	border-color:var(--rc-orange);
	background:var(--rc-orange-soft);
}
.nwa-rc__switch input:checked + .nwa-rc__switch-track::after{
	transform:translateX(16px);
	background:var(--rc-orange);
}
.nwa-rc__switch input:focus-visible + .nwa-rc__switch-track{border-color:var(--rc-orange)}
/* Подпись под карточками: получившиеся числа Z. Скрипт пишет её текстом,
   поэтому пустая (до расчёта) она не должна занимать место. */
.nwa-rc__hint{
	margin:8px 0 0;
	font-size:12px;
	line-height:1.45;
	color:var(--rc-dim);
}
.nwa-rc__hint:empty{display:none}

/* ── Предпросмотр ──────────────────────────────────────────────── */
.nwa-rc__preview{
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}
.nwa-rc__canvas-wrap{
	position:relative;
	border:1px solid var(--rc-border);
	border-radius:10px;
	background:var(--rc-stage);
	overflow:hidden;
}
.nwa-rc__canvas{
	display:block;
	width:100%;
	height:auto;
}
/* Плашка статуса лежит поверх тёмной сцены, поэтому всегда залита цветом
   и белым текстом. Базовый вид синий: это нейтральные сообщения. Состояния
   ниже меняют только цвет; «Параметры изменены» и «расчёт готов» намеренно
   того же синего цвета — плашка меняет текст, не цвет. Красный оставлен
   ошибке: единственное, что должно бросаться в глаза. */
.nwa-rc__status{
	position:absolute;
	left:12px;
	bottom:12px;
	padding:5px 10px;
	border:1px solid var(--rc-blue);
	border-radius:999px;
	background:var(--rc-blue);
	font-size:12px;
	font-weight:600;
	color:#FFFFFF;
	pointer-events:none;
}
.nwa-rc__status--warn,
.nwa-rc__status--ok{
	border-color:var(--rc-blue);
	background:var(--rc-blue);
}
.nwa-rc__status--bad{
	border-color:var(--rc-danger);
	background:var(--rc-danger);
}
.nwa-rc__metrics{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	align-items:stretch;
}
.nwa-rc__metric{
	padding:10px 14px;
	border:1px solid var(--rc-border);
	border-radius:10px;
	background:var(--rc-panel);
	min-width:0;
}
.nwa-rc__metric-label{
	display:block;
	font-size:12px;
	color:var(--rc-dim);
}
.nwa-rc__metric-value{
	display:block;
	margin-top:3px;
	font-size:20px;
	font-weight:700;
	color:var(--rc-text);
	line-height:1.15;
}
.nwa-rc__actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.nwa-rc__act{flex:1 1 200px}
/* Скорость анимации: подпись и селектор в одну строку, ширина по содержимому —
   кнопка рядом должна занимать остаток. */
.nwa-rc__speed{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	flex:0 0 auto;
}
.nwa-rc__speed-label{
	font-size:13px;
	color:var(--rc-dim);
	white-space:nowrap;
}
/* ⚠️ ВЫСОТА СЕЛЕКТОРА — 44px, КАК У КНОПОК, А НЕ 30px, КАК У ПОЛЕЙ ФОРМЫ.
   Он стоит с ними в одном ряду, и обычной высотой поля проваливался бы вниз.
   Стрелка нарисована фоном и считается от ВЕРХА поля, поэтому вместе с высотой
   пересчитаны и эти два числа: 13px для поля 30px, 20px для 44px. */
.nwa-rc__speed-select{
	width:auto;
	min-width:86px;
	height:44px;
	background-position:calc(100% - 14px) 20px, calc(100% - 9px) 20px;
}
.nwa-rc__note{
	margin:0;
	font-size:12px;
	color:var(--rc-dim);
	line-height:1.5;
}
/* Подпись разработчика — подвал всего блока: линия во всю ширину, текст по
   центру. Вид тот же, что у строки в подвале стенда (.nwa-rc-foot): 12px
   обычного веса приглушённым цветом. */
.nwa-rc__sign{
	margin:0;
	padding:12px 14px;
	border-top:1px solid var(--rc-border);
	background:var(--rc-head);
	text-align:center;
	font-size:12px;
	color:var(--rc-dim);
	line-height:1.5;
}

/* ── Кнопки ────────────────────────────────────────────────────── */
.nwa-rc__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	padding:0 22px;
	border:1px solid var(--rc-border);
	border-radius:8px;
	background:var(--rc-input);
	color:var(--rc-text) !important;
	font-family:inherit;
	font-size:14px;
	font-weight:600;
	text-decoration:none !important;
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.nwa-rc__btn:hover{
	border-color:var(--rc-border-strong);
	background:var(--rc-hover);
}
.nwa-rc__btn--primary{
	border-color:var(--rc-orange);
	background:var(--rc-orange);
	color:#FFFFFF !important;
}
.nwa-rc__btn--primary:hover{
	background:var(--rc-orange-hover);
	border-color:var(--rc-orange-hover);
	color:#FFFFFF !important;
}
.nwa-rc__btn[disabled]{
	opacity:.55;
	cursor:not-allowed;
}

/* ── Адаптив ───────────────────────────────────────────────────── */
@media (max-width:991px){
	.nwa-rc__layout{grid-template-columns:1fr}
	.nwa-rc__panel{
		border-right:0;
		border-bottom:1px solid var(--rc-border);
	}
}
@media (max-width:575px){
	.nwa-rc__head{
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}
	.nwa-rc__row{grid-template-columns:1fr 104px;gap:8px}
	.nwa-rc__metrics{grid-template-columns:1fr 1fr}
}

/* ── Страница в обвязке магазина ────────────────────────────────
   Блок инструмента лежит в #content обычной страницы, между панелью
   nwa_topbar.twig и подвалом магазина. Здесь только отступы вокруг: всё
   оформление самого блока выше по файлу.

   Правила намеренно привязаны к body.nwa-page. Класс ставит uni_new_data.php
   по маршруту tool/nwa_rect, и по нему же header.twig подключает панель:
   нет класса — нет ни панели, ни этих отступов, и это видно сразу. */
body.nwa-page .nwa-rc-page{
	padding-top:26px;
	padding-bottom:34px;
}
/* Нижний отступ у блока был рассчитан на соседей внутри .nwa-rc-main прежней
   страницы. Здесь под ним сразу подвал, и разрыв задаёт контейнер выше. */
body.nwa-page .nwa-rc-page .nwa-rc{
	margin-bottom:0;
}
@media (max-width:767px){
	body.nwa-page .nwa-rc-page{
		padding-top:16px;
		padding-bottom:24px;
	}
}

/* ── Только после входа (25.09.2026) ─────────────────────────────
   Гостю вместо формы — приглашение войти; вид — как у «Фасадов»
   (.nwa-fc__guest в nwa-facade.css). */
.nwa-rc__guest{
	margin:6px 0 4px;
	padding:32px 24px;
	border:1px solid var(--rc-border);
	border-radius:12px;
	background:var(--rc-panel);
	text-align:center;
}
.nwa-rc__guest-lead{
	margin:0 0 8px;
	font-size:17px;
	font-weight:700;
	color:var(--rc-text);
}
.nwa-rc__guest-text{
	margin:0 0 20px;
	font-size:14px;
	line-height:1.5;
	color:var(--rc-dim);
}
.nwa-rc__guest-actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
}
.nwa-rc__guest-actions .nwa-rc__btn{min-width:170px}
/* ── Цена файла под кнопками (25.09.2026) ─────────────────────────
   Скачивание: 3 бесплатных в день, дальше баллы (download_quota.php).
   Подсказку под кнопками пишет скрипт (downloadNote): что будет при
   скачивании и что случилось после. Число — жирным, «Пополнить баллы» —
   ссылкой: кнопки в ряду не удлиняются, раскладка на телефоне та же. */
.nwa-rc__note strong{
	color:var(--rc-text);
	font-weight:600;
	white-space:nowrap;
}
.nwa-rc__note a{
	color:var(--rc-orange-text);
	font-weight:600;
	text-decoration:underline;
}
.nwa-rc__note.is-short strong{color:var(--rc-orange-text)}
/* ── Всплывашка над «Скачать .nc» (25.09.2026) ─────────────────────
   «Скачать за N баллов» / «Пополнить баллы» + «Отмена» — только кнопки,
   без текста (владелец). Её ставит скрипт (showDialog) в ряд кнопок и
   сам считает отступы от кнопки «Скачать .nc»; ряду нужен relative. */
.nwa-rc__dlg-host{position:relative}
.nwa-rc__dlg{
	position:absolute;
	z-index:50;
	display:none;
	gap:8px;
	padding:10px;
	border:1px solid var(--rc-border);
	border-radius:12px;
	background:var(--rc-panel);
	box-shadow:0 12px 32px rgba(0,0,0,.28);
	white-space:nowrap;
}
.nwa-rc__dlg.is-open{display:flex}
.nwa-rc__dlg::after{
	content:'';
	position:absolute;
	right:var(--dlg-arrow, 24px);
	bottom:-7px;
	width:12px;
	height:12px;
	background:var(--rc-panel);
	border-right:1px solid var(--rc-border);
	border-bottom:1px solid var(--rc-border);
	transform:rotate(45deg);
}