/* components/cabinet-learn.css — метрики обучения: кольца, KPI, темы.
 * Карточки «Мой персонал» и страница сотрудника.
 */

.cabinet-learn__empty {
	margin: 0;
	padding: 0.25rem 1.2rem 1.1rem;
	color: var( --muted );
	font-size: 0.88rem;
	line-height: 1.45;
}

.cabinet-learn--card .cabinet-learn__empty {
	padding: 0.35rem 0.15rem 0.15rem;
	font-size: 0.78rem;
}

.cabinet-learn--panel {
	margin: 0;
	padding: 0 1.2rem 1.25rem;
}

.cabinet-learn--card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	flex: 1 1 auto;
	gap: 0.55rem;
	margin: 0;
	padding: 0.65rem 0 0;
	border-top: 0;
	text-align: center;
}

/* —— Кольцо прогресса —— */
.cabinet-learn__ring {
	display: block;
	width: var( --ring-size, 72px );
	height: var( --ring-size, 72px );
	flex: 0 0 auto;
}

.cabinet-learn__ring svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cabinet-learn__ring-track {
	stroke: color-mix( in srgb, var( --ink ) 10%, transparent );
}

.cabinet-learn__ring-value {
	stroke: color-mix( in srgb, var( --ink ) 28%, transparent );
	transition: stroke-dashoffset 420ms ease;
}

.cabinet-learn__ring.is-ok .cabinet-learn__ring-value {
	stroke: #2f9e57;
}

.cabinet-learn__ring.is-bad .cabinet-learn__ring-value {
	stroke: var( --accent-rose );
}

