/* Уровни и ранги ER.IIIBA.RU (Ranks.php, docs/LEVELS.md): бейдж у ника, строка уровня в шапке профиля,
 * карточка уровня с кольцом прогресса, шкала рангов, список «Все ранги».
 * Цвета рангов — фирменные цвета системы (допустимое исключение из «никаких жёстких цветов»), две палитры:
 * светлая — тёмные тона (контраст текста ≥ 4.5:1 на белом), тёмная — светлые. Ranks::$ranks повторяет их для мест без CSS. */

:root {
	--rk-1: #475569; --rk-1b: #64748b;
	--rk-2: #15803d; --rk-2b: #4d7c0f;
	--rk-3: #0f766e; --rk-3b: #0e7490;
	--rk-4: #0369a1; --rk-4b: #2563eb;
	--rk-5: #4338ca; --rk-5b: #6d28d9;
	--rk-6: #7c3aed; --rk-6b: #9333ea;
	--rk-7: #a21caf; --rk-7b: #db2777;
	--rk-8: #be123c; --rk-8b: #dc2626;
	--rk-9: #c2410c; --rk-9b: #d97706;
	--rk-10: #a16207; --rk-10b: #ca8a04;
	--rk-ink: #ffffff;
	--rk-gold: #fcd34d;
	--rk-night: #221a0f;
}
:root[data-theme="dark"] {
	--rk-1: #94a3b8; --rk-1b: #cbd5e1;
	--rk-2: #4ade80; --rk-2b: #a3e635;
	--rk-3: #2dd4bf; --rk-3b: #22d3ee;
	--rk-4: #38bdf8; --rk-4b: #60a5fa;
	--rk-5: #818cf8; --rk-5b: #a78bfa;
	--rk-6: #a78bfa; --rk-6b: #c084fc;
	--rk-7: #e879f9; --rk-7b: #f472b6;
	--rk-8: #fb7185; --rk-8b: #f87171;
	--rk-9: #fb923c; --rk-9b: #fbbf24;
	--rk-10: #fcd34d; --rk-10b: #fde68a;
	--rk-ink: #101114;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--rk-1: #94a3b8; --rk-1b: #cbd5e1;
		--rk-2: #4ade80; --rk-2b: #a3e635;
		--rk-3: #2dd4bf; --rk-3b: #22d3ee;
		--rk-4: #38bdf8; --rk-4b: #60a5fa;
		--rk-5: #818cf8; --rk-5b: #a78bfa;
		--rk-6: #a78bfa; --rk-6b: #c084fc;
		--rk-7: #e879f9; --rk-7b: #f472b6;
		--rk-8: #fb7185; --rk-8b: #f87171;
		--rk-9: #fb923c; --rk-9b: #fbbf24;
		--rk-10: #fcd34d; --rk-10b: #fde68a;
		--rk-ink: #101114;
	}
}
[data-rank="1"]  { --rk: var(--rk-1);  --rk2: var(--rk-1b); }
[data-rank="2"]  { --rk: var(--rk-2);  --rk2: var(--rk-2b); }
[data-rank="3"]  { --rk: var(--rk-3);  --rk2: var(--rk-3b); }
[data-rank="4"]  { --rk: var(--rk-4);  --rk2: var(--rk-4b); }
[data-rank="5"]  { --rk: var(--rk-5);  --rk2: var(--rk-5b); }
[data-rank="6"]  { --rk: var(--rk-6);  --rk2: var(--rk-6b); }
[data-rank="7"]  { --rk: var(--rk-7);  --rk2: var(--rk-7b); }
[data-rank="8"]  { --rk: var(--rk-8);  --rk2: var(--rk-8b); }
[data-rank="9"]  { --rk: var(--rk-9);  --rk2: var(--rk-9b); }
[data-rank="10"] { --rk: var(--rk-10); --rk2: var(--rk-10b); }

