/* LifePlan Welcome v1.3.2
 * Module-specific layout only. Shared page headers, cards, status, buttons,
 * colors, shadows and motion come from LifePlan Core UI Kit.
 */

.lpw-view{
	width:100%;
	max-width:none;
	margin:0;
	font-family:var(--lp-font-family,inherit);
	color:var(--lp-text,#242a2f);
}

.lpw-page-header,
.lpw-page-header-fallback{
	max-width:none;
	margin-inline:0;
}

.lpw-page-header-fallback h2{
	margin:0 0 10px;
	color:var(--lp-primary,#7b1d3d);
	font-size:var(--lp-title-size,38px);
	font-weight:var(--lp-title-weight,500);
}

.lpw-page-header-fallback p{
	margin:0;
	color:var(--lp-muted,#6f7881);
	font-size:var(--lp-body-size,15px);
	line-height:1.6;
}

.lpw-learning-card{
	width:min(820px,100%);
	max-width:100%;
	margin:0 auto;
}

.lpw-video-frame{
	position:relative;
	overflow:hidden;
	width:100%;
	aspect-ratio:16/9;
	background:#11161b;
}

.lpw-video-frame iframe,
.lpw-video-frame video{
	display:block;
	width:100%;
	height:100%;
	border:0;
}

.lpw-video-frame::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.lpw-video-placeholder{
	display:grid;
	place-items:center;
	align-content:center;
	gap:8px;
	width:100%;
	height:100%;
	color:#fff;
	background:radial-gradient(circle at 72% 30%,rgba(126,56,78,.9),transparent 28%),linear-gradient(145deg,#212833,#101419);
}

.lpw-placeholder-icon{
	display:grid;
	place-items:center;
	width:58px;
	height:58px;
	margin-bottom:4px;
	border-radius:50%;
	background:rgba(255,255,255,.11);
	font-size:22px;
}

.lpw-video-placeholder strong{font-size:17px}
.lpw-video-placeholder span{color:rgba(255,255,255,.68);font-size:12px}

.lpw-video-meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:14px var(--lp-card-padding,18px) 10px;
	background:var(--lp-surface,#fff);
}

.lpw-video-meta>div{display:grid;gap:3px}
.lpw-video-meta strong{color:var(--lp-text,#242a2f);font-size:12.5px;font-weight:650}
.lpw-video-meta>div span{color:var(--lp-muted,#6f7881);font-size:10.5px;line-height:1.45}

.lpw-progress-label{
	flex:0 0 auto;
	padding:6px 9px;
	border-radius:999px;
	background:#f1f4f5;
	color:#68727a;
	font-size:10px;
	font-weight:700;
}

.lpw-progress-label.is-complete{
	background:var(--lp-success-bg,#edf8f1);
	color:var(--lp-success,#2f7d57);
}

.lpw-progress-track{
	height:5px;
	margin:0 var(--lp-card-padding,18px);
	overflow:hidden;
	border-radius:999px;
	background:#edf0f2;
	box-shadow:inset 0 1px 2px rgba(15,23,42,.06);
}

.lpw-progress-track span{
	display:block;
	height:100%;
	border-radius:inherit;
	background:var(--lp-primary,#7b1d3d);
	transition:width var(--lp-ui-motion,200ms) var(--lp-ui-ease,ease);
}

.lpw-ready{
	margin:14px var(--lp-card-padding,18px) var(--lp-card-padding,18px);
	padding:12px 13px;
	border:1px solid #e2e7ea;
	border-radius:12px;
	background:var(--lp-surface-subtle,#fbfcfd);
}

.lpw-ready.is-saved,
.lpw-ready.is-complete{
	border-color:color-mix(in srgb,var(--lp-success,#2f7d57) 24%,var(--lp-border,#dde3e7));
	background:var(--lp-success-bg,#edf8f1);
}

.lpw-ready .lp-ui-save-status__icon{
	width:34px;
	height:34px;
	flex-basis:34px;
}

@media(max-width:760px){
	.lpw-learning-card{max-width:100%}
	.lpw-video-meta{align-items:flex-start;flex-direction:column;gap:8px}
	.lpw-ready{margin-inline:14px}
}


/* v1.3.1 — align Welcome to the same Core content gutter as Objectives
   and Personal Details. The video remains intentionally compact, but it is
   no longer centered with a large artificial left gap. */
.lifeplan-app .lpw-view{
	justify-self:stretch;
}


/* v1.3.2 — page text follows the shared Core gutter while the media
   card itself is intentionally centered for a calmer welcome composition. */
.lifeplan-app .lpw-learning-card{
	margin-left:auto;
	margin-right:auto;
}