.cabinet-learn__ring.is-mid .cabinet-learn__ring-value {
	stroke: color-mix( in srgb, var( --primary-bg ) 82%, #c45a18 );
}

.cabinet-learn__ring.is-muted .cabinet-learn__ring-value {
	stroke: color-mix( in srgb, var( --ink ) 22%, transparent );
}

.cabinet-learn__ring-box {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cabinet-learn__ring-box .cabinet-learn__ring {
	grid-area: 1 / 1;
}

.cabinet-learn__ring-label {
	grid-area: 1 / 1;
	display: grid;
	gap: 0.05rem;
	justify-items: center;
	z-index: 1;
	pointer-events: none;
}

.cabinet-learn__ring-num {
	color: var( --ink );
	font-family: var( --font-display );
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.cabinet-learn__mark {
	grid-area: 1 / 1;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	pointer-events: none;
	color: #2f9e57;
}

.cabinet-learn__mark.is-bad {
	color: var( --accent-rose );
}

.cabinet-learn__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}
	color: var( --muted );
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

/* —— Герой —— */
.cabinet-learn__hero {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 0.95rem 1.05rem;
	align-items: center;
}

.cabinet-learn__hero-copy {
	display: grid;
	gap: 0.22rem;
	min-width: 0;
}

.cabinet-learn__kicker {
	color: var( --muted );
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cabinet-learn__theme-name {
	color: var( --ink );
	font-family: var( --font-display );
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.cabinet-learn__theme-name.is-muted {
	color: var( --muted );
	font-family: inherit;
	font-weight: 500;
}

.cabinet-learn__hero-meta {
	color: var( --muted );
	font-size: 0.78rem;
	line-height: 1.4;
}

/* —— KPI —— */
.cabinet-learn__stats {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.45rem;
}

.cabinet-learn__stat {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	padding: 0.55rem 0.55rem 0.5rem;
	border: 1px solid color-mix( in srgb, var( --ink ) 8%, transparent );
	border-radius: 14px;
	background: color-mix( in srgb, var( --ink ) 3.5%, var( --surface ) );
}

.cabinet-learn__stat .cabinet-learn__ring {
	flex: 0 0 auto;
}

.cabinet-learn__stat-copy {
	display: grid;
	gap: 0.08rem;
	min-width: 0;
}

.cabinet-learn__stat-num {
	color: var( --ink );
	font-family: var( --font-display );
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: break-word;
}

.cabinet-learn__stat-cap {
	color: var( --muted );
	font-size: 0.66rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-wrap: balance;
}

.cabinet-learn__stat.is-ok {
	background: color-mix( in srgb, #2f9e57 10%, var( --surface ) );
	border-color: color-mix( in srgb, #2f9e57 22%, transparent );
}

.cabinet-learn__stat.is-ok .cabinet-learn__stat-num {
	color: color-mix( in srgb, #1a7a3a 78%, var( --ink ) );
}

.cabinet-learn__stat.is-bad {
	background: color-mix( in srgb, var( --accent-rose ) 9%, var( --surface ) );
	border-color: color-mix( in srgb, var( --accent-rose ) 22%, transparent );
}

.cabinet-learn__stat.is-bad .cabinet-learn__stat-num {
	color: var( --accent-rose );
}

.cabinet-learn__stat.is-exam .cabinet-learn__stat-num {
	font-size: 0.78rem;
	font-weight: 750;
}

.cabinet-learn__stat.is-idle .cabinet-learn__stat-num,
.cabinet-learn__stat.is-muted.is-exam .cabinet-learn__stat-num {
	color: var( --muted );
	font-weight: 700;
}

/* —— Темы —— */
.cabinet-learn__sub {
	margin: 0.15rem 0 0;
	color: var( --muted );
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cabinet-learn__quizzes {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabinet-learn__quiz {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	gap: 0.55rem 0.7rem;
	align-items: center;
	padding: 0.45rem 0.55rem;
	border: 1px solid color-mix( in srgb, var( --ink ) 8%, transparent );
	border-radius: 12px;
	background: color-mix( in srgb, var( --surface ) 88%, transparent );
}

.cabinet-learn__quiz-copy {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.cabinet-learn__quiz-name {
	min-width: 0;
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.cabinet-learn__quiz-meta {
	color: var( --muted );
	font-size: 0.72rem;
	line-height: 1.3;
}

.cabinet-learn__quiz.is-ok .cabinet-learn__quiz-meta {
	color: color-mix( in srgb, #1a7a3a 62%, var( --ink ) );
}

.cabinet-learn__quiz.is-bad .cabinet-learn__quiz-meta {
	color: var( --accent-rose );
}

.cabinet-learn__pill {
	flex: 0 0 auto;
	padding: 0.18rem 0.48rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --ink ) 7%, transparent );
	color: var( --ink );
	font-family: var( --font-display );
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.cabinet-learn__pill.is-ok {
	background: color-mix( in srgb, #2f9e57 16%, transparent );
	color: color-mix( in srgb, #1a7a3a 72%, var( --ink ) );
}

.cabinet-learn__pill.is-bad {
	background: color-mix( in srgb, var( --accent-rose ) 14%, transparent );
	color: var( --accent-rose );
}

.cabinet-learn__quiz.is-empty {
	display: block;
	padding: 0.7rem 0.2rem 0.2rem;
	border: 0;
	background: none;
	color: var( --muted );
	font-size: 0.86rem;
	font-weight: 400;
}

/* —— Пайплайн тем (только профиль сотрудника) —— */
.cabinet-learn-rail {
	--mark: 1.55rem;
	--pad-top: 0.35rem;
	--pad-bot: 0.5rem;
	--rail-inset: 0.05rem;
	--rail-gap: 0.12rem;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabinet-learn-rail__step {
	position: relative;
	display: grid;
	grid-template-columns: var( --mark ) minmax( 0, 1fr );
	gap: 0.65rem;
	align-items: start;
	padding: var( --pad-top ) var( --rail-inset ) var( --pad-bot );
}

.cabinet-learn-rail__step:not( :last-child )::before {
	content: "";
	position: absolute;
	left: calc( var( --rail-inset ) + var( --mark ) / 2 );
	top: calc( var( --pad-top ) + var( --mark ) + var( --rail-gap ) );
	bottom: calc( -1 * var( --pad-top ) + var( --rail-gap ) );
	z-index: 1;
	width: 3px;
	border-radius: 999px;
	background: linear-gradient( 180deg, #e07070 0%, #c44848 55%, #a63a3a 100% );
	box-shadow: 0 0 10px color-mix( in srgb, #c44848 42%, transparent );
	transform: translateX( -50% );
	pointer-events: none;
}

.cabinet-learn-rail__step.is-open:not( :last-child )::before {
	background: linear-gradient( 180deg, #5ee08a 0%, #3dcf6a 50%, #2bb85a 100% );
	box-shadow: 0 0 10px color-mix( in srgb, #3dcf6a 48%, transparent );
}

.cabinet-learn-rail__step.is-open:has( + .is-locked )::before {
	background: linear-gradient(
		180deg,
		#5ee08a 0%,
		#3dcf6a 28%,
		#d4b04a 58%,
		#c44848 82%,
		#a63a3a 100%
	);
	box-shadow: 0 0 10px color-mix( in srgb, #d4b04a 40%, transparent );
}

.cabinet-learn-rail__mark {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var( --mark );
	height: var( --mark );
	border: 1.5px solid #3dcf6a;
	border-radius: 999px;
	background: var( --surface );
	box-shadow: 0 0 0 3px var( --surface );
	color: #2ea85a;
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1;
}

.cabinet-learn-rail__step.is-locked .cabinet-learn-rail__mark {
	border-color: #c44848;
	color: #c44848;
}

.cabinet-learn-rail__step.is-passed .cabinet-learn-rail__mark {
	background: color-mix( in srgb, #3dcf6a 14%, var( --surface ) );
	color: #1a7f37;
}

.cabinet-learn-rail__step.is-current .cabinet-learn-rail__mark {
	box-shadow: 0 0 0 3px var( --surface ), 0 0 0 5px color-mix( in srgb, var( --primary-bg ) 35%, transparent );
}

.cabinet-learn-rail__lock {
	display: block;
	width: 0.78rem;
	height: 0.78rem;
}

.cabinet-learn-rail__copy {
	display: grid;
	gap: 0.12rem;
	min-width: 0;
	padding-top: 0.12rem;
}

.cabinet-learn-rail__name {
	color: var( --ink );
	font-size: 0.86rem;
	font-weight: 650;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.cabinet-learn-rail__step.is-locked .cabinet-learn-rail__name {
	color: var( --muted );
}

.cabinet-learn-rail__status {
	color: var( --muted );
	font-size: 0.72rem;
	line-height: 1.3;
}

.cabinet-learn-rail__empty {
	margin: 0;
	color: var( --muted );
	font-size: 0.82rem;
	line-height: 1.4;
}

.cabinet-learn--card .cabinet-learn-rail,
.cabinet-learn--card .cabinet-learn__sub,
.cabinet-learn--card .cabinet-learn__quizzes {
	display: none;
}

.cabinet-learn--card .cabinet-learn__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.cabinet-learn--card .cabinet-learn__ring-box .cabinet-learn__ring {
	--ring-size: 48px;
}

.cabinet-learn--card .cabinet-learn__ring-num {
	font-size: 0.82rem;
	font-weight: 700;
}

.cabinet-learn--card .cabinet-learn__hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 0;
	padding: 0 0.15rem;
}

.cabinet-learn--card .cabinet-learn__kicker {
	margin: 0;
	color: var( --muted );
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.cabinet-learn--card .cabinet-learn__theme-name {
	margin: 0;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.35;
}

.cabinet-learn--card .cabinet-learn__hero-meta {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.3;
}

.cabinet-learn--card .cabinet-learn__stats {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0;
	padding: 0.55rem 0;
	border-top: 1px solid color-mix( in srgb, var( --ink ) 8%, transparent );
	border-bottom: 1px solid color-mix( in srgb, var( --ink ) 8%, transparent );
}

.cabinet-learn--card .cabinet-learn__stat {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.1rem 0.1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
}

.cabinet-learn--card .cabinet-learn__stat .cabinet-learn__ring {
	display: block;
	flex: 0 0 auto;
	margin: 0 auto;
}

.cabinet-learn--card .cabinet-learn__stat .cabinet-learn__ring-box {
	width: 32px;
	height: 32px;
	margin: 0 auto;
}

.cabinet-learn--card .cabinet-learn__stat-copy {
	display: grid;
	grid-template-rows: 1.35em auto;
	align-items: center;
	justify-items: center;
	gap: 0.15rem;
	width: 100%;
	min-width: 0;
}

.cabinet-learn--card .cabinet-learn__stat-num {
	grid-row: 1;
	min-height: 1.35em;
}

.cabinet-learn--card .cabinet-learn__stat-cap {
	grid-row: 2;
}

.cabinet-learn--card .cabinet-learn__stat-num,
.cabinet-learn--card .cabinet-learn__stat-cap {
	display: block;
	margin: 0;
	width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

.cabinet-learn--card .cabinet-learn__stat-num,
.cabinet-learn--card .cabinet-learn__stat.is-exam .cabinet-learn__stat-num {
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.cabinet-learn--card .cabinet-learn__stat-cap {
	font-size: 0.62rem;
	font-weight: 400;
	line-height: 1.2;
	max-width: 7.2em;
}

/* —— История прохождения —— */
.cabinet-learn-history {
	display: grid;
	gap: 0.45rem;
	margin: 0 0 0.85rem;
	padding: 0.75rem 0.85rem 0.85rem;
	border: 1px solid color-mix( in srgb, var( --ink ) 10%, transparent );
	border-radius: 14px;
	background: color-mix( in srgb, var( --surface ) 92%, transparent );
}

.cabinet-learn-history:last-child {
	margin-bottom: 0;
}

.cabinet-learn-history__title {
	margin: 0 0 0.15rem;
	font-family: var( --font-display );
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
}

.cabinet-learn-history__row {
	display: grid;
	grid-template-columns: minmax( 7.5rem, 9.5rem ) minmax( 0, 1fr );
	gap: 0.35rem 0.75rem;
	align-items: baseline;
}

.cabinet-learn-history__label {
	color: var( --muted );
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.35;
}

.cabinet-learn-history__value {
	font-size: 0.88rem;
	font-weight: 650;
	line-height: 1.35;
}

.cabinet-learn-history__value.is-ok {
	color: var( --ok, #1a7f4b );
}

.cabinet-learn-history__value.is-bad {
	color: var( --accent-rose, #b42318 );
}

.cabinet-learn-history__value.is-mid,
.cabinet-learn-history__value.is-idle {
	color: var( --ink );
}

.cabinet-learn-history .cabinet-learn__sub {
	margin-top: 0.35rem;
}

@media ( max-width: 40rem ) {
	.cabinet-learn__stats {
		grid-template-columns: 1fr;
	}

	.cabinet-learn--card .cabinet-learn__stats {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.cabinet-learn__quiz {
		grid-template-columns: auto minmax( 0, 1fr );
	}

	.cabinet-learn__pill {
		grid-column: 2;
		justify-self: start;
	}

	.cabinet-learn-history__row {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0.1rem;
	}
}