/**
 * WB Gamification — Frontend Styles
 *
 * Minimal, utility-first styles for all gamification blocks.
 * Uses CSS custom properties for easy theming; block-specific overrides
 * in child theme or via the Global Styles panel.
 */

/*
 * Design tokens (canonical + shorthand aliases) live in
 * `src/shared/design-tokens.css`, registered as the `wb-gam-tokens`
 * style handle which this file (`wb-gamification`) depends on.
 * All blocks consume tokens via that handle alone — frontend.css is
 * legacy global polish (toasts, hub-only utilities) and must NOT
 * redeclare tokens.
 */

/* Toasts, the Moment card, banners, dialogs, the drawer and menus live in popups.css. */

/* ── Empty states (shared) ──────────────────────────────────────────────────── */
.wb-gam-leaderboard__empty,
.wb-gam-badge-showcase__empty,
.wb-gam-kudos-feed__empty {
	color: var(--wb-gam-silver);
	font-size: 0.9375rem;
	text-align: center;
	padding: 2rem;
	margin: 0;
}


@media (max-width: 640px) {
	.wb-gam-earning-guide__grid {
		grid-template-columns: 1fr !important;
	}
}

/* ─── Phase D.1 responsive baseline ─────────────────────────────────────────
 * Mobile-first breakpoints for the four migrated static-display blocks.
 * Phase E will fold these into per-block style.css files; for now they
 * keep the legacy markup behaving correctly at narrow viewports.
 */

@media (max-width: 1024px) {
	.wb-gam-earning-guide__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.wb-gam-member-points {
		gap: 0.5rem;
	}

	.wb-gam-member-points__number {
		font-size: 2.25rem;
	}

	.wb-gam-streak__stats {
		gap: 1rem;
		flex-wrap: wrap;
	}

	.wb-gam-streak__number {
		font-size: 1.875rem;
	}

	.wb-gam-streak__heatmap {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-block-end: 4px;
	}

	.wb-gam-level-progress__header {
		flex-wrap: wrap;
	}

	.wb-gam-level-progress__name {
		font-size: 1rem;
	}

	.wb-gam-earning-guide__grid {
		grid-template-columns: 1fr !important;
	}

	.wb-gam-earning-guide__card {
		padding: 12px 14px;
	}
}

@media (max-width: 640px) {
	.wb-gam-member-points__total {
		flex-direction: row;
		align-items: baseline;
		gap: 0.5rem;
	}

	.wb-gam-streak__number {
		font-size: 1.625rem;
	}

	.wb-gam-level-progress__icon {
		width: 36px;
		height: 36px;
	}

	.wb-gam-earning-guide__category {
		font-size: 1rem;
	}
}

/* ── BP activity-stream cards ─────────────────────────────────────────────── */
/* 1.4.0 redesign v2 — Basecamp 9914967346.
 *
 * v1 used a white surface + soft accent left border. Simran flagged it
 * as still too subtle on a busy BP activity stream — the cards blended
 * with the surrounding non-gamification activity items. v2 takes a
 * stronger position:
 *
 *  - Type-tinted background (8% alpha of the accent colour) so the card
 *    is visibly an "achievement", not "yet another activity post".
 *  - 4px solid accent strip across the top of the card (full width, not
 *    just left) — it's now the first thing the eye registers.
 *  - Icon chip enlarged to 64px and gets a 2px solid accent ring so it
 *    reads as a "badge" not a "thumbnail".
 *  - New eyebrow row above the title carrying the type label ("Badge
 *    earned", "Level up", etc.) in uppercase tracking — confirms what
 *    just happened at a glance even when scrolling fast.
 *  - Hover lift bumped from soft to medium so the card feels tappable.
 */
.wb-gam-activity-card {
	/* One theme-derived accent for every event type — no per-type colour.
	 * The icon + eyebrow label already say what happened, so the card sits
	 * quietly in the BuddyPress stream, follows the site's brand, and adapts
	 * to dark mode automatically (redesign 2026-06: drop the rainbow). */
	--wb-gam-card-accent: var(--wb-gam-color-accent);
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	margin-block-start: 8px;
	border: 1px solid var(--wb-gam-color-border, rgba(107, 114, 128, 0.18));
	border-inline-start: 3px solid var(--wb-gam-card-accent);
	border-radius: 12px;
	background: var(--wb-gam-color-surface, var(--wb-gam-color-white, #fff));
	overflow: hidden;
	transition: box-shadow 200ms ease, border-color 200ms ease;
}

.wb-gam-activity-card:hover {
	border-color: var(--wb-gam-card-accent);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.wb-gam-activity-card__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	object-fit: cover;
	/* Fixed light plate (not a flipping surface token) so the badge artwork —
	 * which loads via <img> and is often dark line-art — stays legible in dark
	 * mode too. */
	background: white;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid var(--wb-gam-color-border, rgba(107, 114, 128, 0.18));
}

.wb-gam-activity-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Eyebrow row — type label + optional timestamp. */
.wb-gam-activity-card__eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wb-gam-card-accent);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wb-gam-activity-card__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wb-gam-color-text, #111827);
	line-height: 1.3;
}