.nf-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ плитка ранга: иконка на градиенте */
.nf-rk-tile {
	display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; box-sizing: border-box;
	border-radius: var(--radius); color: var(--rk-ink);
	background: linear-gradient(135deg, var(--rk, var(--rk-1)) 0%, var(--rk2, var(--rk-1b)) 100%);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 14%, transparent);
}
.nf-rk-tile svg { stroke-width: 2; }
/* Магистр {site}: золото на «ночном» тоне в обеих темах */
.nf-rk-tile[data-rank="10"], [data-rank="10"] > .nf-rank-ico {
	color: var(--rk-gold);
	background: linear-gradient(135deg, #3a2a12 0%, var(--rk-night) 60%, #3b2a10 100%);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rk-gold) 55%, transparent);
}

/* ------------------------------------------------------------ бейдж у ника: [иконка] 17 · Переписчик */
.nf-rank {
	position: relative; display: inline-flex; align-items: center; flex: none; min-width: 0; max-width: 100%;
	height: 20px; box-sizing: border-box; overflow: hidden; vertical-align: middle;
	border: 1px solid color-mix(in oklab, var(--rk, var(--rk-1)) 34%, transparent); border-radius: var(--radius);
	background: color-mix(in oklab, var(--rk, var(--rk-1)) 7%, transparent); color: var(--rk, var(--rk-1));
	font: 700 11.5px/1 var(--font-sans); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: default;
}
.nf-rank-ico {
	display: grid; place-items: center; flex: none; align-self: stretch; width: 18px;
	color: var(--rk-ink); background: linear-gradient(135deg, var(--rk, var(--rk-1)), var(--rk2, var(--rk-1b)));
}
.nf-rank-ico svg { width: 12px; height: 12px; stroke-width: 2.3; }
.nf-rank-lv { padding: 0 6px 0 5px; font-variant-numeric: tabular-nums; }
.nf-rank-u { margin-right: 3px; font-weight: 600; opacity: .8; }
.nf-rank-name {
	min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 7px 0 0; font-weight: 600;
	color: color-mix(in oklab, var(--rk, var(--rk-1)) 62%, var(--foreground));
}
.nf-rank-name::before {
	content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 6px 0 0; vertical-align: 3px;
	border-radius: 50%; background: currentColor; opacity: .55;
}
/* название ранга — только на широких экранах (или всегда с .is-named); иначе читается экранным диктором и видно в подсказке */
.nf-rank:not(.is-named):not(.nf-rank-lg) .nf-rank-name {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
}
@media (min-width: 1100px) {
	/* та же специфичность, что у правила выше, — выигрывает порядком */
	.nf-rank:not(.is-compact):not(.nf-rank-lg) .nf-rank-name {
		position: static; width: auto; height: auto; margin: 0; padding: 0 7px 0 0; overflow: hidden; clip: auto;
	}
}
.nf-rank[data-rank="8"], .nf-rank[data-rank="9"] { box-shadow: 0 0 0 1px color-mix(in oklab, var(--rk) 10%, transparent); }
.nf-rank[data-rank="10"] {
	border-color: color-mix(in oklab, var(--rk-gold) 60%, var(--rk));
	background: linear-gradient(90deg, color-mix(in oklab, var(--rk) 16%, transparent), color-mix(in oklab, var(--rk) 4%, transparent));
	box-shadow: 0 0 10px color-mix(in oklab, var(--rk) 26%, transparent);
}

/* крупный: шапка профиля */
.nf-rank-lg { height: 30px; font-size: 13.5px; }
.nf-rank-lg .nf-rank-ico { width: 30px; }
.nf-rank-lg .nf-rank-ico svg { width: 16px; height: 16px; stroke-width: 2; }
.nf-rank-lg .nf-rank-lv { padding: 0 8px 0 9px; }
.nf-rank-lg .nf-rank-name { padding-right: 10px; font-size: 13px; }
.nf-rank-lg .nf-rank-name::before { margin-right: 8px; }

/* места, где бейдж стоит рядом с именем */
.nb-d-meta .nf-rank, .c-head .nf-rank, .nb-rv-head .who .nf-rank, .dc-note .head .nf-rank { max-width: 60%; }
.comment .meta .nf-rank, .comment .info .nf-rank { margin: 0 4px; }
.nb-mini-card .t .nf-rank, .nb-feed-item .h .nf-rank { margin-left: 2px; }

/* ------------------------------------------------------------ строка уровня в шапке профиля */
.nf-rank-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.nf-rank-next {
	display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px;
	color: var(--muted-foreground); text-decoration: none; font-variant-numeric: tabular-nums;
}
.nf-rank-next:hover { color: var(--foreground); }
.nf-rank-next b { color: var(--foreground); font-weight: 650; }
.nf-mini-ring {
	--p: 0; flex: none; width: 18px; height: 18px; border-radius: 50%;
	background: conic-gradient(var(--rk, var(--rk-1)) calc(var(--p) * 1%), color-mix(in oklab, var(--rk, var(--rk-1)) 16%, var(--muted)) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}

/* ------------------------------------------------------------ строка уровня в меню пользователя (шапка сайта, //ranks/_menu) */
.nb-dropdown a.nf-rank-menu { gap: 10px; margin: 0 0 2px; padding: 8px 10px; }
.nf-rank-menu .nf-rk-tile { width: 30px; height: 30px; }
.nf-rank-menu .t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; line-height: 1.2; }
.nf-rank-menu .t b {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 13px; font-weight: 650; color: color-mix(in oklab, var(--rk) 78%, var(--foreground));
}
.nf-rank-menu .t small { font-size: 11.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nf-rank-menu .nf-mini-ring { margin-left: auto; }

/* ------------------------------------------------------------ карточка уровня (профиль → «Достижения») */
.nf-rk-card {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 28px; align-items: center;
	padding: 24px 26px 18px; overflow: hidden; scroll-margin-top: 80px;
}
.nf-rk-card::before {
	content: ""; position: absolute; top: -140px; left: -120px; width: 420px; height: 420px; pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--rk) 16%, transparent), transparent);
}
.nf-rk-card > * { position: relative; }

