/**
 * Thallo — guild roster summary.
 *
 * Trim follows the other sections: stone hairline, venom accent, no gold.
 * The exception is class colour, which comes from the game itself — players
 * read those hues faster than they read the class name, so they are data,
 * not decoration, and they override the palette wherever a class is named.
 */

.thallo-roster {
	--thr-edge: rgba(146, 186, 168, 0.16);
	--thr-rim: inset 0 1px 0 rgba(223, 239, 232, 0.06);
	--thr-accent: var(--th-venom, #21d6a3);
	--thr-accent-soft: #9fe8cf;
	--thr-radius: 12px;

	margin: 3rem auto;
	max-width: 1180px;
	color: var(--th-bone, #eef5f0);
}

/* ------------------------------------------------------------------ head */

.thallo-roster__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin-bottom: 1.5rem;
}

.thallo-roster__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--th-bone, #eef5f0);
}

.thallo-roster__identity {
	margin: 0;
	color: var(--thr-accent-soft);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------- stats */

.thallo-roster__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.thallo-roster__stat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--thr-edge);
	border-radius: var(--thr-radius);
	background: linear-gradient(180deg, var(--th-stone-2, #142219), var(--th-stone, #0f1a15));
	box-shadow: var(--thr-rim);
}

.thallo-roster__figure {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--thr-accent);
}

.thallo-roster__caption {
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--th-lichen, #a8bfb2);
}

/* ------------------------------------------------------------- class bar */

.thallo-roster__bar {
	display: flex;
	height: 12px;
	margin-bottom: 1rem;
	border: 1px solid var(--thr-edge);
	border-radius: 999px;
	background: rgba(7, 11, 9, 0.8);
	overflow: hidden;
}

.thallo-roster__bar > span {
	display: block;
	height: 100%;
	/* No gap: the segments together are the whole population. */
}

.thallo-roster__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.thallo-roster__legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.82rem;
	color: var(--th-lichen, #a8bfb2);
}

.thallo-roster__legend strong {
	color: var(--th-bone, #eef5f0);
	font-variant-numeric: tabular-nums;
}

.thallo-roster__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------- people */

.thallo-roster__people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.thallo-roster__person {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--thr-edge);
	border-radius: 10px;
	background: var(--th-stone, #0f1a15);
	list-style: none;
}

.thallo-roster__name {
	font-weight: 600;
	letter-spacing: 0.03em;
	/* Colour is inline, from the class map. */
}

.thallo-roster__meta {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--th-lichen, #a8bfb2);
}