/**
 * Thallo — raid progression section.
 *
 * Same trim decision as the social section: stone hairline, venom accent, no
 * gold. Difficulty is the one place a second hue earns its keep — mythic,
 * heroic and normal have to be distinguishable at a glance, and that is
 * semantic colour, not decoration.
 */

.thallo-progress {
	--thp-edge: rgba(146, 186, 168, 0.16);
	--thp-rim: inset 0 1px 0 rgba(223, 239, 232, 0.06);
	--thp-accent: var(--th-venom, #21d6a3);
	--thp-accent-soft: #9fe8cf;
	--thp-mythic: #c56bff;   /* the one non-jungle hue, reserved for mythic */
	--thp-heroic: #21d6a3;
	--thp-normal: #7fa694;
	--thp-radius: 12px;

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

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

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

.thallo-progress__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-progress__identity {
	margin: 0;
	color: var(--thp-accent-soft);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------- cards */

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

.thallo-progress__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--thp-edge);
	border-radius: var(--thp-radius);
	background: linear-gradient(180deg, var(--th-stone-2, #142219), var(--th-stone, #0f1a15));
	box-shadow: var(--thp-rim);
	list-style: none;
	overflow: hidden;
}

/* Difficulty stripe down the left edge — the card's state at a glance. */
.thallo-progress__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--thp-normal);
}

.thallo-progress__card--heroic::before { background: var(--thp-heroic); }
.thallo-progress__card--mythic::before { background: var(--thp-mythic); }

.thallo-progress__raid {
	margin: 0;
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--th-bone, #eef5f0);
	text-wrap: balance;
}

.thallo-progress__summary {
	margin: 0;
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--thp-heroic);
}

.thallo-progress__card--mythic .thallo-progress__summary { color: var(--thp-mythic); }
.thallo-progress__card--normal .thallo-progress__summary { color: var(--thp-normal); }

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

.thallo-progress__bar {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(7, 11, 9, 0.8);
	overflow: hidden;
}

.thallo-progress__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--thp-normal);
}

.thallo-progress__card--heroic .thallo-progress__bar > span {
	background: linear-gradient(90deg, var(--thp-heroic), var(--thp-accent-soft));
}

.thallo-progress__card--mythic .thallo-progress__bar > span {
	background: linear-gradient(90deg, var(--thp-mythic), #e3b6ff);
}

/* ------------------------------------------------------------------ rank */

.thallo-progress__rank {
	margin: 0;
	font-size: 0.82rem;
	color: var(--th-lichen, #a8bfb2);
}

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

.thallo-progress__rank span {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.72rem;
	opacity: 0.75;
}

.thallo-progress__rank--none {
	opacity: 0.55;
	font-style: italic;
}

/* ---------------------------------------------------------------- footer */

.thallo-progress__crawled {
	margin: 1rem 0 0;
	font-size: 0.78rem;
	color: var(--th-lichen, #a8bfb2);
}

.thallo-progress__crawled a {
	color: var(--thp-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(33, 214, 163, 0.35);
}

.thallo-progress__crawled a:hover,
.thallo-progress__crawled a:focus-visible {
	border-bottom-color: var(--thp-accent);
}