/* TEAMSITE: /join «Набор в команду» (views/join/index.php). Основа — guide.css (gd-hero, gd-cards, gd-bottom). */
.jn .gd-crumbs { margin-bottom: 14px; }
.jn-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.jn-status-note { color: var(--muted-foreground); font-size: 13.5px; }

.jn-hero-art { position: relative; min-height: 220px; display: grid; place-content: center; gap: 12px; justify-items: center; }
.jn-hero-art::before {
	content: ""; position: absolute; inset: 8% 12%; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--translator) 18%, transparent), transparent);
}
.jn-bubble {
	position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
	background: var(--card-solid, var(--card)); border: 1px solid var(--border); box-shadow: var(--elev-1); font-weight: 650; font-size: 14px;
	transform: translateX(calc((var(--i) - 1.5) * 18px));
}
.jn-bubble svg { color: var(--translator); }

.jn-note { margin-top: 24px; font-size: 15px; line-height: 1.6; }
.jn-note p { margin: 0 0 10px; }
.jn-note p:last-child { margin-bottom: 0; }

.jn-roles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.jn-roles .gd-card { box-shadow: none; }
.jn-roles .gd-card:hover { transform: none; border-color: var(--border); }

.jn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.jn-cols > .nb-card, .jn-cols > .nb-card + .nb-card { margin: 0; }
.jn-cols h2 { font-size: 19px; margin: 0 0 12px; }
.jn-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.jn-list li { display: flex; gap: 8px; align-items: flex-start; }
.jn-list li svg { flex: none; margin-top: 3px; color: var(--success); }
.jn-muted { color: var(--muted-foreground); font-size: 13.5px; margin: 10px 0 0; }
.jn-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; counter-reset: jn; }
.jn-steps li { counter-increment: jn; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
.jn-steps li::before {
	content: counter(jn); grid-row: span 2; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
	background: var(--primary); color: var(--primary-foreground); font-weight: 750; font-size: 12.5px;
}
.jn-steps b { font-size: 14.5px; }
.jn-steps span { color: var(--muted-foreground); font-size: 13.5px; line-height: 1.45; }

@media (max-width: 980px) {
	.jn-hero-art { display: none; }
	.jn-cols { grid-template-columns: minmax(0, 1fr); }
}