.wb-gam-activity-card__desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wb-gam-color-text-muted, #6b7280);
	line-height: 1.45;
}

/* Type variants intentionally share the single theme accent above — the icon
 * and the eyebrow label ("Badge earned", "Level up", "Kudos", "Challenge
 * completed") differentiate the event, not colour. */

@media (max-width: 640px) {
	.wb-gam-activity-card {
		gap: 12px;
		padding: 12px 14px;
	}
	.wb-gam-activity-card__icon {
		width: 52px;
		height: 52px;
		padding: 6px;
	}
	.wb-gam-activity-card__title {
		font-size: 0.9375rem;
	}

	.wb-gam-activity-card__icon {
		width: 44px;
		height: 44px;
	}

	.wb-gam-activity-card__title {
		font-size: 0.9rem;
	}

	.wb-gam-activity-card__desc {
		font-size: 0.8125rem;
	}
}

/* ── Public profile page (Engine\ProfilePage) ───────────────────────────── */
.wb-gam-profile-page {
	max-width: 800px;
	margin: 32px auto;
	padding: 0 16px;
}
.wb-gam-profile-page__hero {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--wb-gam-color-white, #fff);
	border: 1px solid var(--wb-gam-color-border, #e5e7eb);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 24px;
}
.wb-gam-profile-page__avatar img {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
}
.wb-gam-profile-page__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--wb-gam-color-text, #1f2937);
}
.wb-gam-profile-page__stats {
	margin: 6px 0 0;
	color: var(--wb-gam-color-text-muted, #6b7280);
	font-size: 14px;
}
.wb-gam-profile-page__section { margin-bottom: 28px; }
@media (max-width: 640px) {
	.wb-gam-profile-page__hero { flex-direction: column; text-align: center; padding: 18px; }
	.wb-gam-profile-page__avatar img { width: 80px; height: 80px; }
}

/* BuddyPress member directory rank line (DirectoryIntegration.php).
 * Inline-SVG icons render as currentColor; muted text keeps rank meta
 * subordinate to the member name above it. */
.wb-gam-directory-rank {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--wb-gam-color-text-muted, #65676b);
	font-size: 13px;
	line-height: 1.4;
	margin-top: 2px;
}
.wb-gam-directory-rank > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.wb-gam-directory-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}
.wb-gam-directory-level {
	color: var(--wb-gam-color-text, #1f2937);
	font-weight: 600;
}
.wb-gam-directory-points .wb-gam-directory-icon { color: var(--wb-gam-primary, #1d4ed8); }
.wb-gam-directory-badges .wb-gam-directory-icon { color: var(--wb-gam-accent, #f59e0b); }
@media (max-width: 640px) {
	.wb-gam-directory-rank { gap: 6px; font-size: 12px; }
	.wb-gam-directory-icon { width: 12px; height: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * [wb_gam_my_rewards] — member-facing redemption history list
 * Closes Basecamp #9927388714 / #9925383280 issue 3.
 * Plain semantic list; cards use the shared --wb-gam tokens so the
 * widget inherits site styling without per-theme overrides.
 * ───────────────────────────────────────────────────────────────────── */
.wb-gam-my-rewards { display: block; }
.wb-gam-my-rewards--guest,
.wb-gam-my-rewards--empty {
	padding: 24px 16px;
	border: 1px dashed var(--wb-gam-border, #e5e7eb);
	border-radius: var(--wb-gam-radius, 8px);
	text-align: center;
	color: var(--wb-gam-text-muted, #6b7280);
	font-size: 14px;
}
.wb-gam-my-rewards__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wb-gam-my-rewards__item {
	background: var(--wb-gam-color-white, #fff);
	border: 1px solid var(--wb-gam-border, #e5e7eb);
	border-radius: var(--wb-gam-radius, 8px);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wb-gam-my-rewards__title {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
	font-size: 14px;
	color: var(--wb-gam-text, #1d2939);
}
.wb-gam-my-rewards__status {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--wb-gam-color-info-bg, #eff6ff);
	color: var(--wb-gam-primary, #1d4ed8);
	white-space: nowrap;
}
.wb-gam-my-rewards__status--fulfilled { background: var(--wb-gam-color-success-bg); color: var(--wb-gam-color-success); }
.wb-gam-my-rewards__status--failed    { background: var(--wb-gam-color-danger-bg); color: var(--wb-gam-color-danger); }
.wb-gam-my-rewards__status--refunded  { background: var(--wb-gam-color-warning-bg); color: var(--wb-gam-color-warning); }
.wb-gam-my-rewards__meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--wb-gam-text-muted, #6b7280);
}
.wb-gam-my-rewards__cost { font-weight: 600; }
.wb-gam-my-rewards__coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 13px;
}
.wb-gam-my-rewards__coupon-label { color: var(--wb-gam-text-muted, #6b7280); }
.wb-gam-my-rewards__coupon-code {
	font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--wb-gam-color-success-bg, #ecfdf5);
	color: var(--wb-gam-color-success, #065f46);
	border: 1px dashed var(--wb-gam-color-success-soft, #34d399);
}
@media (max-width: 480px) {
	.wb-gam-my-rewards__title { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* BuddyPress "Achievements" profile tab — wraps the reused blocks rendered
 * per sub-tab (Overview / Badges / Points / Streak). */
.wb-gam-bp-achievements {
	display: flex;
	flex-direction: column;
	gap: var(--wb-gam-space-lg, 24px);
}

.wb-gam-bp-achievements__more {
	margin: 0;
	text-align: center;
}

.wb-gam-bp-achievements__more a {
	font-weight: 600;
	color: var(--wb-gam-color-accent);
}

/* LMS profile — single "My Achievements" hub link, aligned right so it reads
 * as a profile action rather than a floating banner. Shared by the LearnDash
 * (.wb-gam-ld-link) and Learnomy (.wb-gam-lrn-link) profile integrations. */
.wb-gam-ld-link,
.wb-gam-lrn-link {
	margin: 0 0 16px;
	text-align: right;
}

.wb-gam-ld-link__btn,
.wb-gam-lrn-link__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--wb-gam-radius, 8px);
	background: var(--wb-gam-color-accent-light);
	color: var(--wb-gam-color-accent-text);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}

.wb-gam-ld-link__btn:hover,
.wb-gam-lrn-link__btn:hover {
	background: var(--wb-gam-color-accent);
	color: #fff;
}

/* ── Profile visibility owner control ──────────────────────────────────────
   Member-facing privacy toggle on /u/{login}. Owner-only; lets a member make
   their own profile public/private (writes wb_gam_profile_public). */
.wb-gam-profile-privacy {
	border: 1px solid var(--wb-gam-color-border, #e2e4e7);
	border-radius: var(--wb-gam-radius, 8px);
	background: var(--wb-gam-color-surface, #fff);
	padding: 16px 20px;
}

.wb-gam-profile-privacy__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wb-gam-profile-privacy__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wb-gam-profile-privacy__label {
	font-weight: 600;
	color: var(--wb-gam-color-text, #1e1e1e);
}

.wb-gam-profile-privacy__state {
	font-size: 0.875rem;
	color: var(--wb-gam-color-text-muted, #646970);
}

.wb-gam-profile-privacy__toggle {
	flex-shrink: 0;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--wb-gam-color-accent, #2271b1);
	border-radius: var(--wb-gam-radius, 8px);
	background: var(--wb-gam-color-accent, #2271b1);
	color: var(--wb-gam-color-white, #fff);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}

.wb-gam-profile-privacy__toggle:hover {
	filter: brightness(0.94);
}

.wb-gam-profile-privacy__toggle:focus-visible {
	outline: 2px solid var(--wb-gam-color-accent, #2271b1);
	outline-offset: 2px;
}

.wb-gam-profile-privacy__toggle:disabled {
	opacity: 0.6;
	cursor: default;
}

.wb-gam-profile-privacy__note,
.wb-gam-profile-privacy__status {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	color: var(--wb-gam-color-text-muted, #646970);
}

.wb-gam-profile-privacy__status:empty {
	display: none;
}

@media (max-width: 640px) {
	.wb-gam-profile-privacy__row {
		flex-direction: column;
		align-items: stretch;
	}

	.wb-gam-profile-privacy__toggle {
		width: 100%;
	}
}