/* PHI name forms: scoped to the personal-details UI and shared name previews. */
.phi-ui-dashboard-screen .phi-ui-dashboard-account-cards--personal-details {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phi-ui-dashboard-screen .phi-ui-dashboard-account-cards--personal-details > .phi-ui-dashboard-account-card--details {
	grid-column: 1 / -1;
}

.phi-ui-name-form {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.phi-ui-name-form .phi-ui-name-form-grid {
	margin: 0;
	min-width: 0;
}

.phi-ui-dashboard-screen .phi-ui-name-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phi-ui-name-form-grid label,
.phi-ui-name-form-grid input,
.phi-ui-name-preview,
.phi-ui-name-conflict,
.phi-ui-public-profile-name {
	min-width: 0;
	max-width: 100%;
}

.phi-ui-name-form-grid input {
	width: 100%;
	box-sizing: border-box;
}

.phi-ui-name-preview output {
	font-weight: 700;
	overflow-wrap: anywhere;
}

[data-phi-name-form] [data-phi-name-conflict][hidden] {
	display: none;
}

.phi-ui-dashboard-screen .phi-ui-name-form p,
.phi-ui-dashboard-screen .phi-ui-public-profile-name,
.phi-ui-dashboard-screen .phi-ui-personal-details-optional {
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.phi-ui-dashboard-screen .phi-ui-name-form-grid label > span {
	font-size: 15px;
}

.phi-ui-name-history-note {
	color: var(--phi-ui-dashboard-muted, var(--phi-ui-color-muted));
}

.phi-ui-public-profile-name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
}

.phi-ui-public-profile-name > strong {
	overflow-wrap: anywhere;
}

@container phi-ui-dashboard-content (max-width: 560px) {
	.phi-ui-dashboard-screen .phi-ui-dashboard-account-cards--personal-details,
	.phi-ui-dashboard-screen .phi-ui-name-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.phi-ui-dashboard-screen .phi-ui-dashboard-account-cards--personal-details,
	.phi-ui-dashboard-screen .phi-ui-name-form-grid {
		grid-template-columns: 1fr;
	}

	.phi-ui-name-form .phi-ui-form-actions,
	.phi-ui-name-form .phi-ui-form-actions .phi-ui-button {
		width: 100%;
	}
}