/*
 * Member journey — timeline, badge shelves, Initiation card.
 * Design source of truth: "Ranking - Design.md" / "Member Journey.dc.html" (v1.0).
 * Light theme; every colour has a dark pair in the theme brief (dark not drawn yet).
 * Emblem/tile art carries its own inline styles from Frontend\Journey; this file
 * handles layout, the timeline track and the surrounding cards.
 */

.lj-timeline,
.lj-shelves,
.lj-init-card {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #16202b;
	line-height: 1.6;
}

.lj-eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #56636f;
}

/* ------------------------------------------------------------------ shelves */

.lj-shelves {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 14px 0 4px;
}

.lj-shelf-section {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lj-shelf-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.lj-shelf-count {
	font-size: .72rem;
	color: #8d99a5;
	font-variant-numeric: tabular-nums;
}

.lj-shelf-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lj-tile-link {
	display: inline-flex;
	text-decoration: none;
	border-radius: 12px;
	line-height: 0;
}

.lj-tile-link:focus-visible {
	outline: 2px solid #3e7391;
	outline-offset: 3px;
}

/* Daily-challenge tray: the tinted, dashed container carries the distinction. */
.lj-puzzle-tray {
	background: #f7f4fb;
	border: 1px dashed #d6cbe9;
	border-radius: 12px;
	padding: 12px;
}

.lj-eyebrow--puzzle {
	color: #5b3fa0;
}

.lj-puzzle-empty {
	font-size: .85rem;
	color: #6b5b93;
}

/* The real solve progress under the puzzle badges (streak · total · next badge),
   so the "%d of 4 badges" count isn't the only signal a member sees. */
.lj-puzzle-status {
	margin-top: 8px;
	font-size: .85rem;
	font-weight: 600;
	color: #5b3fa0;
}

/* -------------------------------------------------------------- init card */

.lj-init-card {
	width: 100%;
	max-width: 320px;
	background: #fff;
	border: 1px solid #dfe4e9;
	border-left: 4px solid #3e7391;
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 6px 20px rgba(16, 32, 45, .07);
	margin: 16px 0;
}

.lj-init-card.is-complete {
	border-color: #8A6D0F;
	border-left-color: #8A6D0F;
}

.lj-init-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lj-init-emblem {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.lj-init-title {
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
}

.lj-init-sub {
	font-size: .8rem;
	color: #56636f;
}

.lj-init-steps {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.lj-step {
	display: flex;
	align-items: center;
	gap: 9px;
}

.lj-step-box {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: #fff;
	border: 1.5px solid #cfd6dd;
}

.lj-step-box.is-done {
	background: #0F766E;
	border-color: #0F766E;
}

.lj-step-label {
	font-size: .9rem;
	font-weight: 600;
}

.lj-step-label.is-done {
	font-weight: 700;
}

.lj-step-count {
	margin-left: auto;
	font-size: .78rem;
	color: #8d99a5;
	font-variant-numeric: tabular-nums;
}

.lj-init-rule {
	font-size: .84rem;
	line-height: 1.5;
	color: #4a4126;
	background: #fffaf0;
	border: 1px solid #e6d9b8;
	border-radius: 9px;
	padding: 10px 12px;
}

.lj-init-cta {
	font: inherit;
	font-size: .88rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background: #3e7391;
	color: #fff;
	border: 1px solid #3e7391;
	border-radius: 9px;
	padding: 9px 14px;
}

.lj-init-cta:hover {
	background: #2f5a73;
	color: #fff;
}

.lj-init-cta--ghost {
	background: transparent;
	color: #3e7391;
	border-color: #cfd6dd;
}

.lj-init-cta--ghost:hover {
	background: #f6f8fa;
	color: #2f5a73;
}

/* --------------------------------------------------------------- timeline */

.lj-timeline {
	margin: 8px 0 4px;
}

.lj-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0 4px 2px;
}

.lj-points {
	margin-left: auto;
	font-size: .8rem;
	color: #16202b;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lj-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 10px 0 4px;
}

.lj-scroll::-webkit-scrollbar {
	height: 0;
	width: 0;
}

.lj-track {
	position: relative;
	width: 880px;
	height: 112px;
	flex: 0 0 auto;
}

.lj-line {
	position: absolute;
	left: 44px;
	top: 24px;
	height: 6px;
	width: 792px;
	border-radius: 3px;
	background: #e2e6ea;
	transform-origin: left;
	transition: transform 825ms ease-out;
}

.lj-fill {
	position: absolute;
	left: 44px;
	top: 24px;
	height: 6px;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, #5b6b7a, #3e7391);
	transition: width 1500ms cubic-bezier(.16, .84, .3, 1);
}

.lj-markers {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: flex-start;
}

.lj-go {
	padding: 2px 4px 0;
	font-size: .95rem;
	color: #16202b;
}

.lj-go strong {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* A marker cell; per-marker disc/label styles are set inline by journey.js. */
.lj-marker {
	width: 88px;
	flex: 0 0 88px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.lj-marker-disc {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* Hard requirement: under reduced motion nothing animates — the track, fill,
   pop and count-up all land at their final value with no transition. */
@media (prefers-reduced-motion: reduce) {
	.lj-line,
	.lj-fill,
	.lj-marker-disc {
		transition: none !important;
	}
}

/* "Your next step" prompt under the timeline (owner-only): points to the next
   level + the fastest action, with a link. */
/* Compact row: the text block on the left, the CTA beside it on the right,
   rather than the button stacked below — keeps the card short. */
.lj-nextstep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 4px 0 10px;
	background: #f6f8fa;
	border: 1px solid #e2e6ea;
	border-left: 4px solid #3e7391;
	border-radius: 12px;
	padding: 12px 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.lj-nextstep-text {
	flex: 1 1 auto;
	min-width: 0;
}
.lj-nextstep-eyebrow {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #56636f;
}
.lj-nextstep-head {
	margin: 3px 0 1px;
	font-size: 1rem;
	font-weight: 800;
	color: #16202b;
	font-variant-numeric: tabular-nums;
}
.lj-nextstep-body {
	margin: 0;
	font-size: .85rem;
	color: #56636f;
}
.lj-nextstep-cta {
	flex: 0 0 auto;
	align-self: flex-end;
	display: inline-block;
	white-space: nowrap;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	background: #3e7391;
	color: #fff;
	border-radius: 9px;
	padding: 8px 14px;
}
.lj-nextstep-cta:hover { background: #2f5a73; color: #fff; }