/*
 * MODAL.CSS
 * .jm-modal: the one pop-up used everywhere (leaflet now; login, notices and flavour blocks later).
 * The page behind blurs, dims and gets a fine grain; the card rises a few pixels into view (Pop-ups and Motion doc).
 */


/* ============================================================
 * 1. THE SHELL (covers the screen while open)
 * ============================================================ */

.jm-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 2vh 2vw;
}

.jm-modal[hidden] {
	display: none;
}


/* ============================================================
 * 2. THE BACKDROP: blur, dim, grain
 * ============================================================ */

.jm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--jm-backdrop-dim);
	-webkit-backdrop-filter: blur(var(--jm-backdrop-blur));
	backdrop-filter: blur(var(--jm-backdrop-blur));
	opacity: 0;
	transition: opacity var(--jm-motion-time) var(--jm-ease-out);
}

/* Fine film grain over the dimmed page (a tiny noise image drawn by the browser). */
.jm-modal__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--jm-backdrop-grain);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}

.jm-modal.is-open .jm-modal__backdrop {
	opacity: 1;
}


/* ============================================================
 * 3. THE CARD (what pops up)
 * Arrives with a tiny rise and a fade; leaves with a quick fade.
 * ============================================================ */

.jm-modal__card {
	position: relative;
	width: min(var(--jm-leaflet-width), 100%);
	max-height: 96vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--jm-shadow-3);
	outline: none;
	opacity: 0;
	transform: translateY(var(--jm-motion-rise));
	transition: opacity var(--jm-motion-time) var(--jm-ease-out), transform var(--jm-motion-time) var(--jm-ease-out);
}

.jm-modal.is-open .jm-modal__card {
	opacity: 1;
	transform: none;
}

/* A leaflet sizes itself (4 blocks wide, 2 tall), so the card just wraps it,
   and the leaflet runs its own entrance (leaflet.css section 9), so the card stays still. */
.jm-modal__card:has(.jm-leaflet) {
	opacity: 1;
	transform: none;
	transition: none;
	box-shadow: none;
}

@media (min-width: 1000px) {
	.jm-modal__card:has(.jm-leaflet) {
		width: auto;
		max-height: none;
		overflow: visible;
		margin: auto;   /* centred; on a window shorter than the leaflet it starts at the top and the pop-up scrolls */
	}

	/* The leaflet's squares stop shrinking at --jm-block-unit-min (00-tokens.css), so on a short window the pop-up
	   scrolls rather than squeezing the words out of the squares (Nick, 30 Oct). */
	.jm-modal:has(.jm-leaflet) { overflow-y: auto; }
	.jm-modal:has(.jm-leaflet) .jm-modal__backdrop { position: fixed; }
}

/* While a leaflet is loading, a quiet placeholder keeps the space. */
.jm-modal__loading {
	padding: var(--jm-space-6);
	text-align: center;
	background: var(--jm-colour-header);
	color: var(--jm-colour-text-soft);
}


/* ============================================================
 * 4. PHONES: the pop-up fills the screen (Brief A5)
 * ============================================================ */

@media (max-width: 700px) {
	.jm-modal {
		padding: 0;
	}

	.jm-modal__card {
		width: 100%;
		height: 100dvh;
		max-height: none;
		box-shadow: none;
	}
}

/* A leaflet switches to its phone pager below 1000px, so its pop-up fills the screen from there too
   (covering the site header and menu; the pager bar and X are all it needs). */
@media (max-width: 999px) {
	.jm-modal:has(.jm-leaflet) {
		padding: 0;
	}

	.jm-modal__card:has(.jm-leaflet) {
		width: 100%;
		height: 100dvh;
		max-height: none;
	}

	/* Staff only: WordPress's admin bar sits across the top of the screen, so the leaflet starts below it
	   and keeps its pager visible (Nick, 20 Oct). WordPress sets the bar's height in this variable.
	   Temporary: the admin bar is to be hidden on the front end later (wp-admin moves into the Control Room menu). */
	body.admin-bar .jm-modal:has(.jm-leaflet) {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	body.admin-bar .jm-modal__card:has(.jm-leaflet) {
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px));
	}
}

