/**
 * Points & Rewards > Dashboard
 *
 * Uses the same colours as the Settings page (admin-settings.css)
 * and the shared admin header. The Points Activity chart is styled by
 * admin-reports.css.
 */

.spar-dashboard-page {
	--spar-dash-accent: #667eea;
	--spar-dash-accent-2: #5146c1;
	--spar-dash-accent-soft: #eef0fd;
	--spar-dash-brand: linear-gradient( 135deg, #667eea, #764ba2 );
	--spar-dash-ink: #1b1d33;
	--spar-dash-text: #3a3d56;
	--spar-dash-muted: #646985;
	--spar-dash-faint: #858aa3;
	--spar-dash-line: #e4e6f0;
	--spar-dash-line-2: #eef0f6;
	--spar-dash-tint: #f8f9fd;
	--spar-dash-green: #0a7c3a;
	--spar-dash-green-soft: #e6f6ee;
	--spar-dash-red: #b12727;
	--spar-dash-red-soft: #fdeeee;
	--spar-dash-amber: #9a6200;
	--spar-dash-amber-soft: #fff4e0;
	--spar-dash-blue: #0b63b6;
	--spar-dash-blue-soft: #e8f2ff;
	--spar-dash-radius: 14px;
	--spar-dash-shadow: 0 1px 2px rgba( 27, 29, 51, 0.04 ), 0 1px 1px rgba( 27, 29, 51, 0.02 );
	--spar-dash-shadow-hover: 0 6px 18px rgba( 27, 29, 51, 0.08 );
}

/* Centred in the page once the screen is wider than the dashboard's maximum width. */
.spar-dash {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
	padding-bottom: 24px;
	color: var( --spar-dash-text );
}

.spar-dash a {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.spar-dash a:focus-visible,
.spar-dash button:focus-visible {
	outline: 2px solid var( --spar-dash-accent );
	outline-offset: 2px;
	box-shadow: none;
}

.spar-dash h2,
.spar-dash h3,
.spar-dash h4 {
	color: var( --spar-dash-ink );
}

/* Shared parts */

.spar-dash-card {
	min-width: 0;
	padding: 20px;
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: var( --spar-dash-radius );
	box-shadow: var( --spar-dash-shadow );
}

.spar-dash-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.spar-dash .spar-dash-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.spar-dash-card__note {
	font-size: 12px;
	font-weight: 500;
	color: var( --spar-dash-faint );
}

.spar-dash-card__intro {
	margin: 4px 0 0;
	color: var( --spar-dash-muted );
}

.spar-dash-card__foot {
	margin: 14px 0 0;
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var( --spar-dash-accent-2 );
	text-decoration: none;
}

.spar-dash-link:hover,
.spar-dash-link:focus {
	color: var( --spar-dash-ink );
}

.spar-dash-link .fa-arrow-right {
	font-size: 11px;
}

.spar-dash .spar-dash-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px;
	line-height: 1.2;
	border-radius: 8px;
	white-space: nowrap;
}

.spar-dash .spar-dash-button .fa-solid {
	font-size: 12px;
}

.spar-dash .button-primary.spar-dash-button {
	background: var( --spar-dash-accent-2 );
	border-color: var( --spar-dash-accent-2 );
}

.spar-dash .button-primary.spar-dash-button:hover,
.spar-dash .button-primary.spar-dash-button:focus {
	background: #4237ad;
	border-color: #4237ad;
}

.spar-dash-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.spar-dash .spar-dash-section-title {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
}

.spar-dash-grid {
	display: grid;
	gap: 20px;
	align-items: start;
}

.spar-dash-grid--main {
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
}

.spar-dash-grid--thirds {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.spar-dash-grid--halves {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.spar-dash-grid--main > .spar-dash-card,
.spar-dash-grid--thirds > .spar-dash-card,
.spar-dash-grid--halves > .spar-dash-card {
	align-self: stretch;
}

.spar-dash-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.spar-dash-empty {
	margin: 0;
	padding: 24px 12px;
	text-align: center;
	color: var( --spar-dash-muted );
}

.spar-dash-empty--action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.spar-dash-empty--action p {
	max-width: 32em;
	margin: 0;
}

.spar-dash-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-accent-soft );
	border-radius: 12px;
}

.spar-dash-status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 999px;
}

