/**
 * 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 ──────────────────────────────────────────────────────────────────── */
/* Top-center stack — Basecamp 9925151443. Members were missing achievement
 * toasts because they fired bottom-right where the BuddyX live-chat widget
 * sits. Top-center puts the reward right under the WP admin bar where the
 * eye naturally lands when a click resolves. Stack overlays inside the
 * container so multiple toasts cascade without competing for screen real-
 * estate with the action being performed. */
.wb-gam-toasts {
	position: fixed;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: min(420px, calc(100vw - 2rem));
	pointer-events: none;
	/* Slide direction for enter/exit — overridden per position variant
	 * below. Bottom-anchored stacks slide up (+), top-anchored slide
	 * down (-). Default matches the bottom-right default position. */
	--wb-gam-toast-slide: 12px;
}

/* ── Position variants (admin-selectable in Settings → Realtime) ──────
 * Default is bottom-right: the conventional ambient-notification corner
 * that never overlaps a top nav / sticky header. (The old top-center
 * default collided with BuddyX's centered sticky header — see the file
 * header note + Basecamp #9932190385.) Sites that run a bottom-right
 * chat widget can switch to top-center or another corner. Slide
 * direction is corner-aware so a toast never flies across the viewport.
 * The modifier class is set by assets/js/toast.js from the localized
 * wbGamToast.position value. */
.wb-gam-toasts--top-center {
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	align-items: center;
	--wb-gam-toast-slide: -12px;
}
.wb-gam-toasts--top-right {
	top: 1rem;
	right: 1rem;
	align-items: flex-end;
	--wb-gam-toast-slide: -12px;
}
.wb-gam-toasts--bottom-right {
	bottom: 1rem;
	right: 1rem;
	align-items: flex-end;
}
.wb-gam-toasts--bottom-left {
	bottom: 1rem;
	left: 1rem;
	align-items: flex-start;
}

/* Admin-bar offset — WP emits body.admin-bar for logged-in users; the
 * bar is 32px tall on desktop and grows to 46px on the mobile
 * breakpoint (≤782px) per WP core's own CSS. Only TOP-anchored stacks
 * need pushing below the bar; bottom-anchored stacks clear it already. */
body.admin-bar .wb-gam-toasts--top-center,
body.admin-bar .wb-gam-toasts--top-right {
	top: calc(32px + 1rem);
}

@media (max-width: 782px) {
	body.admin-bar .wb-gam-toasts--top-center,
	body.admin-bar .wb-gam-toasts--top-right {
		top: calc(46px + 0.75rem);
	}
}

.wb-gam-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	background: var(--wb-gam-color-surface, #fff);
	border-radius: var(--wb-gam-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	border-inline-start: 4px solid var(--wb-gam-primary);
	pointer-events: auto;
	width: 100%;
	/* Initial off-screen position — JS removes `--enter` to slide in.
	 * Direction follows the stack's corner via --wb-gam-toast-slide. */
	opacity: 0;
	transform: translateY(var(--wb-gam-toast-slide, -12px));
	transition: opacity 320ms ease, transform 320ms ease;
}

.wb-gam-toast--enter {
	opacity: 1;
	transform: translateY(0);
}

.wb-gam-toast--exit {
	opacity: 0;
	transform: translateY(var(--wb-gam-toast-slide, -12px));
}

.wb-gam-toast[data-type="badge"]     { border-inline-start-color: var(--wb-gam-gold); }
.wb-gam-toast[data-type="challenge"] { border-inline-start-color: #10b981; }
.wb-gam-toast[data-type="kudos"]     { border-inline-start-color: #ec4899; }
.wb-gam-toast[data-type="level_up"]  { border-inline-start-color: #2563eb; }
.wb-gam-toast[data-type="streak"]    { border-inline-start-color: #f59e0b; }

/* Old keyframe — kept for any third-party legacy consumer that ID'd it. */
@keyframes wb-gam-toast-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
	.wb-gam-toasts {
		width: calc(100vw - 1.5rem);
	}
	/* Hug the screen edge on mobile; keep each variant's anchor side. */
	.wb-gam-toasts--top-right,
	.wb-gam-toasts--bottom-right { right: 0.75rem; }
	.wb-gam-toasts--bottom-left { left: 0.75rem; }
	.wb-gam-toasts--top-center { top: 0.75rem; }
	.wb-gam-toast {
		padding: 0.625rem 0.75rem;
	}
}

.wb-gam-toast__icon {
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.wb-gam-toast__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.wb-gam-toast__message {
	font-size: 0.9375rem;
	font-weight: 600;
}

.wb-gam-toast__detail {
	font-size: 0.8125rem;
	color: #6b7280;
}

.wb-gam-toast__detail[hidden] { display: none; }

.wb-gam-toast__close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.75rem;
	color: var(--wb-gam-silver);
	padding: 0.125rem;
	flex-shrink: 0;
	line-height: 1;
}

.wb-gam-toast__close:hover { color: #111; }

/* ── Overlays (level-up, streak milestone) ───────────────────────────────────── */
.wb-gam-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.55);
	backdrop-filter: blur(3px);
}

.wb-gam-overlay[hidden] { display: none; }

.wb-gam-overlay__card {
	background: var(--wb-gam-color-surface, #fff);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	max-width: 340px;
	width: calc(100vw - 3rem);
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.2);
	animation: wb-gam-overlay-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wb-gam-overlay-in {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}

.wb-gam-overlay__eyebrow {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wb-gam-primary);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.wb-gam-overlay__icon {
	width: 80px;
	height: 80px;
	object-fit: contain;
	display: block;
	margin: 0 auto 1rem;
}

.wb-gam-overlay__icon[hidden] { display: none; }

.wb-gam-overlay__title {
	font-size: 1.75rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
}

.wb-gam-overlay__streak-days {
	font-size: 4rem;
	font-weight: 900;
	line-height: 1;
	color: var(--wb-gam-primary);
	margin: 0.5rem 0;
}

.wb-gam-overlay__sub {
	font-size: 0.9375rem;
	color: #6b7280;
	margin: 0 0 1.5rem;
}

.wb-gam-overlay--level-up .wb-gam-overlay__card {
	border-top: 4px solid var(--wb-gam-primary);
}

.wb-gam-overlay--streak .wb-gam-overlay__card {
	border-top: 4px solid var(--wb-gam-gold);
}

.wb-gam-overlay__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.75rem;
	background: var(--wb-gam-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s;
}

.wb-gam-overlay__dismiss:hover { opacity: 0.88; }

/* ── 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);
}

/* LearnDash profile — single "My Achievements" hub link, aligned right so it
 * reads as a profile action rather than a floating banner. */
.wb-gam-ld-link {
	margin: 0 0 16px;
	text-align: right;
}

.wb-gam-ld-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 {
	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%;
	}
}