/* Below 600px WordPress lets the admin bar scroll away; keep it pinned so the offset above always matches. */
@media (max-width: 600px) {
	body.admin-bar #wpadminbar {
		position: fixed;
	}
}


/* ============================================================
 * 5. SMALL POP-UPS (log in, welcome offer, wizard editors, the home filter)
 * A narrow card in the header colour. On phones it fills the screen
 * like every pop-up (section 4) and the content sits in the middle.
 * ============================================================ */

.jm-modal__card:has(.jm-auth--popup),
.jm-modal__card:has(.jm-welcome),
.jm-modal__card:has(.jm-editor),
.jm-modal__card:has(.jm-filter) {
	width: min(var(--jm-popup-width), 100%);
	padding: var(--jm-space-5) var(--jm-space-4) var(--jm-space-4);
	background: var(--jm-colour-header);
	border-radius: var(--jm-radius-block);
}

@media (max-width: 700px) {
	.jm-modal__card:has(.jm-auth--popup),
	.jm-modal__card:has(.jm-welcome),
	.jm-modal__card:has(.jm-editor) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 0;
	}
}

/* The X in the corner of a small pop-up. */
.jm-auth__close {
	position: absolute;
	top: var(--jm-space-2);
	right: var(--jm-space-3);
	background: none;
	border: 0;
	color: var(--jm-colour-text);
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

/* The tracklist editor needs a little more room. */
.jm-modal__card:has([data-jm-editor="tracks"]) {
	width: min(560px, 100%);
}


/* ============================================================
 * 6. THE PICKER (a small drop-down menu next to a button)
 * One shared component: the builder's "+" and swap menus now, the
 * shelf's box picker later (Blocks Everywhere doc). Placed by site.js.
 * ============================================================ */

.jm-picker {
	position: fixed;
	z-index: 120;
	min-width: 180px;
	margin: 0;
	padding: var(--jm-space-1) 0;
	list-style: none;
	border-radius: var(--jm-radius-block);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-3);
}

.jm-picker__title {
	padding: var(--jm-space-2) var(--jm-space-3) var(--jm-space-1);
	color: var(--jm-colour-heading);
	font-size: var(--jm-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.jm-picker__option {
	display: block;
	width: 100%;
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 0;
	background: none;
	color: var(--jm-colour-text);
	font: inherit;
	font-size: var(--jm-text-s);
	text-align: left;
	cursor: pointer;
}

.jm-picker__option:hover,
.jm-picker__option:focus-visible { background: color-mix(in srgb, var(--jm-colour-flavour) 22%, transparent); }

.jm-picker__option:disabled { opacity: 0.4; cursor: default; background: none; }


/* ============================================================
 * 7. THE SECOND LAYER (a block's expanded view on top of the pop-up)
 * Same look as the first; sits above it. The cover pop-up gets a
 * wider card in the header colour.
 * ============================================================ */

.jm-modal--layer { z-index: 110; }

.jm-modal__card:has(.jm-coverpop) {
	width: min(900px, 100%);
	padding: 0;                               /* the cover sits flush to the edge (Nick, 24 Oct) */
	background: var(--jm-colour-header);
	border-radius: var(--jm-radius-block);
	overflow: hidden;
}

@media (max-width: 700px) {
	.jm-modal__card:has(.jm-coverpop) {
		overflow-y: auto;
	}
}

/* A Media block's video (site.js 5a): the player 16:9, flush to the card's edges, as wide as the screen allows. */
.jm-modal__card:has(.jm-mediapop) {
	width: min(960px, 100%, calc((100dvh - 4rem) * 16 / 9));
	padding: 0;
	background: #000;
	border-radius: var(--jm-radius-block);
	overflow: hidden;
}

.jm-mediapop__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.jm-mediapop .jm-auth__close {
	z-index: 1;
	top: var(--jm-space-2);
	right: var(--jm-space-2);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
}