/* ==========================================================================
   PolarLabs — Welcome Offer (DR-WELCOME-001)
   The generic promotion banner/strip system has been RETIRED; this file now
   styles ONLY the permanent Welcome Offer modal. Route-scoped: enqueued only
   when the Welcome Offer is active on an eligible page. Presentation only; the
   plugin + WooCommerce own offer state, coupon minting, and discount authority.
   Tokens from main.css :root; literal fallbacks mirror shipped values. The right
   panel background is a pure-CSS placeholder (owner replaces artwork in
   PolarLabs → Welcome Offer, no code change). Navy / cobalt / ice system.
   ========================================================================== */

/* Fail-closed gate belt: NEVER paint the Welcome modal while the Researcher Gate
   is armed and not yet cleared (CSS safety net in addition to the JS arm-condition). */
html:has(body.pl-gate-armed):not(.pl-gate-cleared) .pl-welcome { display: none !important; }

/* ==========================================================================
   WELCOME OFFER MODAL — .pl-welcome (preset: Editorial Ice, default)
   ========================================================================== */
.pl-welcome { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 32px; }
.pl-welcome[hidden] { display: none; }
html.pl-welcome-open { overflow: hidden; }
.pl-welcome__backdrop { position: absolute; inset: 0; background: rgba(7, 24, 45, .55); opacity: 0; transition: opacity var(--pl-dur-slow, .3s) var(--pl-ease, ease); }
.pl-welcome.is-open .pl-welcome__backdrop { opacity: 1; }
.pl-welcome__panel {
	position: relative; box-sizing: border-box; width: 100%; max-width: 640px; display: grid; grid-template-columns: 1.15fr .85fr;
	background: var(--pl-surface-2, #F6F9FD); color: var(--pl-ink, #0B1D35);
	border: 1px solid var(--pl-line, #DCE6F2); border-radius: var(--pl-radius-lg, 18px);
	box-shadow: var(--pl-shadow-lg, 0 30px 80px rgba(2, 11, 22, .35)); overflow: hidden;
	opacity: 0; transform: translateY(10px) scale(.98);
	transition: opacity var(--pl-dur-slow, .3s) var(--pl-ease, ease), transform var(--pl-dur-slow, .3s) var(--pl-ease, ease);
}
.pl-welcome.is-open .pl-welcome__panel { opacity: 1; transform: none; }
.pl-welcome__body { padding: clamp(26px, 3vw, 38px) clamp(24px, 2.6vw, 34px); }
.pl-welcome__eyebrow { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--pl-mono, ui-monospace, monospace); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pl-blue-600, #0039CC); }
.pl-welcome__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--pl-blue, #004EFF); border-radius: 2px; }
.pl-welcome__title { margin: 0; font-family: var(--pl-font-heading, "Manrope", sans-serif); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); color: var(--pl-navy, #07182D); overflow-wrap: anywhere; }
.pl-welcome__sub { margin: 12px 0 0; font-size: .98rem; line-height: 1.55; color: var(--pl-muted, #42526A); max-width: 34ch; }
.pl-welcome__form { margin: 20px 0 0; display: grid; gap: 12px; }
.pl-welcome__field { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--pl-field-border, #6E8098); border-radius: var(--pl-radius, 12px); background: #fff; color: var(--pl-ink, #0B1D35); font-size: 1rem; }
.pl-welcome__field:focus-visible { outline: 3px solid var(--pl-blue, #004EFF); outline-offset: 1px; }
.pl-welcome__submit { --btn-bg: var(--pl-navy, #07182D); --btn-fg: #fff; --btn-bd: transparent; width: 100%; min-height: 50px; }
.pl-welcome__submitic { margin-left: 6px; }
.pl-welcome__dismiss { display: block; width: 100%; margin: 2px 0 0; padding: 8px; border: 0; background: transparent; color: #5C6A82; font: 500 .9rem var(--pl-font, sans-serif); text-align: center; cursor: pointer; border-radius: var(--pl-radius-sm, 8px); }
.pl-welcome__dismiss:hover { color: var(--pl-ink, #0B1D35); background: var(--pl-surface-3, #F0F5FB); }
/* DR-WELCOME-V2: marketing opt-in removed from the modal. Factual footer strip (uppercase, quiet). */
.pl-welcome__facts { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--pl-hairline, #E2E9F3); font-family: var(--pl-mono, ui-monospace, monospace); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-muted-soft, #718096); text-align: center; }
.pl-welcome__error { margin: 4px 0 0; font-size: .84rem; color: var(--pl-danger, #B83232); }
.pl-welcome__error[hidden] { display: none; }

/* Right visual panel — CSS placeholder (ice + technical linework); owner image optional. */
.pl-welcome__art { position: relative; background: linear-gradient(155deg, #fff 0%, var(--pl-blue-050, #EAF0FF) 100%); }
.pl-welcome__art::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg, rgba(0, 78, 255, .07) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(0deg, rgba(0, 78, 255, .07) 0 1px, transparent 1px 40px),
		radial-gradient(60% 50% at 70% 30%, rgba(0, 78, 255, .10), transparent 70%);
}
.pl-welcome__art[data-pl-bg="image"] { background-size: cover; background-position: center; }
.pl-welcome__art[data-pl-bg="image"]::before { display: none; }

.pl-welcome__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--pl-radius-pill, 999px); background: rgba(255, 255, 255, .7); color: var(--pl-muted, #42526A); cursor: pointer; }
.pl-welcome__close:hover { background: #fff; color: var(--pl-ink, #0B1D35); }

/* Success state (on-site code reveal — NO email). */
.pl-welcome__success[hidden] { display: none; }
/* V2 success — "APPLIED" status pill (State A); a centered block ABOVE the check so the status cluster
   reads as an intentional vertical stack (pill · check · headline), never pill-beside-check. */
.pl-welcome__status { display: block; width: max-content; max-width: 100%; margin: 0 auto 12px; padding: 4px 12px; border-radius: var(--pl-radius-pill, 999px); background: var(--pl-blue-050, #EAF0FF); color: var(--pl-blue-600, #0039CC); font-family: var(--pl-mono, ui-monospace, monospace); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pl-welcome__status[hidden] { display: none; }
.pl-welcome__successbody[hidden] { display: none; }
.pl-welcome__emailnote { margin: 10px auto 0; max-width: 34ch; font-size: .78rem; line-height: 1.45; color: var(--pl-muted-soft, #718096); }
.pl-welcome__emailnote[hidden] { display: none; }
.pl-welcome__success { grid-column: 1 / -1; padding: clamp(28px, 3.2vw, 40px); text-align: center; }
.pl-welcome__successic { display: inline-flex; color: var(--pl-success, #177A54); margin-bottom: 10px; }
.pl-welcome__successt { margin: 0 0 6px; font-family: var(--pl-font-heading, "Manrope", sans-serif); font-weight: 800; font-size: 1.4rem; color: var(--pl-navy, #07182D); }
.pl-welcome__codewrap { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0; padding: 10px 10px 10px 16px; background: var(--pl-blue-050, #EAF0FF); border: 1px solid #9DC0F5; border-radius: var(--pl-radius, 12px); }
.pl-welcome__code { font-family: var(--pl-mono, ui-monospace, monospace); font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; color: #0C447C; }
.pl-welcome__copy { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--pl-blue-600, #0039CC); border-radius: var(--pl-radius-sm, 8px); background: transparent; color: var(--pl-blue-600, #0039CC); font: 600 .82rem/1 var(--pl-font, sans-serif); cursor: pointer; }
.pl-welcome__copy.is-copied { background: var(--pl-blue-600, #0039CC); color: #fff; }
.pl-welcome__successcta { display: grid; gap: 10px; max-width: 22rem; margin: 6px auto 0; }
.pl-welcome__successcta .pl-btn { min-height: 48px; }
.pl-welcome__terms { margin: 12px 0 0; font-size: .8rem; color: var(--pl-muted, #42526A); }

/* ==========================================================================
   WELCOME PRESETS (controlled set — all reuse the shared panel/render architecture)
   A. editorial-ice (default)  B. dark-clinical  C. split  D. bottom-sheet  E. compact
   ========================================================================== */
/* A. EDITORIAL ICE (default) — refined to the owner reference: narrower, more elegant, editorial
   headline treatment (kept in the brand display face — PolarLabs has no approved serif; a true
   editorial serif would be a separate type-system decision), more breathing room, quiet technical
   decoration. Stays centered/contained at every width. */
.pl-welcome--editorial-ice .pl-welcome__panel { max-width: 560px; grid-template-columns: 1.2fr .8fr; background: var(--pl-surface-2, #F6F9FD); }
.pl-welcome--editorial-ice .pl-welcome__body { padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 36px); }
.pl-welcome--editorial-ice .pl-welcome__title { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2rem); letter-spacing: -.03em; line-height: 1.04; }
.pl-welcome--editorial-ice .pl-welcome__sub { font-size: .95rem; }

/* B. DARK CLINICAL — navy surface, light type, cobalt accents. */
.pl-welcome--dark-clinical .pl-welcome__panel { background: var(--pl-navy, #07182D); color: var(--pl-icy, #F4F8FF); border-color: rgba(203, 221, 255, .18); }
.pl-welcome--dark-clinical .pl-welcome__title, .pl-welcome--dark-clinical .pl-welcome__successt { color: #fff; }
.pl-welcome--dark-clinical .pl-welcome__eyebrow { color: var(--pl-icy-200, #CBDDFF); }
.pl-welcome--dark-clinical .pl-welcome__eyebrow::before { background: var(--pl-blue, #004EFF); }
.pl-welcome--dark-clinical .pl-welcome__sub { color: var(--pl-icy-200, #CBDDFF); }
.pl-welcome--dark-clinical .pl-welcome__field { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(203, 221, 255, .4); }
.pl-welcome--dark-clinical .pl-welcome__submit { --btn-bg: var(--pl-blue, #004EFF); --btn-fg: #fff; --btn-bd: transparent; }
.pl-welcome--dark-clinical .pl-welcome__dismiss, .pl-welcome--dark-clinical .pl-welcome__facts { color: var(--pl-icy-200, #CBDDFF); }
.pl-welcome--dark-clinical .pl-welcome__close { background: rgba(255, 255, 255, .14); color: #fff; }
.pl-welcome--dark-clinical .pl-welcome__art { background: linear-gradient(155deg, #0C2038 0%, #07182D 100%); }
.pl-welcome--dark-clinical .pl-welcome__art::before {
	background-image:
		repeating-linear-gradient(90deg, rgba(120, 160, 255, .08) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(0deg, rgba(120, 160, 255, .08) 0 1px, transparent 1px 40px),
		radial-gradient(60% 50% at 70% 30%, rgba(0, 78, 255, .18), transparent 70%);
}

/* C. SPLIT ARTWORK — balanced 50/50, artwork emphasized (a thin art band even on phones). */
.pl-welcome--split .pl-welcome__panel { grid-template-columns: 1fr 1fr; max-width: 720px; }
.pl-welcome--split .pl-welcome__art { min-height: 100%; }

/* D. BOTTOM SHEET — a centered card on desktop; slides up as a sheet on phones (mobile block below). */
.pl-welcome--bottom-sheet .pl-welcome__panel { grid-template-columns: 1fr; max-width: 480px; }
.pl-welcome--bottom-sheet .pl-welcome__art { display: none; }

/* E. COMPACT CARD — small, single column, no art. */
.pl-welcome--compact .pl-welcome__panel { grid-template-columns: 1fr; max-width: 400px; }
.pl-welcome--compact .pl-welcome__art { display: none; }
.pl-welcome--compact .pl-welcome__body { padding: clamp(22px, 3vw, 30px); }
.pl-welcome--compact .pl-welcome__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }

/* ---- Mobile: the DEFAULT (Editorial Ice + dark-clinical + split + compact) stays a CONTAINED,
   CENTERED modal with the dimmed backdrop visible around it — NOT auto-converted to a bottom sheet.
   Only the explicit --bottom-sheet preset becomes a sheet (below). ---- */
@media (max-width: 640px) {
	.pl-welcome { place-items: center; padding: 14px; }
	.pl-welcome__panel { grid-template-columns: 1fr; max-width: min(420px, 100%); }
	.pl-welcome__art { display: none; } /* single-column on phones; art is decorative */
	.pl-welcome__body { padding: clamp(22px, 6vw, 30px) clamp(18px, 5vw, 24px); }

	/* Editorial Ice (default) MUST collapse to ONE contained column on phones. Its desktop
	   `.pl-welcome--editorial-ice .pl-welcome__panel/__body` rules (0,2,0) out-specify the generic
	   mobile rules above (0,1,0), so restate them here at MATCHING specificity, later in source —
	   the definitive fix for the confirmed 390/430 overflow, not a one-off hack. */
	.pl-welcome--editorial-ice .pl-welcome__panel { grid-template-columns: 1fr; max-width: min(420px, 100%); }
	.pl-welcome--editorial-ice .pl-welcome__body { padding: 26px 22px; }
	.pl-welcome--editorial-ice .pl-welcome__title { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 1.8rem); }
	.pl-welcome--editorial-ice .pl-welcome__sub { font-size: .92rem; }

	/* Compact, balanced mobile rhythm (deliberate spacing — NOT shrunk fonts; tap targets kept). */
	.pl-welcome__title { line-height: 1.06; }
	.pl-welcome__sub { margin-top: 10px; max-width: none; }
	.pl-welcome__form { margin-top: 16px; gap: 10px; }

	/* Success: everything must fit ≥320px — let the code component REFLOW rather than clip, and keep
	   the heading contained/centered. */
	.pl-welcome__success { padding: 26px 20px; }
	.pl-welcome__successt { font-size: 1.25rem; }
	.pl-welcome__codewrap { flex-wrap: wrap; justify-content: center; max-width: 100%; box-sizing: border-box; margin: 12px 0; }
	.pl-welcome__code { overflow-wrap: anywhere; }

	/* Split collapses to one column with a short art band on top so it stays recognizably "split". */
	.pl-welcome--split .pl-welcome__panel { grid-template-columns: 1fr; }
	.pl-welcome--split .pl-welcome__art { display: block; min-height: 84px; order: -1; }
	/* Bottom-sheet preset ONLY: dock to the bottom and slide up. */
	.pl-welcome--bottom-sheet { place-items: end center; padding: 0; }
	.pl-welcome--bottom-sheet .pl-welcome__panel { max-width: none; border-radius: var(--pl-radius-lg, 18px) var(--pl-radius-lg, 18px) 0 0; transform: translateY(100%); }
	.pl-welcome--bottom-sheet.is-open .pl-welcome__panel { transform: none; }
	.pl-welcome--bottom-sheet .pl-welcome__body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.pl-welcome__backdrop, .pl-welcome__panel { transition: none; }
}