/**
 * Страница итогов опроса.
 *
 * Диаграммы — обычные блоки с процентной шириной: данные приходят с сервера,
 * поэтому график виден без JavaScript и печатается как есть.
 */

.fcrv-op {
	--op-bd: #e3ecf7;
	--op-bar: var(--c-blue-900, #002f9d);
	--op-bar-2: #4a53b8;
	--op-mark: #17b3a3;
	background: #fff;
}

.fcrv-op__wrap {
	max-width: var(--content-max, 1390px);
	margin-inline: auto;
	padding-inline: var(--gutter, 24px);
}

.fcrv-op__sec { padding: 44px 0; }
.fcrv-op__sec--soft { background: #F5F8FC; }

.fcrv-op .fcrv-sec-h { margin-bottom: 22px; }

/* ------------------------------- разметка ------------------------------- */

.fcrv-op__two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 40px;
	align-items: start;
}
.fcrv-op__two--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.fcrv-op__card {
	margin-top: 22px;
	padding: 26px 28px;
	border-radius: var(--r-md, 20px);
	background: #fff;
	box-shadow: 0 10px 30px rgba(9, 20, 60, .07);
}
.fcrv-op__sec:not(.fcrv-op__sec--soft) .fcrv-op__card { border: 1.5px solid var(--op-bd); box-shadow: none; }

.fcrv-op__h3 {
	margin: 0 0 18px;
	font-family: Montserrat, inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--c-blue-900, #002f9d);
}

.fcrv-op__p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #3d4665; }
.fcrv-op__small { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b95ab; }

.fcrv-op__lbl {
	margin: 20px 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-blue-600, #1456ff);
}
.fcrv-op__lbl:first-child { margin-top: 0; }

.fcrv-op__chart-h {
	margin: 18px 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-blue-900, #002f9d);
}
.fcrv-op__chart-h:first-child { margin-top: 0; }

/* ------------------------------ диаграммы ------------------------------ */

.fcrv-op__bars { display: flex; flex-direction: column; gap: 10px; }

.fcrv-op__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42%;
	align-items: center;
	gap: 6px 12px;
}
.fcrv-op__bar-name { font-size: 13.5px; line-height: 1.35; color: #1F2933; }

.fcrv-op__bar-track {
	grid-column: 2;
	grid-row: 1;
	display: block;
	height: 16px;
	border-radius: 4px;
	background: #eef2f9;
	overflow: hidden;
}
.fcrv-op__bar-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--op-bar), var(--op-bar-2));
}
.fcrv-op__bar.is-mark .fcrv-op__bar-fill { background: linear-gradient(90deg, #0f8f86, var(--op-mark)); }

.fcrv-op__bar-val {
	grid-column: 1 / -1;
	justify-self: end;
	margin-top: -4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-blue-900, #002f9d);
}
.fcrv-op__bar-val i { font-style: normal; font-weight: 400; color: #8b95ab; }

@media (min-width: 721px) {
	/* Колонка чисел фиксированной ширины — полосы во всех строках начинаются с одной линии. */
	.fcrv-op__bar { grid-template-columns: minmax(0, 1fr) 38% 64px; }
	.fcrv-op__bar-track { grid-column: 2; }
	.fcrv-op__bar-val { grid-column: 3; grid-row: 1; justify-self: start; margin-top: 0; white-space: nowrap; }
}

/* Полоса состава: доли в одну линейку. */
.fcrv-op__stack {
	display: flex;
	height: 22px;
	margin-bottom: 14px;
	border-radius: 6px;
	overflow: hidden;
	background: #eef2f9;
}
.fcrv-op__stack-part { display: block; height: 100%; }
.fcrv-op__stack-part:nth-child(1) { background: var(--op-bar); }
.fcrv-op__stack-part:nth-child(2) { background: #6069c9; }
.fcrv-op__stack-part:nth-child(3) { background: var(--c-blue-400, #1284e7); }
.fcrv-op__stack-part:nth-child(4) { background: var(--op-mark); }
.fcrv-op__stack-part:nth-child(5) { background: #b9c3d8; }

.fcrv-op__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fcrv-op__legend li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; color: #3d4665; }
.fcrv-op__legend b { color: var(--c-blue-900, #002f9d); }

/* Кольцо: доля задаётся переменной --share. */
.fcrv-op__donut-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fcrv-op__donut {
	position: relative;
	display: grid;
	place-items: center;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: conic-gradient(var(--op-bar) 0 calc(var(--share, 50) * 1%), #cfe0f5 0);
}
.fcrv-op__donut::after {
	content: "";
	position: absolute;
	inset: 26px;
	border-radius: 50%;
	background: #fff;
}
.fcrv-op__donut span { position: relative; z-index: 1; text-align: center; }
.fcrv-op__donut b { display: block; font-size: 34px; font-weight: 800; color: var(--c-blue-900, #002f9d); }
.fcrv-op__donut i { font-style: normal; font-size: 13px; color: #3d4665; }

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

.fcrv-op__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-bottom: 34px;
	padding: 20px 24px;
	border: 1.5px solid var(--op-bd);
	border-radius: var(--r-md, 20px);
}
.fcrv-op__meta-i i {
	display: block;
	margin-bottom: 5px;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8b95ab;
}
.fcrv-op__meta-i b { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #1F2933; }

.fcrv-op__num { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.fcrv-op__num li { font-size: 14.5px; line-height: 1.5; color: #3d4665; }

.fcrv-op__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fcrv-op__list li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #3d4665;
}
.fcrv-op__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-blue-600, #1456ff);
}

.fcrv-op__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.fcrv-op__term {
	padding: 18px 20px;
	border-radius: var(--r-sm, 12px);
	background: #F5F8FC;
}
.fcrv-op__term b { display: block; margin-bottom: 7px; font-size: 15px; color: var(--c-blue-900, #002f9d); }
.fcrv-op__term span { font-size: 13.5px; line-height: 1.5; color: #3d4665; }

.fcrv-op__rows { display: flex; flex-direction: column; gap: 12px; }
.fcrv-op__row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 8px 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--op-bd);
}
.fcrv-op__row i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--c-blue-900, #002f9d); }
.fcrv-op__row span { font-size: 14px; line-height: 1.5; color: #3d4665; }
.fcrv-op__row--col { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.fcrv-op__row--col i { font-size: 14.5px; }
.fcrv-op__row.is-latent i { color: #b4562f; }

.fcrv-op__steps { display: flex; flex-direction: column; gap: 12px; }
.fcrv-op__step { display: flex; gap: 14px; align-items: flex-start; }
.fcrv-op__step b {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(20, 86, 255, .1);
	color: var(--c-blue-600, #1456ff);
	font-size: 15px;
	font-weight: 800;
}
.fcrv-op__step span { font-size: 14px; line-height: 1.5; color: #3d4665; }
.fcrv-op__step strong { color: #1F2933; }

.fcrv-op__note {
	margin-top: 16px;
	padding: 16px 18px;
	border-left: 3px solid var(--op-mark);
	border-radius: 0 var(--r-sm, 12px) var(--r-sm, 12px) 0;
	background: rgba(23, 179, 163, .08);
	font-size: 14px;
	line-height: 1.55;
	color: #23415c;
}
.fcrv-op__note b { color: #0f6f68; }

.fcrv-op__mark { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.fcrv-op__mark b { flex: none; font-size: 26px; font-weight: 800; color: var(--op-mark); }
.fcrv-op__mark span { font-size: 13.5px; line-height: 1.5; color: #3d4665; }
.fcrv-op__mark--wide { padding: 16px 18px; border-radius: var(--r-sm, 12px); background: #F5F8FC; }
.fcrv-op__mark--wide b { font-size: 32px; color: var(--c-blue-900, #002f9d); }

.fcrv-op__out {
	margin: 18px 0 0;
	padding-left: 16px;
	border-left: 3px solid var(--c-blue-600, #1456ff);
	font-size: 14px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--c-blue-900, #002f9d);
}
.fcrv-op__out--big { margin-top: 24px; font-size: 16.5px; }

/* --------------------------- три категории --------------------------- */

.fcrv-op__roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fcrv-op__role {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 26px;
	border-radius: var(--r-md, 20px);
	background: #fff;
	box-shadow: 0 10px 30px rgba(9, 20, 60, .07);
}
.fcrv-op__role header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--op-bd); }
.fcrv-op__role header b { display: block; font-size: 30px; font-weight: 800; color: var(--c-blue-900, #002f9d); }
.fcrv-op__role header span { font-size: 14px; color: #3d4665; }
.fcrv-op__role .fcrv-op__out { margin-top: auto; padding-top: 4px; }

/* ------------------------------ поток ------------------------------ */

.fcrv-op__flow { display: flex; flex-wrap: wrap; gap: 8px; }
.fcrv-op__flow span {
	position: relative;
	padding: 9px 14px;
	border-radius: var(--r-pill, 9999px);
	background: rgba(20, 86, 255, .08);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-blue-900, #002f9d);
}
.fcrv-op__flow--loop span { background: rgba(23, 179, 163, .12); color: #0f6f68; }

.fcrv-op__formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 18px 20px;
	border: 1.5px dashed #b7c3d6;
	border-radius: var(--r-md, 20px);
}
.fcrv-op__formula span { font-size: 13.5px; line-height: 1.4; color: #3d4665; }
.fcrv-op__formula i { font-style: normal; font-size: 18px; font-weight: 800; color: var(--c-blue-600, #1456ff); }
.fcrv-op__formula .is-res { font-weight: 700; color: var(--c-blue-900, #002f9d); }

/* ------------------------------ таблица ------------------------------ */

.fcrv-op__table-wrap { overflow-x: auto; border-radius: var(--r-md, 20px); background: #fff; }
.fcrv-op__table { width: 100%; border-collapse: collapse; min-width: 720px; }
.fcrv-op__table th,
.fcrv-op__table td {
	padding: 14px 18px;
	text-align: left;
	vertical-align: top;
	font-size: 13.5px;
	line-height: 1.5;
	border-bottom: 1px solid var(--op-bd);
}
.fcrv-op__table th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8b95ab;
	background: #F5F8FC;
}
.fcrv-op__table td { color: #3d4665; }
.fcrv-op__table td b { color: var(--c-blue-900, #002f9d); }
.fcrv-op__table tr:last-child td { border-bottom: 0; }

/* Чередование строк задаём сами: правило темы (table tbody > tr:nth-child(2n+1) > td)
   красит ячейки серым и на телефоне, где таблица разворачивается в карточки. */
.fcrv-op .fcrv-op__table tbody > tr > td { background: transparent; }
.fcrv-op .fcrv-op__table tbody > tr:nth-child(odd) > td { background: #F8FAFD; }

/* ------------------------------ выводы ------------------------------ */

.fcrv-op__concl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.fcrv-op__concl-i { display: flex; gap: 16px; align-items: flex-start; }
.fcrv-op__concl-i b {
	flex: none;
	font-size: 22px;
	font-weight: 800;
	color: rgba(20, 86, 255, .34);
}
.fcrv-op__concl-i strong { display: block; margin-bottom: 4px; font-size: 15px; color: #1F2933; }
.fcrv-op__concl-i span { font-size: 14px; line-height: 1.5; color: #3d4665; }

.fcrv-op__reco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fcrv-op__reco-i {
	padding: 24px 26px;
	border-radius: var(--r-md, 20px);
	background: #fff;
	box-shadow: 0 10px 30px rgba(9, 20, 60, .07);
}
.fcrv-op__reco-i h3 {
	margin: 0 0 14px;
	font-family: Montserrat, inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--c-blue-900, #002f9d);
}

.fcrv-op__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.fcrv-op__cta > div:first-child { max-width: 640px; }

/* ------------------------------ адаптив ------------------------------ */

@media (max-width: 1024px) {
	.fcrv-op__roles,
	.fcrv-op__terms,
	.fcrv-op__meta { grid-template-columns: minmax(0, 1fr); }
	.fcrv-op__two,
	.fcrv-op__two--wide,
	.fcrv-op__concl,
	.fcrv-op__reco { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.fcrv-op__sec { padding: 32px 0; }
	.fcrv-op__card { padding: 20px; }
	.fcrv-op__row { grid-template-columns: minmax(0, 1fr); }
	.fcrv-op__donut { width: 160px; height: 160px; }

	/* Таблица на телефоне разворачивается в карточки: горизонтальная
	   прокрутка в семь строк по три колонки читается плохо. */
	.fcrv-op__table { min-width: 0; }
	.fcrv-op__table thead { display: none; }
	.fcrv-op__table tr {
		display: block;
		margin-bottom: 14px;
		padding: 16px 18px;
		border-radius: var(--r-sm, 12px);
		background: #fff;
		box-shadow: 0 8px 22px rgba(9, 20, 60, .07);
	}
	.fcrv-op__table td { display: block; padding: 0 0 10px; border: 0; }
	.fcrv-op__table td:last-child { padding-bottom: 0; }
	.fcrv-op__table td::before {
		content: attr(data-l);
		display: block;
		margin-bottom: 3px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #8b95ab;
	}
	.fcrv-op__table-wrap { background: transparent; }
	.fcrv-op .fcrv-op__table tbody > tr:nth-child(odd) > td { background: transparent; }
}

/* Углы таблицы: рамки темы (table, th, td { border: 1px solid }) торчали за скругление.
   Рамку рисует обёртка, внутри — только горизонтальные разделители и тонкие вертикальные между колонками. */
.fcrv-op .fcrv-op__table-wrap { border: 1px solid var(--op-bd, #E3ECF7); border-radius: var(--r-md, 20px); overflow: hidden; overflow-x: auto; box-shadow: 0 10px 30px rgba(9, 20, 60, .05); }
.fcrv-op .fcrv-op__table { margin: 0; border: 0; border-collapse: separate; border-spacing: 0; }
.fcrv-op .fcrv-op__table th, .fcrv-op .fcrv-op__table td { border: 0; border-bottom: 1px solid var(--op-bd, #E3ECF7); }
.fcrv-op .fcrv-op__table th + th, .fcrv-op .fcrv-op__table td + td { border-left: 1px solid var(--op-bd, #E3ECF7); }
.fcrv-op .fcrv-op__table tbody > tr:last-child > td { border-bottom: 0; }
.fcrv-op .fcrv-op__table-wrap .fcrv-op__table th, .fcrv-op .fcrv-op__table-wrap .fcrv-op__table td { border-top: 0 !important; border-right: 0 !important; }
@media (max-width: 720px) { .fcrv-op .fcrv-op__table td + td { border-left: 0; } .fcrv-op .fcrv-op__table-wrap { border: 0; box-shadow: none; overflow: visible; } }

/* ---------- Материалы опроса: карточка скачивания ---------- */
.fcrv-op__final { padding-bottom: 72px; }
.fcrv-op__dl {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 28px;
	padding: 30px 34px; overflow: hidden; border: 1px solid #DCE7FB; border-radius: var(--r-lg, 28px);
	background: radial-gradient(circle at 100% 0, rgba(20, 86, 255, .10), transparent 45%), linear-gradient(120deg, #F3F7FF, #fff 70%);
	box-shadow: 0 16px 40px rgba(9, 20, 60, .07);
}
.fcrv-op__dl-ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(150deg, var(--c-blue-900, #002f9d), var(--c-blue-600, #1456ff)); color: #fff; box-shadow: 0 12px 26px rgba(20, 86, 255, .28); }
.fcrv-op__dl-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fcrv-op__dl-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue-600, #1456ff); }
.fcrv-op .fcrv-op__dl-t { margin: 0; font-family: Montserrat, Commissioner, sans-serif; font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.2; color: var(--c-blue-900, #002f9d); }
.fcrv-op__dl-meta { font-size: 13.5px; color: #5b6580; }
.fcrv-op__dl-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.fcrv-op .fcrv-op__dl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; background: linear-gradient(120deg, var(--c-blue-900, #002f9d), var(--c-blue-600, #1456ff)); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none !important; box-shadow: 0 12px 26px rgba(20, 86, 255, .28); transition: transform .2s ease; }
.fcrv-op .fcrv-op__dl-btn:hover { color: #fff; transform: translateY(-2px); }
.fcrv-op .fcrv-op__dl-btn--ghost { background: #fff; color: var(--c-blue-900, #002f9d); border: 1.5px solid #c8d2e8; box-shadow: none; }
.fcrv-op .fcrv-op__dl-btn--ghost:hover { color: var(--c-blue-900, #002f9d); }
@media (max-width: 760px) {
	.fcrv-op__dl { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; }
	.fcrv-op__dl-ico { width: 54px; height: 54px; border-radius: 16px; }
	.fcrv-op__dl-acts { grid-column: 1 / -1; }
	.fcrv-op .fcrv-op__dl-btn { flex: 1 1 100%; justify-content: center; }
}