/* Kudos — give form, leaderboard, My Kudos. Uses the beehive tokens
 * already loaded by cah-tokens/cah-theme. Kept intentionally light;
 * the shared .cah-button / .cah-button-primary classes carry the
 * primary button styling. */

.cah-kudos-give,
.cah-kudos-leaderboard,
.cah-kudos-my {
	margin: 0 0 2rem;
}

/* Stack the give form vertically so the submit button drops below the
 * fields and aligns with their left edge, rather than flowing inline to
 * the right of the (max-width-capped) textarea. */
.cah-kudos-give {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* designer: My Kudos heading display/sm (56px); Give a kudo + Kudos-received
   headings headline/default (40px). */
/* Scoped through the container so these beat the page-shell override
   (.cah-page-shell__content h2:not(.cah-c-headline-sm) {font-size:24px}, 0,2,1). */
body.cah-ep400 .cah-kudos-my .cah-kudos-my__title {
	font-family: var(--font-family-serif);
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -0.01em;
	font-weight: 400;
}
body.cah-ep400 .cah-kudos-give .cah-kudos-give__title,
body.cah-ep400 .cah-kudos-my .cah-kudos-my__subtitle {
	font-family: var(--font-family-sans);
	font-size: 40px;
	line-height: 48px;
	font-weight: 400;
}

/* designer: Send-kudo button is a round #272D33 pill (was the legacy gold
   fill), left-aligned with the form fields. */
.cah-kudos-give__submit {
	margin-top: 1rem;
}
body.cah-ep400 .cah-kudos-give__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	background: #272D33;
	color: #fff;
	border: 1px solid #272D33;
	border-radius: 999px;
	font-weight: 400;
}
body.cah-ep400 .cah-kudos-give__submit:hover,
body.cah-ep400 .cah-kudos-give__submit:focus {
	/* consistent with the site's hover-invert buttons */
	background: transparent;
	color: #272D33;
}

/* designer: leaderboard — display/sm (56px) page title, headline/default
   (40px) "Most recognised" / "Top givers" subtitles. Scoped through the
   container to beat the page-shell heading override (same trick as the
   My Kudos rules above). */
body.cah-ep400 .cah-kudos-leaderboard .cah-kudos-leaderboard__title {
	font-family: var(--font-family-serif);
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -0.01em;
	font-weight: 400;
}
body.cah-ep400 .cah-kudos-leaderboard .cah-kudos-leaderboard__subtitle {
	font-family: var(--font-family-sans);
	font-size: 40px;
	line-height: 48px;
	font-weight: 400;
}
/* designer: 24px between the Estate and Month dropdowns (uniform filter-row
   gap; also spaces the Filter button). */
body.cah-ep400 .cah-kudos-leaderboard__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}
/* designer: consolidate the Filter button with the other CTAs — 44px round
   #272D33 pill, label/sm 14px regular, hover-invert. */
body.cah-ep400 .cah-kudos-leaderboard__filter .cah-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	background: #272D33;
	color: #fff;
	border: 1px solid #272D33;
	border-radius: 999px;
	font-family: var(--font-family-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	cursor: pointer;
}
body.cah-ep400 .cah-kudos-leaderboard__filter .cah-button:hover,
body.cah-ep400 .cah-kudos-leaderboard__filter .cah-button:focus {
	background: transparent;
	color: #272D33;
}

.cah-kudos-give__label {
	display: block;
	margin: 0.75rem 0 0.25rem;
	font-weight: 600;
}

.cah-kudos-give__recipient,
.cah-kudos-give__category,
.cah-kudos-give__message {
	width: 100%;
	max-width: 32rem;
	padding: 0.5rem;
}

.cah-kudos-give__message {
	min-height: 5rem;
}

.cah-kudos-give__status {
	margin-top: 0.5rem;
	min-height: 1.25rem;
}

.cah-kudos-leaderboard__list,
.cah-kudos-my__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cah-kudos-leaderboard__list li {
	display: flex;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cah-kudos-my__item {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cah-kudos-my__message {
	margin: 0 0 0.25rem;
}

.cah-kudos-my__meta {
	display: flex;
	gap: 0.75rem;
	font-size: 0.85rem;
	opacity: 0.8;
}