.nf-rk-ring { --p: 0; position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.nf-rk-ring::before, .nf-rk-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.nf-rk-ring::before {
	background: conic-gradient(from 0deg, var(--rk2) 0%, var(--rk) calc(var(--p) * 1%), color-mix(in oklab, var(--rk) 13%, var(--muted)) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10.5px));
}
/* деления: 20 рисок по внутреннему краю */
.nf-rk-ring::after {
	inset: 15px;
	background: repeating-conic-gradient(color-mix(in oklab, var(--foreground) 22%, transparent) 0 1.2deg, transparent 1.2deg 18deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
	opacity: .7;
}
.nf-rk-ring-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.nf-rk-ring-in small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.nf-rk-ring-in b { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; color: var(--rk); font-variant-numeric: tabular-nums; }
.nf-rk-ring-in span { font-size: 11px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.nf-rk-main { min-width: 0; }
.nf-rk-main .nb-eyebrow { margin: 0 0 6px; }
.nf-rk-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--rk); }
.nf-rk-title .nf-rk-tile { width: 36px; height: 36px; }
.nf-rk-descr { margin: 8px 0 0; font-size: 13.5px; color: var(--muted-foreground); }
.nf-rk-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 0; }
.nf-rk-stats > div { min-width: 0; }
.nf-rk-stats dt { margin: 0 0 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.nf-rk-stats dd { margin: 0; font-size: 19px; font-weight: 750; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nf-rk-stats dd small { font-size: 12.5px; font-weight: 550; color: var(--muted-foreground); }

/* шкала рангов: 10 плиток на линии, пройденные — в своих цветах, текущая крупнее */
.nf-rk-scale {
	--fill: 0; grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
	margin: 6px 0 0; padding: 0; list-style: none;
}
.nf-rk-scale::before, .nf-rk-scale::after {
	content: ""; position: absolute; top: 18px; left: 5%; height: 2px; margin-top: -1px; border-radius: 1px;
}
.nf-rk-scale::before { right: 5%; background: var(--border); }
.nf-rk-scale::after { width: calc(var(--fill) * 0.9%); background: linear-gradient(90deg, var(--rk-1), var(--rk)); }
.nf-rk-scale li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.nf-rk-scale .nf-rk-tile { width: 28px; height: 28px; margin-top: 4px; transition: transform .15s ease; }
.nf-rk-scale li.is-future .nf-rk-tile {
	color: var(--muted-foreground); background: var(--card-solid); box-shadow: inset 0 0 0 1px var(--border);
}
.nf-rk-scale li.is-current .nf-rk-tile {
	width: 36px; height: 36px; margin-top: 0;
	outline: 2px solid var(--rk); outline-offset: 2px;
	box-shadow: 0 4px 16px -4px color-mix(in oklab, var(--rk) 60%, transparent);
}
.nf-rk-scale small { font-size: 11px; line-height: 1; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.nf-rk-scale li.is-current small { color: var(--rk); font-weight: 750; }
.nf-rk-scale li:hover .nf-rk-tile { transform: translateY(-1px); }

.nf-rk-foot {
	grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
	padding-top: 14px; border-top: 1px solid var(--border);
}
.nf-rk-foot .nf-rk-note { font-size: 12.5px; color: var(--muted-foreground); }
.nf-rk-foot .nb-spacer { flex: 1; }

/* «Все ранги» */
.nf-rk-all { grid-column: 1 / -1; margin: -6px 0 0; }
.nf-rk-all > summary {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; list-style: none;
	font-size: 13px; font-weight: 650; color: var(--foreground);
}
.nf-rk-all > summary::-webkit-details-marker { display: none; }
.nf-rk-all > summary svg { transition: transform .15s ease; color: var(--muted-foreground); }
.nf-rk-all[open] > summary svg { transform: rotate(180deg); }
.nf-rk-all > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nf-rk-list { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.nf-rk-list li {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center;
	padding: 10px 14px; background: var(--card-solid);
}
.nf-rk-list li + li { border-top: 1px solid var(--border); }
.nf-rk-list .b { min-width: 0; }
.nf-rk-list .b b { display: block; font-size: 14px; color: var(--foreground); }
.nf-rk-list .b > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-foreground); }
.nf-rk-list .lv, .nf-rk-list .pt { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.nf-rk-list .pt { min-width: 110px; }
.nf-rk-list li.is-future .nf-rk-tile { color: var(--muted-foreground); background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.nf-rk-list li.is-current { background: color-mix(in oklab, var(--rk) 9%, var(--card-solid)); box-shadow: inset 3px 0 0 var(--rk); }
.nf-rk-list li.is-current .b b { color: var(--rk); }
.nf-rk-you {
	display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: var(--radius-sm); vertical-align: 1px;
	background: var(--rk); color: var(--rk-ink); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
[data-rank="10"] .nf-rk-you { background: var(--rk-night); color: var(--rk-gold); }

@media (max-width: 640px) {
	.nf-rk-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; padding: 20px 16px 14px; text-align: center; }
	.nf-rk-main { justify-self: stretch; }
	.nf-rk-title { justify-content: center; font-size: 22px; }
	.nf-rk-stats { justify-content: center; gap: 10px 22px; }
	.nf-rk-stats dd { font-size: 17px; }
	.nf-rk-scale { justify-self: stretch; }
	.nf-rk-scale .nf-rk-tile { width: 24px; height: 24px; margin-top: 5px; }
	.nf-rk-scale .nf-rk-tile svg { width: 13px; height: 13px; }
	.nf-rk-scale li.is-current .nf-rk-tile { width: 32px; height: 32px; margin-top: 1px; outline-offset: 1px; }
	.nf-rk-scale::before, .nf-rk-scale::after { top: 17px; }
	.nf-rk-foot { justify-self: stretch; justify-content: center; }
	.nf-rk-foot .nb-spacer { display: none; }
	.nf-rk-all { justify-self: stretch; text-align: left; }
	.nf-rk-all > summary { width: 100%; justify-content: center; }
	/* плитка слева на две строки, справа — название с описанием, под ними «уровни 20–26 · с 3 610 очков» */
	.nf-rk-list li { grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; padding: 10px 12px; }
	.nf-rk-list li > .nf-rk-tile { grid-row: 1 / span 2; align-self: start; margin-right: 4px; }
	.nf-rk-list .b { grid-column: 2 / -1; }
	.nf-rk-list .lv, .nf-rk-list .pt { grid-row: 2; min-width: 0; text-align: left; }
	.nf-rk-list .lv { grid-column: 2; }
	.nf-rk-list .pt { grid-column: 3; }
	.nf-rk-list .pt::before { content: "·"; margin-right: 8px; }
}