/* Вход в личный кабинет: слева чёрное поле с сеткой первого экрана и контурным знаком G,
	справа графитовый бланк строками на сетке — как форма заявки */
.cab {
	--line: var(--grid-line-dark);
	--row: 64px;
	--pad: clamp(20px, 2.4vw, 32px);
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
	min-height: 100vh; /* taste-skill-ignore: запасной вариант, ниже 100svh */
	min-height: 100svh;
	overflow-x: clip; /* уголки видоискателя у строк и кнопки выступают за край, когда панель во всю ширину */
	background: var(--c-black);
	color: var(--c-white);
}

/* ---------- Знак ---------- */
.cab__visual {
	position: relative;
	overflow: hidden;
}

.cab__mark {
	--cell: calc(100vw / 12);
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--cell) * 3.4);
	height: auto;
	translate: -50% -40%;
}

/* Объёмный знак: холст в 1,5 раза больше плоского знака, центр совпадает с ним.
	Пока WebGL не готов (или его нет) — виден плоский контурный знак */
.cab__mark3d {
	--cell: calc(100vw / 12);
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--cell) * 3.4 * 1.5);
	aspect-ratio: 1;
	translate: -50% -43.33%;
}

.cab__mark3d canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.cab__visual.is-3d .cab__mark {
	visibility: hidden;
}

.cab__coord {
	position: absolute;
	left: var(--gutter);
	bottom: var(--space-m);
	color: var(--text-muted-dark);
}

/* ---------- Бланк ---------- */
.cab__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--header-top) + var(--header-h) + var(--space-l));
	padding-bottom: var(--space-l);
	border-left: 1px solid var(--line); /* taste-skill-ignore: граница колонки */
	background: var(--c-graphite);
}

.cab__head {
	padding: 0 var(--pad) var(--space-l);
}

.cab__title {
	font-size: var(--fs-h2);
	font-weight: var(--fw-regular);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.cab__lead {
	margin-top: var(--space-s);
	font-size: var(--fs-body);
	line-height: 1.45;
	color: var(--text-muted-dark);
}

.cab__form {
	border-top: 1px solid var(--line); /* taste-skill-ignore: линии строк */
}

.cab__form .calc__row--dark {
	grid-template-columns: var(--label, 132px) minmax(0, 1fr);
	min-height: var(--row);
	padding: 0 var(--pad);
}

/* пароль: подпись, поле и кнопка «Показать» в одной строке */
.cab__form .cab__pass {
	grid-template-columns: var(--label, 132px) minmax(0, 1fr) auto;
	cursor: default;
}

.cab__show {
	padding: 10px 0 10px 12px;
	color: var(--text-muted-dark);
	transition: color var(--dur-fast) var(--ease-out);
}

.cab__show:hover,
.cab__show[aria-pressed="true"] {
	color: var(--c-white);
}

.cab__show:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* «Запомнить меня» и «Забыли пароль?» — строка сетки */
.cab__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--row);
	padding: 0 var(--pad);
	border-bottom: 1px solid var(--line); /* taste-skill-ignore */
}

.cab__remember {
	padding: 0;
}

.cab__forgot {
	font-size: 14px;
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out);
}

.cab__forgot:hover {
	color: var(--accent);
}

/* кнопка — строка сетки целиком */
.cab__submit {
	width: 100%;
	min-height: var(--row);
	font-size: 12px;
}

.cab__msg {
	min-height: 1.45em;
	padding: 14px var(--pad) 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-white);
}

.cab__note {
	padding: var(--space-s) var(--pad) 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-muted-dark);
}

.cab__note a {
	color: var(--c-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cab__note a:hover {
	color: var(--accent);
}

@media (max-width: 900px) {
	.cab { grid-template-columns: 1fr; }
	.cab__visual { min-height: 46vh; }
	/* знак — в середине свободной области под шапкой и целиком в ней */
	.cab__mark,
	.cab__mark3d { top: calc(50% + (var(--header-top) + var(--header-h)) / 2); }
	.cab__mark { width: min(calc(var(--cell) * 5), 30vh); translate: -50% -50%; }
	.cab__mark3d { width: min(calc(var(--cell) * 5 * 1.5), 45vh); translate: -50% -50%; }
	.cab__panel { border-left: 0; border-top: 1px solid var(--line); /* taste-skill-ignore */ padding-top: var(--space-l); }
}

@media (max-width: 640px) {
	.cab__form .calc__row--dark,
	.cab__form .cab__pass { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px var(--pad) 0; }
	.cab__form .calc__row--dark .calc__label { grid-column: 1 / -1; }
}