/* Hero idea composer — kept outside Tailwind so backdrop-filter survives.
   White glass fill only (no mint tint); brand color stays in border/shadow. */

.proj-morph-glass .landing-hero-input-shell.glass-panel,
.proj-morph-glass .blog-cta-input-shell.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 78%, transparent);
	backdrop-filter: blur(18px) saturate(1.6);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	border: 3px solid #000;
	box-shadow:
		var(--glass-inner-glow),
		0 0 12px color-mix(in srgb, var(--brand-neon) 55%, transparent),
		0 0 28px color-mix(in srgb, var(--brand-neon) 40%, transparent),
		0 8px 28px -6px color-mix(in srgb, var(--brand-neon) 50%, transparent);
	transition:
		background var(--dur-fast, 150ms) var(--ease-out, ease-out),
		border-color var(--dur-fast, 150ms) var(--ease-out, ease-out),
		border-width var(--dur-fast, 150ms) var(--ease-out, ease-out),
		box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out);
}

.proj-morph-glass .landing-hero-input-shell.glass-panel {
	border-radius: 9999px;
}

.proj-morph-glass .blog-cta-input-shell.glass-panel {
	border-width: 2px;
	border-radius: 0.75rem;
	box-shadow: var(--glass-inner-glow);
}

.proj-morph-glass .landing-hero-input-shell.glass-panel:hover,
.proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 88%, transparent);
	border-color: #000;
	box-shadow:
		var(--glass-inner-glow),
		0 0 16px color-mix(in srgb, var(--brand-neon) 70%, transparent),
		0 0 40px color-mix(in srgb, var(--brand-neon) 50%, transparent),
		0 10px 36px -4px color-mix(in srgb, var(--brand-neon) 60%, transparent);
}

.proj-morph-glass .blog-cta-input-shell.glass-panel:hover,
.proj-morph-glass .blog-cta-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 88%, transparent);
	border-color: #000;
	box-shadow: var(--glass-inner-glow);
}

.proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	border-width: 4px;
}

.proj-morph-glass .blog-cta-input-shell.glass-panel:focus-within {
	border-width: 3px;
}

.dark .proj-morph-glass .landing-hero-input-shell.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 72%, transparent);
	border-color: #000;
	box-shadow:
		var(--glass-inner-glow),
		0 0 14px color-mix(in srgb, var(--brand-neon) 60%, transparent),
		0 0 32px color-mix(in srgb, var(--brand-neon) 42%, transparent);
}

.dark .proj-morph-glass .blog-cta-input-shell.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 72%, transparent);
	border-color: #000;
	box-shadow: var(--glass-inner-glow);
}

.dark .proj-morph-glass .landing-hero-input-shell.glass-panel:hover,
.dark .proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 84%, transparent);
	border-color: #000;
	box-shadow:
		var(--glass-inner-glow),
		0 0 18px color-mix(in srgb, var(--brand-neon) 75%, transparent),
		0 0 44px color-mix(in srgb, var(--brand-neon) 52%, transparent);
}

.dark .proj-morph-glass .blog-cta-input-shell.glass-panel:hover,
.dark .proj-morph-glass .blog-cta-input-shell.glass-panel:focus-within {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 84%, transparent);
	border-color: #000;
	box-shadow: var(--glass-inner-glow);
}

.dark .proj-morph-glass .landing-hero-input-shell.glass-panel:focus-within {
	border-width: 4px;
}

.dark .proj-morph-glass .blog-cta-input-shell.glass-panel:focus-within {
	border-width: 3px;
}

/* Blog CTA dialog — mint glass tint (blur must stay in this file, not Tailwind). */
.proj-morph-glass .blog-cta-panel.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--siift-light-accent) 72%, transparent);
	backdrop-filter: blur(14px) saturate(1.5);
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	border-color: color-mix(in srgb, var(--siift-mid-accent) 45%, transparent);
}

.dark .proj-morph-glass .blog-cta-panel.glass-panel {
	background: var(--glass-sheen), color-mix(in srgb, var(--siift-darkest-accent) 82%, transparent);
	border-color: color-mix(in srgb, var(--siift-mid-accent) 40%, transparent);
}

/* Review cards — glass-card material + white frost (blur must stay in this file, not Tailwind).
   ~62% white lets backdrop-filter read; go higher and the frost disappears. */
.proj-morph-glass .landing-review-card.glass-card {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 62%, transparent);
	backdrop-filter: blur(20px) saturate(1.65);
	-webkit-backdrop-filter: blur(20px) saturate(1.65);
	border-color: color-mix(in srgb, var(--n-white, #ffffff) 50%, var(--glass-border));
	box-shadow:
		var(--shadow-glass-md),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 70%, transparent);
	transition:
		background var(--dur-fast, 150ms) var(--ease-out, ease-out),
		box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out);
}

