/* Small State pop-ups. Uses the theme's color variables when present. */
.sspp-lock, .sspp-lock body { overflow: hidden; }
.sspp { position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; }
.sspp--modal { align-items: center; padding: 20px; }
.sspp--sheet { align-items: flex-end; }
.sspp__backdrop {
	position: absolute; inset: 0; background: rgba(43, 49, 51, .55);
	opacity: 0; transition: opacity .25s ease;
}
.sspp__dialog {
	position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
	background: var(--c-page-bg, #fff); color: var(--c-text, #414141);
	border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); text-align: center;
	opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .25s ease;
	outline: none;
}
.sspp--sheet .sspp__dialog {
	max-width: none; max-height: 60vh; border-radius: 18px 18px 0 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transform: translateY(100%); opacity: 1;
}
.sspp.is-open .sspp__backdrop { opacity: 1; }
.sspp.is-open .sspp__dialog { opacity: 1; transform: none; }
.sspp__grab { display: none; }
.sspp--sheet .sspp__grab {
	display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--c-card-border, #afb9c0);
	margin: 10px auto 0;
}
.sspp__close {
	position: absolute; top: 6px; right: 6px; z-index: 2; width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--c-heading, #414141);
	font-size: 28px; line-height: 1; cursor: pointer;
}
.sspp__close:focus-visible, .sspp__btn:focus-visible, .sspp__link:focus-visible { outline: 3px solid var(--c-announce-link, #8a2456); outline-offset: 2px; }
.sspp__badge {
	position: absolute; top: 14px; left: 14px; z-index: 2; padding: 3px 8px; border-radius: 3px;
	background: #fff3c4; color: #5c4400; font: 700 11px/1.3 'Anonymous Pro', monospace; letter-spacing: 1px; text-transform: uppercase;
}
.sspp__img img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.sspp--modal .sspp__img img { border-radius: 10px 10px 0 0; }
.sspp--sheet .sspp__img img { max-height: 22vh; margin-top: 10px; }
.sspp__body { padding: 26px 26px 28px; }
.sspp--sheet .sspp__body { padding: 18px 20px 22px; }
.sspp__title { font-family: var(--font-display, 'Belleza', Georgia, serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 10px; padding: 0 30px; color: var(--c-heading, #414141); }
.sspp__text { font-family: var(--font-label, 'Antic', sans-serif); font-size: 18px; line-height: 1.4; margin: 0 0 10px; white-space: pre-line; }
.sspp__note { font-family: var(--font-body, 'Anonymous Pro', monospace); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted, #5e7280); margin: 0 0 14px; }
.sspp__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px;
	padding: 14px 26px; border-radius: 4px; text-decoration: none;
	background: var(--c-btn-bg, #daadc7); color: var(--c-btn-text, #f7f7f5);
	font: 700 16px/1.2 var(--font-body, 'Anonymous Pro', monospace); letter-spacing: 2px; text-transform: uppercase;
}
.sspp__btn:hover { background: var(--c-btn-hover-bg, #c98fb0); }
.sspp__link {
	display: block; width: max-content; max-width: 100%; margin: 14px auto 0; padding: 6px 4px;
	color: var(--c-link, #b0457f); font-family: var(--font-body, 'Anonymous Pro', monospace); font-weight: 700;
	text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 767px) {
	.sspp__title { font-size: 24px; }
	.sspp__text { font-size: 16px; }
	.sspp__btn { display: flex; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.sspp__backdrop, .sspp__dialog { transition: none; }
}