.spar-dash-status__dot {
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 50%;
}

.spar-dash-status.is-on {
	color: var( --spar-dash-green );
	background: var( --spar-dash-green-soft );
}

.spar-dash-status.is-off {
	color: var( --spar-dash-muted );
	background: var( --spar-dash-line-2 );
}

.spar-dash-status.is-off .spar-dash-status__dot {
	background: #b4b8cc;
}

.spar-dash-status.is-pro {
	color: #fff;
	background: var( --spar-dash-brand );
}

.spar-dash-status.is-pro .fa-lock {
	font-size: 10px;
}

.spar-dash-status.is-get {
	color: #116a5a;
	background: #e2f5f0;
}

.spar-dash-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	border-radius: 50%;
}

.spar-dash-avatar.is-c0 { background: #667eea; }
.spar-dash-avatar.is-c1 { background: #0f9d76; }
.spar-dash-avatar.is-c2 { background: #d9822b; }
.spar-dash-avatar.is-c3 { background: #c2417a; }
.spar-dash-avatar.is-c4 { background: #2b8ad9; }
.spar-dash-avatar.is-c5 { background: #7a52c7; }

.spar-dash-avatar.is-anon {
	font-size: 13px;
	color: var( --spar-dash-faint );
	background: var( --spar-dash-line-2 );
}

.spar-dash-points {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border-radius: 999px;
}

.spar-dash-points.is-add {
	color: var( --spar-dash-green );
	background: var( --spar-dash-green-soft );
}

.spar-dash-points.is-remove {
	color: var( --spar-dash-red );
	background: var( --spar-dash-red-soft );
}

/* Welcome */

.spar-dash-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 22px 24px;
	background:
		radial-gradient( circle at 100% 0%, rgba( 118, 75, 162, 0.08 ), transparent 45% ),
		linear-gradient( 135deg, #fff 0%, #f6f7ff 100% );
	border: 1px solid var( --spar-dash-line );
	border-radius: var( --spar-dash-radius );
	box-shadow: var( --spar-dash-shadow );
}

.spar-dash-hero__text {
	min-width: 0;
}

.spar-dash .spar-dash-hero__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.spar-dash-hero__lead {
	margin: 4px 0 0;
	font-size: 14px;
	color: var( --spar-dash-muted );
}

.spar-dash-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.spar-dash-hero__facts li {
	margin: 0;
}

.spar-dash-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --spar-dash-text );
	text-decoration: none;
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: 999px;
}

a.spar-dash-pill:hover,
a.spar-dash-pill:focus {
	color: var( --spar-dash-ink );
	border-color: #c9cde0;
}

.spar-dash-pill .fa-solid {
	font-size: 11px;
	color: var( --spar-dash-accent );
}

.spar-dash-pill__dot {
	position: relative;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
}

.spar-dash-pill.is-live {
	color: var( --spar-dash-green );
	background: var( --spar-dash-green-soft );
	border-color: transparent;
}

.spar-dash-pill.is-live .spar-dash-pill__dot::after {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	border-radius: 50%;
	animation: spar-dash-pulse 2s ease-out infinite;
}

.spar-dash-pill.is-off {
	color: var( --spar-dash-amber );
	background: var( --spar-dash-amber-soft );
	border-color: transparent;
}

.spar-dash-pill.is-pro,
.spar-dash-pill.is-upgrade {
	color: #fff;
	background: var( --spar-dash-brand );
	border-color: transparent;
}

.spar-dash-pill.is-pro .fa-solid,
.spar-dash-pill.is-upgrade .fa-solid {
	color: #ffd66b;
}

a.spar-dash-pill.is-upgrade:hover,
a.spar-dash-pill.is-upgrade:focus {
	color: #fff;
	box-shadow: 0 4px 12px rgba( 102, 126, 234, 0.35 );
}

@keyframes spar-dash-pulse {
	from {
		opacity: 0.6;
		transform: scale( 1 );
	}

	to {
		opacity: 0;
		transform: scale( 2.6 );
	}
}

.spar-dash-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Setup checklist */

.spar-dash-checklist__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 24px;
}

.spar-dash-progress {
	height: 8px;
	margin: 16px 0 6px;
	overflow: hidden;
	background: var( --spar-dash-line-2 );
	border-radius: 999px;
}

.spar-dash-progress__bar {
	display: block;
	height: 100%;
	background: var( --spar-dash-brand );
	border-radius: inherit;
}

.spar-dash-checklist__items {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-check__mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 6px;
	color: #c6c9da;
	border: 2px solid #d9dcea;
	border-radius: 50%;
	box-sizing: border-box;
}

.spar-dash-check.is-done .spar-dash-check__mark {
	font-size: 11px;
	color: #fff;
	background: var( --spar-dash-green );
	border-color: var( --spar-dash-green );
}

.spar-dash-check__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-check__label {
	font-weight: 600;
	color: var( --spar-dash-ink );
}

.spar-dash-check.is-done .spar-dash-check__label {
	color: var( --spar-dash-muted );
	text-decoration: line-through;
	text-decoration-color: #b4b8cc;
}

.spar-dash-check__optional {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 500;
	color: var( --spar-dash-muted );
	text-decoration: none;
	vertical-align: 1px;
	background: var( --spar-dash-line-2 );
	border-radius: 999px;
}

.spar-dash-check__desc {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash .spar-dash-check__action {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 12px;
	font-size: 12px;
}

/* Date range */

.spar-dash-range {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	background: var( --spar-dash-line-2 );
	border-radius: 10px;
}

.spar-dash-range__option {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var( --spar-dash-muted );
	text-decoration: none;
	border-radius: 8px;
}

.spar-dash-range__option:hover,
.spar-dash-range__option:focus {
	color: var( --spar-dash-ink );
}

.spar-dash-range__option.is-current {
	font-weight: 600;
	color: var( --spar-dash-ink );
	background: #fff;
	box-shadow: 0 1px 3px rgba( 27, 29, 51, 0.12 );
}

/* Headline figures */

.spar-dash-kpis {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
}

.spar-dash-kpi {
	--spar-dash-kpi-color: var( --spar-dash-accent );
	--spar-dash-kpi-soft: var( --spar-dash-accent-soft );
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 18px 20px 58px;
	overflow: hidden;
	color: var( --spar-dash-text );
	text-decoration: none;
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: var( --spar-dash-radius );
	box-shadow: var( --spar-dash-shadow );
}

.spar-dash-kpi:hover,
.spar-dash-kpi:focus {
	color: var( --spar-dash-text );
	border-color: #d3d6e6;
	box-shadow: var( --spar-dash-shadow-hover );
	transform: translateY( -1px );
}

.spar-dash-kpi.is-earned {
	--spar-dash-kpi-color: var( --spar-dash-green );
	--spar-dash-kpi-soft: var( --spar-dash-green-soft );
}

.spar-dash-kpi.is-redeemed {
	--spar-dash-kpi-color: var( --spar-dash-accent-2 );
	--spar-dash-kpi-soft: var( --spar-dash-accent-soft );
}

.spar-dash-kpi.is-members {
	--spar-dash-kpi-color: var( --spar-dash-blue );
	--spar-dash-kpi-soft: var( --spar-dash-blue-soft );
}

.spar-dash-kpi.is-new_members {
	--spar-dash-kpi-color: var( --spar-dash-amber );
	--spar-dash-kpi-soft: var( --spar-dash-amber-soft );
}

.spar-dash-kpi__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.spar-dash-kpi__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	color: var( --spar-dash-kpi-color );
	background: var( --spar-dash-kpi-soft );
	border-radius: 10px;
}

.spar-dash-kpi__label {
	font-size: 13px;
	font-weight: 600;
	color: var( --spar-dash-muted );
}

.spar-dash-kpi__value {
	margin-top: 4px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --spar-dash-ink );
	font-variant-numeric: tabular-nums;
}

.spar-dash-kpi__change {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	font-size: 12px;
}

.spar-dash-kpi__change strong {
	font-weight: 700;
}

.spar-dash-kpi__change .fa-solid {
	font-size: 10px;
}

.spar-dash-kpi__change.is-up {
	color: var( --spar-dash-green );
}

.spar-dash-kpi__change.is-down {
	color: var( --spar-dash-red );
}

.spar-dash-kpi__change.is-flat {
	color: var( --spar-dash-faint );
}

.spar-dash-kpi__compare {
	font-weight: 400;
	color: var( --spar-dash-faint );
}

.spar-dash-kpi__sub {
	font-size: 12px;
	color: var( --spar-dash-muted );
}

.spar-dash-kpi:not( :has( .spar-dash-spark ) ) {
	padding-bottom: 18px;
}

.spar-dash-spark {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 44px;
	color: var( --spar-dash-kpi-color );
	pointer-events: none;
}

.spar-dash-spark__area {
	fill: currentColor;
	opacity: 0.09;
}

.spar-dash-spark__line {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Points activity and flow */

.spar-dash-trend .spar-chart-legend {
	padding: 0;
}

.spar-dash-trend .spar-chart-empty {
	padding: 64px 0;
}

.spar-dash-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var( --spar-dash-line-2 );
	border-radius: 9px;
}

.spar-dash .spar-dash-tabs__tab {
	padding: 4px 10px;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var( --spar-dash-muted );
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 7px;
}

.spar-dash .spar-dash-tabs__tab:hover {
	color: var( --spar-dash-ink );
}

.spar-dash .spar-dash-tabs__tab.is-active {
	font-weight: 600;
	color: var( --spar-dash-ink );
	background: #fff;
	box-shadow: 0 1px 3px rgba( 27, 29, 51, 0.12 );
}

.spar-dash-flow__panel[hidden] {
	display: none;
}

.spar-dash-bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.spar-dash-bar__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: var( --spar-dash-green );
	background: var( --spar-dash-green-soft );
	border-radius: 9px;
}

.spar-dash-flow__panel.is-out .spar-dash-bar__icon {
	color: var( --spar-dash-red );
	background: var( --spar-dash-red-soft );
}

.spar-dash-bar__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.spar-dash-bar__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
}

