/* Joe's Popups: layout only. Words, buttons and inputs take the theme's own
   styles (and its --ground / --ink tokens when it has them). */
.jp {
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 32px 28px 28px;
	border: 0;
	border-radius: 10px;
	background: var(--ground, #fff);
	color: var(--ink, #1d2327);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.jp::backdrop { background: rgba(15, 23, 42, 0.55); }
.jp--slide-in {
	position: fixed;
	inset: auto 16px 16px auto;
	margin: 0;
	width: min(360px, calc(100vw - 32px));
	padding: 24px 22px 22px;
	z-index: 100000;
}
.jp--inline {
	width: auto;
	margin: 2.5em 0;
	box-shadow: none;
	border: 1px solid rgba(15, 23, 42, 0.14);
}
.jp__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}
.jp__close:hover, .jp__close:focus-visible { opacity: 1; }
.jp__body > :first-child { margin-top: 0; }
.jp__body > :last-child { margin-bottom: 0; }
.jp [data-jp-form] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1em; }
.jp [data-jp-form] input[type="email"] { flex: 1 1 200px; min-width: 0; }
.jp [data-jp-error] { flex-basis: 100%; margin: 0; }
.jp[data-state="success"] [data-jp-form],
.jp[data-state="success"] [data-jp-hide-on-success] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.jp[open] { animation: jp-in 0.18s ease-out; }
	@keyframes jp-in { from { opacity: 0; transform: translateY(8px); } }
}