/* HP public modal shell — overlay above an unchanged page. No native <dialog>. */

:root {
	--hp-z-background: 0;
	--hp-z-decorative: 10;
	--hp-z-content: 20;
	--hp-z-cursor: 30;
	--hp-z-header: 100;
	--hp-z-dropdown: 200;
	--hp-z-modal-backdrop: 900;
	--hp-z-modal-panel: 910;
}

.hp-modal-layer {
	position: fixed;
	inset: 0;
	z-index: var(--hp-z-modal-backdrop);
	display: flex;
	align-items: center;
	justify-content: center;
	padding:
		max(0.75rem, env(safe-area-inset-top, 0px))
		max(0.75rem, env(safe-area-inset-right, 0px))
		max(0.75rem, env(safe-area-inset-bottom, 0px))
		max(0.75rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
}

.hp-modal-layer[hidden] {
	display: none !important;
}

.hp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.hp-modal-panel {
	position: relative;
	z-index: var(--hp-z-modal-panel);
	max-width: 100%;
	box-sizing: border-box;
}

body.is-hp-modal-open {
	overflow: hidden;
}

.hp-modal-panel .holon-slim-scroll {
	--holon-slim-scroll-thumb: color-mix(in srgb, var(--hp-brand-holon, #85bfef) 70%, transparent);
	--holon-slim-scroll-track: transparent;
}