.spar-dash-bar__label {
	overflow: hidden;
	color: var( --spar-dash-text );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-bar__value {
	font-weight: 600;
	color: var( --spar-dash-ink );
	font-variant-numeric: tabular-nums;
}

.spar-dash-bar__track {
	display: block;
	height: 6px;
	overflow: hidden;
	background: var( --spar-dash-line-2 );
	border-radius: 999px;
}

.spar-dash-bar__fill {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, #36b37e, var( --spar-dash-green ) );
	border-radius: inherit;
}

.spar-dash-flow__panel.is-out .spar-dash-bar__fill {
	background: linear-gradient( 90deg, #e06666, var( --spar-dash-red ) );
}

.spar-dash-flow__total {
	margin: 18px 0 0;
	padding-top: 12px;
	font-size: 12px;
	color: var( --spar-dash-faint );
	border-top: 1px solid var( --spar-dash-line-2 );
}

/* Program totals */

.spar-dash-totals {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-totals li {
	display: flex;
	margin: 0;
}

.spar-dash-total {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	color: var( --spar-dash-text );
	text-decoration: none;
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: var( --spar-dash-radius );
	box-shadow: var( --spar-dash-shadow );
}

.spar-dash-total:hover,
.spar-dash-total:focus {
	color: var( --spar-dash-text );
	border-color: #d3d6e6;
	box-shadow: var( --spar-dash-shadow-hover );
}

.spar-dash-total__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 15px;
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-accent-soft );
	border-radius: 11px;
}

.spar-dash-total.is-outstanding .spar-dash-total__icon {
	color: var( --spar-dash-amber );
	background: var( --spar-dash-amber-soft );
}

.spar-dash-total.is-vouchers .spar-dash-total__icon,
.spar-dash-total.is-pending .spar-dash-total__icon {
	color: var( --spar-dash-blue );
	background: var( --spar-dash-blue-soft );
}

.spar-dash-total.is-redeemed_all .spar-dash-total__icon {
	color: var( --spar-dash-red );
	background: var( --spar-dash-red-soft );
}

.spar-dash-total__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-total__label {
	font-size: 12px;
	font-weight: 600;
	color: var( --spar-dash-muted );
}

.spar-dash-total__value {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var( --spar-dash-ink );
	font-variant-numeric: tabular-nums;
}

.spar-dash-total__sub {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

/* Recent activity */

.spar-dash-feed {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-feed__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-feed__item:first-child {
	padding-top: 0;
}

.spar-dash-feed__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.spar-dash-feed__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-feed__who {
	overflow: hidden;
	font-weight: 600;
	color: var( --spar-dash-ink );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-feed__who a {
	color: inherit;
	text-decoration: none;
}

.spar-dash-feed__who a:hover,
.spar-dash-feed__who a:focus {
	color: var( --spar-dash-accent-2 );
	text-decoration: underline;
}

.spar-dash-feed__what {
	overflow: hidden;
	font-size: 12px;
	color: var( --spar-dash-muted );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-feed__meta {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.spar-dash-feed__time {
	font-size: 11px;
	color: var( --spar-dash-faint );
	white-space: nowrap;
}

/* Top members */

.spar-dash-leaders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-leader {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-leader:first-child {
	padding-top: 0;
}

.spar-dash-leader:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.spar-dash-leader__rank {
	flex: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	color: var( --spar-dash-faint );
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.spar-dash-leader:nth-child( 1 ) .spar-dash-leader__rank {
	color: #c08a00;
}

.spar-dash-leader__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-leader__name {
	overflow: hidden;
	font-weight: 600;
	color: var( --spar-dash-ink );
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-leader__name:hover,
.spar-dash-leader__name:focus {
	color: var( --spar-dash-accent-2 );
	text-decoration: underline;
}

.spar-dash-leader__level {
	font-size: 12px;
	color: var( --spar-dash-muted );
}

.spar-dash-leader__points {
	flex: 0 0 auto;
	font-weight: 700;
	color: var( --spar-dash-ink );
	font-variant-numeric: tabular-nums;
}

/* Members by level */

.spar-dash-stack {
	display: flex;
	gap: 2px;
	height: 10px;
	margin-bottom: 16px;
	overflow: hidden;
	background: var( --spar-dash-line-2 );
	border-radius: 999px;
}

.spar-dash-stack__part {
	display: block;
	min-width: 4px;
	height: 100%;
}

.spar-dash .is-l0 { --spar-dash-level-color: #a5b4fc; }
.spar-dash .is-l1 { --spar-dash-level-color: #667eea; }
.spar-dash .is-l2 { --spar-dash-level-color: #764ba2; }
.spar-dash .is-l3 { --spar-dash-level-color: #c2417a; }
.spar-dash .is-l4 { --spar-dash-level-color: #d9822b; }
.spar-dash .is-l5 { --spar-dash-level-color: #0f9d76; }

.spar-dash-stack__part,
.spar-dash-level__swatch {
	background: var( --spar-dash-level-color, #667eea );
}

.spar-dash-levels {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-level {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-level:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.spar-dash-level__swatch {
	flex: 0 0 auto;
	width: 4px;
	height: 28px;
	border-radius: 2px;
}

.spar-dash-level__badge {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	overflow: hidden;
	font-size: 14px;
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-tint );
	border-radius: 9px;
}

.spar-dash-level__badge img {
	display: block;
	max-width: 22px;
	max-height: 22px;
}

.spar-dash-level__badge .spar-level-badge-icon {
	font-size: 14px;
	line-height: 1;
}

.spar-dash-level__badge span.spar-level-badge-icon {
	overflow: hidden;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.spar-dash-level__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-level__name {
	overflow: hidden;
	font-weight: 600;
	color: var( --spar-dash-ink );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-level__req {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash-level__count {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	font-variant-numeric: tabular-nums;
}

.spar-dash-level__count strong {
	color: var( --spar-dash-ink );
}

.spar-dash-level__count span {
	font-size: 11px;
	color: var( --spar-dash-faint );
}

/* Ways to earn and rewards */

.spar-dash-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-list__item:first-child {
	padding-top: 0;
}

.spar-dash-list__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.spar-dash-list__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-accent-soft );
	border-radius: 10px;
}

.spar-dash-list__item.is-off .spar-dash-list__icon,
.spar-dash-list__item.is-pro .spar-dash-list__icon {
	color: var( --spar-dash-faint );
	background: var( --spar-dash-line-2 );
}

.spar-dash-list__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-list__title {
	overflow: hidden;
	font-weight: 600;
	color: var( --spar-dash-ink );
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spar-dash-list__item.is-off .spar-dash-list__title,
.spar-dash-list__item.is-pro .spar-dash-list__title {
	color: var( --spar-dash-muted );
}

.spar-dash-list__desc {
	overflow: hidden;
	font-size: 12px;
	color: var( --spar-dash-faint );
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Features */

.spar-dash-features {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-features li {
	display: flex;
	margin: 0;
}

.spar-dash-feature {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	color: var( --spar-dash-text );
	text-decoration: none;
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: var( --spar-dash-radius );
	box-shadow: var( --spar-dash-shadow );
}

.spar-dash-feature:hover,
.spar-dash-feature:focus {
	color: var( --spar-dash-text );
	border-color: #d3d6e6;
	box-shadow: var( --spar-dash-shadow-hover );
	transform: translateY( -1px );
}

.spar-dash-feature__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.spar-dash-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 16px;
	color: #fff;
	background: var( --spar-dash-brand );
	border-radius: 11px;
}

.spar-dash-feature.is-off .spar-dash-feature__icon,
.spar-dash-feature.is-pro .spar-dash-feature__icon,
.spar-dash-feature.is-get .spar-dash-feature__icon {
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-accent-soft );
}

.spar-dash-feature__title {
	font-weight: 600;
	color: var( --spar-dash-ink );
}

.spar-dash-feature__desc {
	flex: 1 1 auto;
	font-size: 12px;
	line-height: 1.5;
	color: var( --spar-dash-muted );
}

.spar-dash-feature__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-feature__meta {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
	font-size: 12px;
	font-weight: 600;
	color: var( --spar-dash-accent-2 );
}

.spar-dash-feature__cta .fa-solid {
	font-size: 10px;
	transition: transform 0.15s ease;
}

.spar-dash-feature:hover .spar-dash-feature__cta .fa-solid,
.spar-dash-feature:focus .spar-dash-feature__cta .fa-solid {
	transform: translateX( 2px );
}

/* Quick actions */

.spar-dash-actions {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-actions li {
	display: flex;
	margin: 0;
}

.spar-dash-action {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 12px 14px;
	color: var( --spar-dash-text );
	text-decoration: none;
	background: var( --spar-dash-tint );
	border: 1px solid var( --spar-dash-line-2 );
	border-radius: 12px;
}

.spar-dash-action:hover,
.spar-dash-action:focus {
	color: var( --spar-dash-text );
	background: #fff;
	border-color: #d3d6e6;
	box-shadow: var( --spar-dash-shadow-hover );
}

.spar-dash-action__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 14px;
	color: var( --spar-dash-accent-2 );
	background: #fff;
	border: 1px solid var( --spar-dash-line );
	border-radius: 10px;
}

.spar-dash-action__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-action__title {
	font-weight: 600;
	color: var( --spar-dash-ink );
}

.spar-dash-action__desc {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash-action__go {
	flex: 0 0 auto;
	font-size: 11px;
	color: var( --spar-dash-faint );
}

.spar-dash-action:hover .spar-dash-action__go,
.spar-dash-action:focus .spar-dash-action__go {
	color: var( --spar-dash-accent-2 );
}

/* Help, resources and upgrade */

.spar-dash-resources {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-resources li {
	margin: 0;
}

.spar-dash-resource {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var( --spar-dash-text );
	text-decoration: none;
	border-bottom: 1px solid var( --spar-dash-line-2 );
}

.spar-dash-resources li:first-child .spar-dash-resource {
	padding-top: 0;
}

.spar-dash-resources li:last-child .spar-dash-resource {
	padding-bottom: 0;
	border-bottom: 0;
}

.spar-dash-resource:hover,
.spar-dash-resource:focus {
	color: var( --spar-dash-text );
}

.spar-dash-resource__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 14px;
	color: var( --spar-dash-accent-2 );
	background: var( --spar-dash-accent-soft );
	border-radius: 10px;
}

.spar-dash-resource__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.spar-dash-resource__title {
	font-weight: 600;
	color: var( --spar-dash-ink );
}

.spar-dash-resource:hover .spar-dash-resource__title,
.spar-dash-resource:focus .spar-dash-resource__title {
	color: var( --spar-dash-accent-2 );
}

.spar-dash-resource__desc {
	font-size: 12px;
	color: var( --spar-dash-faint );
}

.spar-dash-resource__go {
	font-size: 11px;
	color: var( --spar-dash-faint );
}

.spar-dash-upgrade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: 24px 28px;
	color: rgba( 255, 255, 255, 0.92 );
	background:
		radial-gradient( circle at 85% 20%, rgba( 255, 255, 255, 0.16 ), transparent 40% ),
		var( --spar-dash-brand );
	border: 0;
}

.spar-dash-upgrade__text {
	flex: 1 1 520px;
	min-width: 0;
}

.spar-dash-upgrade__action {
	flex: 0 0 auto;
	width: 260px;
	max-width: 100%;
}

.spar-dash .spar-dash-upgrade .spar-dash-card__title {
	font-size: 20px;
	color: #fff;
}

.spar-dash-upgrade__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba( 255, 255, 255, 0.18 );
	border-radius: 999px;
}

.spar-dash-upgrade__badge .fa-solid {
	color: #ffd66b;
}

.spar-dash-upgrade__intro {
	margin: 6px 0 14px;
}

.spar-dash-upgrade__list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spar-dash-upgrade__list li {
	margin: 0;
	font-size: 12px;
}

.spar-dash-upgrade__list .fa-check {
	margin-inline-end: 4px;
	color: #b9f6ca;
}

.spar-dash .spar-dash-upgrade__cta {
	width: 100%;
	min-height: 42px;
	font-weight: 700;
	color: #3b2f8f;
	background: #fff;
	border: 0;
}

.spar-dash .spar-dash-upgrade__cta:hover,
.spar-dash .spar-dash-upgrade__cta:focus {
	color: #2c2270;
	background: #f3f1ff;
}

.spar-dash-upgrade__note {
	margin: 10px 0 0;
	font-size: 12px;
	text-align: center;
	color: rgba( 255, 255, 255, 0.85 );
}

.spar-dash-footnote {
	margin: 4px 0 0;
	font-size: 12px;
	color: var( --spar-dash-faint );
}

/* Smaller screens */

@media screen and ( max-width: 1280px ) {
	.spar-dash-kpis {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.spar-dash-grid--main,
	.spar-dash-grid--thirds {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media screen and ( max-width: 1024px ) {
	.spar-dash-grid--halves {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-dash-checklist__items {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media screen and ( max-width: 782px ) {
	.spar-dash-actions,
	.spar-dash-upgrade__list {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-dash-upgrade__action {
		width: 100%;
	}
}

@media screen and ( max-width: 600px ) {
	.spar-dash-kpis {
		grid-template-columns: minmax( 0, 1fr );
	}

	.spar-dash-hero {
		padding: 18px;
	}

	.spar-dash-hero__actions,
	.spar-dash-hero__actions .spar-dash-button {
		width: 100%;
	}

	.spar-dash-card {
		padding: 16px;
	}

	.spar-dash-check {
		flex-wrap: wrap;
	}

	.spar-dash .spar-dash-check__action {
		margin-inline-start: 36px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.spar-dash a,
	.spar-dash-feature__cta .fa-solid {
		transition: none;
	}

	.spar-dash-pill.is-live .spar-dash-pill__dot::after {
		animation: none;
	}

	.spar-dash-kpi:hover,
	.spar-dash-feature:hover {
		transform: none;
	}
}