.phr-authors-box__heading {
	margin: 0 0 12px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a8fa3;
}

/* Shared avatar shell — real photo (<img>) or the generic icon fallback (<span><svg>) */
.phr-authors-box__avatar {
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: inline-flex;
	overflow: hidden;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.phr-authors-box__avatar--icon {
	color: #004af5; /* default circle color for styles that don't expose this as a setting (Card icon fallback) */
}

.phr-authors-box__avatar--icon svg {
	width: 100%;
	height: 100%;
}

.phr-authors-box__name,
.phr-authors-badge__name,
.phr-authors-inline__name,
.phr-authors-card__name,
.phr-authors-text__name {
	transition: opacity 0.15s ease;
}

.phr-authors-box__name:hover,
.phr-authors-badge__name:hover,
.phr-authors-inline__name:hover,
.phr-authors-card__name:hover,
.phr-authors-text__name:hover {
	text-decoration: underline;
	opacity: 0.85;
}

/* ==========================================================================
   Style 1: List — wrapped in a soft card so it reads as a designed
   component, not bare floating text
   ========================================================================== */

.phr-authors-box--list .phr-authors-box__avatar--md {
	width: var(--phr-list-avatar-size, 38px);
	height: var(--phr-list-avatar-size, 38px);
}

.phr-authors-box__list {
	list-style: none;
	margin: 0;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #f8f9fb;
	border: 1px solid #edeff3;
	border-radius: 12px;
}

.phr-authors-box__author {
	display: flex;
	align-items: center;
	gap: var(--phr-list-avatar-gap, 10px);
	padding: 6px;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.phr-authors-box__author:hover {
	background: rgba(0, 74, 245, 0.06);
}

.phr-authors-box__info {
	display: flex;
	flex-direction: column;
}

.phr-authors-box__name {
	display: inline-block;
	text-decoration: none;
	color: var(--phr-list-name-color, #1a1a1a);
	font-size: var(--phr-list-name-font-size, 14px);
	font-weight: var(--phr-list-name-font-weight, 600);
	letter-spacing: var(--phr-list-name-letter-spacing, 0px);
	margin: var(--phr-list-name-margin, 0px) 0 0 0;
	padding: var(--phr-list-name-padding, 0px);
}

.phr-authors-box__role {
	display: block;
	color: var(--phr-list-role-color, #6b7280);
	font-size: var(--phr-list-role-font-size, 13px);
	font-weight: var(--phr-list-role-font-weight, 400);
	letter-spacing: var(--phr-list-role-letter-spacing, 0px);
	margin: var(--phr-list-role-margin, 0px) 0 0 0;
	padding: var(--phr-list-role-padding, 0px);
}

/* ==========================================================================
   Style 2: Badge — matches the reference design's icon+text layout, kept
   deliberately light (no card wrapper); role gets a soft pill for polish
   ========================================================================== */

.phr-authors-box--badge .phr-authors-box__avatar--md {
	width: var(--phr-badge-avatar-size, 38px);
	height: var(--phr-badge-avatar-size, 38px);
	box-shadow: none;
}

.phr-authors-box--badge .phr-authors-box__avatar--icon {
	color: var(--phr-badge-avatar-bg, #004af5);
}

.phr-authors-badge {
	display: flex;
	align-items: center;
	gap: var(--phr-badge-avatar-gap, 6px);
	margin-bottom: 10px;
	padding: 4px;
	border-radius: 10px;
	transition: background-color 0.15s ease;
}

.phr-authors-badge:hover {
	background: rgba(0, 74, 245, 0.05);
}

.phr-authors-badge:last-child {
	margin-bottom: 0;
}

.phr-authors-badge__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.phr-authors-badge__name {
	display: inline-block;
	text-decoration: none;
	color: var(--phr-badge-name-color, #0c1b3d);
	font-size: var(--phr-badge-name-font-size, 15px);
	font-weight: var(--phr-badge-name-font-weight, 700);
	letter-spacing: var(--phr-badge-name-letter-spacing, 0px);
	margin: var(--phr-badge-name-margin, 0px) 0 0 0;
	padding: var(--phr-badge-name-padding, 0px);
}

.phr-authors-badge__role {
	display: block;
	color: var(--phr-badge-role-color, #4a5565);
	font-size: var(--phr-badge-role-font-size, 13px);
	font-weight: var(--phr-badge-role-font-weight, 400);
	letter-spacing: var(--phr-badge-role-letter-spacing, 0px);
	margin: var(--phr-badge-role-margin, 0px) 0 0 0;
	padding: var(--phr-badge-role-padding, 0px);
}

/* ==========================================================================
   Style 3: Inline — each author as a rounded chip/tag
   ========================================================================== */

.phr-authors-box--inline .phr-authors-box__avatar--sm {
	width: var(--phr-inline-avatar-size, 24px);
	height: var(--phr-inline-avatar-size, 24px);
}

.phr-authors-box--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.phr-authors-inline {
	display: inline-flex;
	align-items: center;
	gap: var(--phr-inline-avatar-gap, 6px);
	background: #f8f9fb;
	border: 1px solid #edeff3;
	border-radius: 999px;
	padding: 4px 12px 4px 4px;
	transition: box-shadow 0.15s ease;
}

.phr-authors-inline:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.phr-authors-inline__name {
	display: inline-block;
	text-decoration: none;
	color: var(--phr-inline-name-color, #1a1a1a);
	font-size: var(--phr-inline-name-font-size, 14px);
	font-weight: var(--phr-inline-name-font-weight, 600);
	letter-spacing: var(--phr-inline-name-letter-spacing, 0px);
	margin: var(--phr-inline-name-margin, 0px) 0 0 0;
	padding: var(--phr-inline-name-padding, 0px);
}

.phr-authors-inline__role {
	display: inline-block;
	color: var(--phr-inline-role-color, #6b7280);
	font-size: var(--phr-inline-role-font-size, 14px);
	font-weight: var(--phr-inline-role-font-weight, 400);
	letter-spacing: var(--phr-inline-role-letter-spacing, 0px);
	margin: var(--phr-inline-role-margin, 0px) 0 0 0;
	padding: var(--phr-inline-role-padding, 0px);
}

.phr-authors-inline__role::before {
	content: "· ";
}

/* ==========================================================================
   Style 4: Card
   ========================================================================== */

.phr-authors-box--card .phr-authors-box__avatar--lg {
	width: var(--phr-card-avatar-size, 56px);
	height: var(--phr-card-avatar-size, 56px);
}

.phr-authors-card-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.phr-authors-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 22px 20px;
	border: 1px solid var(--phr-card-border-color, #eeeeee);
	background: var(--phr-card-bg-color, #ffffff);
	border-radius: 12px;
	min-width: 130px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.phr-authors-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.18);
}

.phr-authors-card__name {
	display: inline-block;
	text-decoration: none;
	color: var(--phr-card-name-color, #1a1a1a);
	font-size: var(--phr-card-name-font-size, 14px);
	font-weight: var(--phr-card-name-font-weight, 600);
	letter-spacing: var(--phr-card-name-letter-spacing, 0px);
	margin: var(--phr-card-name-margin, 10px) 0 0 0;
	padding: var(--phr-card-name-padding, 0px);
}

.phr-authors-card__role {
	display: block;
	color: var(--phr-card-role-color, #6b7280);
	font-size: var(--phr-card-role-font-size, 13px);
	font-weight: var(--phr-card-role-font-weight, 400);
	letter-spacing: var(--phr-card-role-letter-spacing, 0px);
	margin: var(--phr-card-role-margin, 4px) 0 0 0;
	padding: var(--phr-card-role-padding, 0px);
}

/* ==========================================================================
   Style 5: Text only — deliberately minimal
   ========================================================================== */

.phr-authors-box--text {
	font-size: 0.9rem;
	line-height: 1.6;
}

.phr-authors-text__name {
	color: var(--phr-text-name-color, #1a1a1a);
	font-size: var(--phr-text-name-font-size, 14px);
	font-weight: var(--phr-text-name-font-weight, 600);
	letter-spacing: var(--phr-text-name-letter-spacing, 0px);
	margin: var(--phr-text-name-margin, 0px) 0 0 0;
	padding: var(--phr-text-name-padding, 0px);
}

.phr-authors-text__role {
	color: var(--phr-text-role-color, #6b7280);
	font-size: var(--phr-text-role-font-size, 14px);
	font-weight: var(--phr-text-role-font-weight, 400);
	letter-spacing: var(--phr-text-role-letter-spacing, 0px);
	margin: var(--phr-text-role-margin, 0px) 0 0 4px;
	padding: var(--phr-text-role-padding, 0px);
}