/* ============================================================
   ZB RANK BARS — рейтинг горизонтальными полосами.
   Переиспользуемый компонент: одни файлы обслуживают все
   размещения, инстанс задаётся атрибутом data-zb-branch.

   Компоненты пишутся с префиксом .zb-rank-bars (0,2,0):
   этого хватает, чтобы перебить .entry-content p темы и
   собственный сброс из zb-common.css.
   ============================================================ */

.zb-rank-bars .zb-rank-bars__head {
	margin-bottom: 16px;
}

.zb-rank-bars .zb-rank-bars__head .zb-lead {
	margin-top: 8px;
}

/* ---------- Переключатель срезов ---------- */

.zb-rank-bars .zb-rank-bars__switch {
	margin-bottom: 20px;
}

.zb-rank-bars .zb-rank-bars__switch:empty {
	display: none;
}

/* ---------- Список ---------- */

.zb-rank-bars .zb-rank-bars__list {
	display: block;
}

.zb-rank-bars .zb-rank-bars__row {
	display: grid;
	grid-template-columns: 26px 1fr auto;
	align-items: baseline;
	gap: 4px 10px;
	padding: 10px 0;
	will-change: transform;
}

.zb-rank-bars .zb-rank-bars__pos {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--zb-font-mono);
	font-weight: 500;
	font-size: 13px;
	color: var(--zb-muted);
	font-variant-numeric: tabular-nums;
}

.zb-rank-bars .zb-rank-bars__name {
	grid-column: 2;
	grid-row: 1;
	font-size: 15px;
	line-height: 1.25;
	color: var(--zb-ink);
}

.zb-rank-bars .zb-rank-bars__mark {
	font-size: 12px;
	color: var(--zb-muted);
	cursor: help;
}

.zb-rank-bars .zb-rank-bars__value {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	font-family: var(--zb-font-mono);
	font-weight: 500;
	font-size: 15px;
	color: var(--zb-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zb-rank-bars .zb-rank-bars__track {
	grid-column: 2 / -1;
	grid-row: 2;
	height: 10px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.zb-rank-bars .zb-rank-bars__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	transition: width 300ms ease;
}

.zb-rank-bars .zb-rank-bars__meta {
	grid-column: 2 / -1;
	grid-row: 3;
	font-size: 12px;
	line-height: 1.3;
	color: var(--zb-muted);
}

.zb-rank-bars .zb-rank-bars__meta:empty {
	display: none;
}

/* ---------- Подписи под рейтингом ---------- */

.zb-rank-bars .zb-rank-bars__caption {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--zb-border);
	font-size: 15px;
	line-height: 1.45;
	color: var(--zb-ink);
}

.zb-rank-bars .zb-rank-bars__transition {
	margin-top: 8px;
	font-size: 14px;
	color: var(--zb-accent);
}

.zb-rank-bars .zb-rank-bars__transition:empty {
	display: none;
}

.zb-rank-bars .zb-rank-bars__legend {
	margin-top: 12px;
	font-size: 13px;
	color: var(--zb-muted);
}

.zb-rank-bars .zb-rank-bars__legend:empty {
	display: none;
}

.zb-rank-bars .zb-rank-bars__note {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--zb-border);
	border-radius: var(--zb-radius);
	background: #FFFFFF;
	font-size: 13px;
	line-height: 1.45;
	color: var(--zb-body);
}

/* ---------- Справка под блоком ---------- */

.zb-rank-bars .zb-rank-bars__aside-item + .zb-rank-bars__aside-item {
	margin-top: 10px;
}

.zb-rank-bars .zb-rank-bars__aside-name {
	color: var(--zb-ink);
}

.zb-rank-bars .zb-rank-bars__aside-group + .zb-rank-bars__aside-group {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--zb-border);
}

/* ---------- Мобильная вёрстка ---------- */

@media (max-width: 640px) {
	.zb-rank-bars .zb-rank-bars__row {
		grid-template-columns: 22px 1fr;
	}

	.zb-rank-bars .zb-rank-bars__name {
		grid-column: 2;
		grid-row: 1;
	}

	.zb-rank-bars .zb-rank-bars__value {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		font-size: 14px;
	}

	.zb-rank-bars .zb-rank-bars__track {
		grid-row: 3;
	}

	.zb-rank-bars .zb-rank-bars__meta {
		grid-row: 4;
	}
}

/* ---------- Настройки движения ---------- */

@media (prefers-reduced-motion: reduce) {
	.zb-rank-bars .zb-rank-bars__fill {
		transition: none;
	}
}