/* Release 1.7.0: account and profile status center. */
.cs2-account-v2,
.cs2-profile-center {
	width: min(100% - 32px, 1440px);
	margin-inline: auto;
}

.cs2-account-v2__heading,
.cs2-profile-center__hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.cs2-profile-center__hero p:last-child {
	max-width: 760px;
	margin: 8px 0 0;
	color: var(--cs2-text-muted);
}

.cs2-account-v2__grid,
.cs2-profile-center__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-block: 20px;
}

.cs2-account-card {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--cs2-border);
	border-radius: 8px;
	background: var(--cs2-card);
	box-shadow: 0 18px 38px rgb(0 0 0 / 14%);
}

.cs2-account-card--wide,
.cs2-profile-center__history {
	margin-block: 20px;
}

.cs2-account-card__heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.cs2-account-card__heading h2,
.cs2-account-card h2 {
	font-size: clamp(1.25rem, 1.8vw, 1.65rem);
	margin: 0;
}

.cs2-account-card__heading > p,
.cs2-account-card > p {
	color: var(--cs2-text-muted);
}

.cs2-account-inline-form + .cs2-account-inline-form {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--cs2-border);
}

.cs2-account-contacts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.cs2-account-contacts legend {
	grid-column: 1 / -1;
	margin-bottom: 8px;
	font-weight: 700;
}

.cs2-account-connection-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.cs2-account-connection {
	min-width: 0;
	height: 100%;
}

.cs2-account-memberships {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.cs2-account-memberships h3 {
	font-size: 1rem;
}

.cs2-account-memberships a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cs2-border);
	color: var(--cs2-text);
}

.cs2-account-memberships small {
	color: var(--cs2-text-muted);
}

.cs2-profile-center__explain {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-block: 24px;
}

.cs2-profile-center__explain article {
	padding: 18px;
	border-left: 3px solid var(--cs2-border);
	background: var(--cs2-card);
}

.cs2-profile-center__explain article:nth-child(3) {
	border-left-color: var(--cs2-accent);
}

.cs2-profile-center__explain p {
	margin: 8px 0 0;
	color: var(--cs2-text-muted);
}

.cs2-case-list article {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cs2-border);
}

.cs2-case-list article:last-child {
	border-bottom: 0;
}

.cs2-case-list small {
	display: block;
	margin-top: 3px;
	color: var(--cs2-text-muted);
}

@media (max-width: 1024px) {
	.cs2-account-connection-list,
	.cs2-profile-center__explain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.cs2-account-v2,
	.cs2-profile-center {
		width: min(100% - 24px, 1440px);
	}

	.cs2-account-v2__heading,
	.cs2-profile-center__hero {
		align-items: flex-start;
		flex-direction: column;
	}

	.cs2-account-v2__grid,
	.cs2-profile-center__actions,
	.cs2-account-connection-list,
	.cs2-profile-center__explain,
	.cs2-account-memberships,
	.cs2-account-contacts {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs2-account-card {
		padding: 18px;
	}

	.cs2-account-card__heading {
		flex-direction: column;
	}
}