.proj-morph-glass .landing-review-card.glass-card:hover,
.proj-morph-glass .landing-review-card.glass-card:focus-visible {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 72%, transparent);
	box-shadow:
		var(--shadow-glass-lg),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 80%, transparent);
}

.dark .proj-morph-glass .landing-review-card.glass-card {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 55%, transparent);
}

.dark .proj-morph-glass .landing-review-card.glass-card:hover,
.dark .proj-morph-glass .landing-review-card.glass-card:focus-visible {
	background: var(--glass-sheen), color-mix(in srgb, var(--n-white, #ffffff) 68%, transparent);
}

/* Landing dashboard input — glass rim borders (panel + idea textarea). */
.proj-morph-glass #dashboard-project-input.glass-panel {
	border: 1px solid color-mix(in srgb, var(--n-white, #ffffff) 55%, var(--siift-mid-accent));
	box-shadow:
		var(--shadow-glass-md),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 75%, transparent),
		inset 0 0 0 1px color-mix(in srgb, white 28%, transparent),
		0 16px 44px -12px color-mix(in srgb, var(--siift-mid-accent) 36%, transparent);
	transition:
		border-color var(--dur-fast, 150ms) var(--ease-out, ease-out),
		box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out);
}

.proj-morph-glass #dashboard-project-input.glass-panel:hover,
.proj-morph-glass #dashboard-project-input.glass-panel:focus-within {
	border-color: color-mix(in srgb, var(--n-white, #ffffff) 40%, var(--siift-mid-accent));
	box-shadow:
		var(--shadow-glass-lg),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 85%, transparent),
		inset 0 0 0 1px color-mix(in srgb, white 36%, transparent),
		0 22px 56px -12px color-mix(in srgb, var(--siift-mid-accent) 48%, transparent);
}

.dark .proj-morph-glass #dashboard-project-input.glass-panel {
	border-color: color-mix(in srgb, var(--n-white, #ffffff) 22%, var(--siift-mid-accent));
	box-shadow:
		var(--shadow-glass-md),
		var(--glass-inner-glow),
		inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
		0 12px 36px -10px color-mix(in srgb, var(--siift-mid-accent) 28%, transparent);
}

.dark .proj-morph-glass #dashboard-project-input.glass-panel:hover,
.dark .proj-morph-glass #dashboard-project-input.glass-panel:focus-within {
	border-color: color-mix(in srgb, var(--n-white, #ffffff) 30%, var(--siift-mid-accent));
	box-shadow:
		var(--shadow-glass-lg),
		var(--glass-inner-glow),
		inset 0 0 0 1px color-mix(in srgb, white 20%, transparent),
		0 18px 48px -12px color-mix(in srgb, var(--siift-mid-accent) 36%, transparent);
}

.proj-morph-glass #dashboard-project-input .glass-card {
	border: 1px solid color-mix(in srgb, var(--siift-mid-accent) 42%, transparent);
	box-shadow:
		var(--shadow-glass-sm),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 70%, transparent);
	transition:
		border-color var(--dur-fast, 150ms) var(--ease-out, ease-out),
		box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out);
}

.proj-morph-glass #dashboard-project-input .glass-card:hover {
	border-color: color-mix(in srgb, var(--siift-mid-accent) 58%, transparent);
	box-shadow:
		var(--shadow-glass-md),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 80%, transparent);
}

.proj-morph-glass #dashboard-project-input .glass-card:focus,
.proj-morph-glass #dashboard-project-input .glass-card:focus-visible {
	border-color: color-mix(in srgb, var(--siift-mid-accent) 72%, transparent);
	box-shadow:
		var(--shadow-glass-md),
		var(--glass-inner-glow),
		0 1px 0 color-mix(in srgb, white 80%, transparent),
		0 0 0 3px color-mix(in srgb, var(--siift-mid-accent) 28%, transparent);
	outline: none;
}

.dark .proj-morph-glass #dashboard-project-input .glass-card {
	border-color: color-mix(in srgb, var(--siift-mid-accent) 40%, transparent);
}

.dark .proj-morph-glass #dashboard-project-input .glass-card:hover,
.dark .proj-morph-glass #dashboard-project-input .glass-card:focus,
.dark .proj-morph-glass #dashboard-project-input .glass-card:focus-visible {
	border-color: color-mix(in srgb, var(--siift-mid-accent) 62%, transparent);
}