/*
 * WIZARD.CSS
 * The submit wizard (/submit/): steps, the window of dotted slots (Cat), and the editor pop-ups.
 * Slot roles come from tokens: required = sand, flavour = teal, extra = off-white (Cat Wireframes doc, section 3).
 */


/* ============================================================
 * 1. THE PAGE AND ITS STEPS
 * ============================================================ */

.jm-wizard {
	max-width: 720px;
	padding-top: var(--jm-space-3);   /* one even step between header, "For …", tabs, you and the slots */
}

.jm-wizard__head {
	margin-bottom: var(--jm-space-3);
	text-align: center;
}

.jm-wizard__head > p {
	margin: 0 0 var(--jm-space-3);
}

.jm-wizard__saved,
.jm-wizard__for,
.jm-wizard__lead,
.jm-wizard__note {
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-s);
}

.jm-steps {
	display: flex;
	justify-content: center;
	gap: var(--jm-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jm-steps__step {
	padding-bottom: var(--jm-space-1);
	border-bottom: 2px solid transparent;
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-s);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jm-steps__step.is-active {
	color: var(--jm-colour-heading);
	border-bottom-color: var(--jm-colour-heading);
}

.jm-wizard__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--jm-space-2);
	margin-top: var(--jm-space-3);
}

/* Your photo and name at the top of the core step: tap to change them (quick-edit pop-up). */
.jm-wizard__you-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--jm-space-2);
	width: fit-content;
	margin: 0 auto var(--jm-space-3);
	padding: var(--jm-space-1) var(--jm-space-3);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--jm-text-s);
	cursor: pointer;
}

.jm-wizard__you-strip:hover,
.jm-wizard__you-strip:focus-visible {
	background: var(--jm-colour-chip);
}

/* Stand-ins only: "Made by" under the strip (wizard.js; jm-core wizard.php 4b). */
.jm-wizard__madeby {
	margin: 0 0 var(--jm-space-3);
}

.jm-wizard__madeby input[type="text"] {
	margin-top: var(--jm-space-2);
}

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

.jm-wizard__edit {
	font-size: var(--jm-text-xs);
	text-decoration: underline;
	opacity: 0.6;
}

/* The quick-edit pop-up's current photo (also the account photo pop-up). */
.jm-editor__photo {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto var(--jm-space-3);
	border-radius: 50%;
	object-fit: cover;
}
.jm-editor__photo[hidden] { display: none; }


/* ============================================================
 * 2. THE WINDOW OF SLOTS (dotted outlines with a "+", Cat)
 * Cover and tracklist are squares; title, links and vibes are wide.
 * ============================================================ */

.jm-slots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jm-space-3);
}

.jm-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jm-space-1);
	min-height: 84px;
	padding: var(--jm-space-3);
	border: 2px dashed var(--jm-colour-required);
	border-radius: var(--jm-radius-m);
	background: transparent;
	color: var(--jm-colour-text);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--jm-motion-time), background var(--jm-motion-time);
}

.jm-slot:hover { background: color-mix(in srgb, var(--jm-colour-required) 8%, transparent); }

/* A part that's handed over (sent mix, submissions closed): dimmed, a lock, not tappable. */
.jm-slot.is-locked {
	cursor: default;
	opacity: 0.6;
	border-style: solid;
}

.jm-slot.is-locked:hover { background: none; }
.jm-slot--tracks.is-locked:not(:disabled) { cursor: pointer; }   /* still opens, for the Real Humans tick */
.jm-slot.is-locked .jm-slot__plus { display: none; }
.jm-slot.is-locked .jm-slot__label::after { content: " 🔒"; }

.jm-slot--flavour { border-color: var(--jm-colour-flavour); }
.jm-slot--extra   { border-color: var(--jm-colour-extra); }

.jm-slot--cover,
.jm-slot--tracks {
	aspect-ratio: 1 / 1;
}

.jm-slot--title,
.jm-slot--links,
.jm-slot--vibes {
	grid-column: 1 / -1;
}

/* "Saved as you go · Start fresh": one small line under the slots. */
.jm-wizard__saved {
	margin: var(--jm-space-3) 0 0;
	font-size: var(--jm-text-xs);
	text-align: center;
	opacity: 0.8;
}

.jm-slot__label {
	color: var(--jm-colour-required);
	font-size: var(--jm-text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.jm-slot__plus {
	font-size: 28px;
	line-height: 1;
	color: var(--jm-colour-required);
}

/* Filled: solid outline, no "+", the content shows. */
.jm-slot--filled {
	border-style: solid;
	background: var(--jm-colour-header);
}

.jm-slot--filled .jm-slot__plus { display: none; }

/* Done (passes its check): a small tick in the corner. */
.jm-slot.is-done::after {
	content: "✓";
	position: absolute;
	top: var(--jm-space-1);
	right: var(--jm-space-2);
	color: var(--jm-colour-flavour);
	font-weight: 700;
}

.jm-slot--cover.jm-slot--filled {
	padding: 0;
	overflow: hidden;
}

.jm-slot--cover.jm-slot--filled .jm-slot__label { display: none; }

.jm-slot__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jm-slot__text {
	font-weight: 600;
}

.jm-slot__warn {
	color: var(--jm-colour-scale-1);
	font-size: var(--jm-text-xs);
}

.jm-slot__view {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--jm-space-1);
}


/* ============================================================
 * 3. EDITOR POP-UPS (each slot's own little form)
 * ============================================================ */

.jm-editor__title {
	margin-top: 0;
	text-align: center;
}

.jm-editor__help,
.jm-editor__count {
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-s);
}

.jm-editor__actions {
	display: flex;
	justify-content: center;
	gap: var(--jm-space-2);
	margin: var(--jm-space-4) 0 0;
}

.jm-editor__actions .jm-btn--primary { min-width: 140px; }

.jm-editor__cover {
	display: block;
	width: 140px;
	margin: 0 auto var(--jm-space-3);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--jm-radius-s);
}

.jm-editor textarea {
	width: 100%;
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 1.5px solid var(--jm-colour-required);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
}

/* Links: one row per service, with the service it was recognised as. */
.jm-links__row {
	display: flex;
	align-items: center;
	gap: var(--jm-space-2);
	margin: 0 0 var(--jm-space-2);
}

.jm-links__row input {
	flex: 1;
	min-height: 42px;
	padding: 0 var(--jm-space-3);
	border: 1.5px solid var(--jm-colour-required);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
}

.jm-links__service {
	min-width: 90px;
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-xs);
}

/* Tracklist rows: artist and song side by side; an asterisk marks a line to check. */
.jm-tracklist--edit {
	max-height: 50vh;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jm-track--edit {
	display: grid;
	grid-template-columns: 14px 1fr 1fr 28px;
	align-items: center;
	gap: var(--jm-space-1);
	padding: 2px 0;
}

.jm-track--edit input {
	min-width: 0;
	min-height: 36px;
	padding: 0 var(--jm-space-2);
	border: 1px solid var(--jm-colour-line);
	border-radius: var(--jm-radius-s);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
	font-size: var(--jm-text-s);
}

.jm-track__flag {
	visibility: hidden;
	color: var(--jm-colour-scale-1);
	font-weight: 700;
}

.jm-track--edit.is-suspect .jm-track__flag { visibility: visible; }
.jm-track--edit.is-suspect input { border-color: var(--jm-colour-scale-1); }

.jm-track__delete {
	background: none;
	border: 0;
	color: var(--jm-colour-text-soft);
	font-size: 20px;
	cursor: pointer;
}

/* Vibe picker: an even grid of same-width pills (3 x 6 on wider screens, 2 x 9 on phones).
   No tick boxes: hover highlights, tap selects. The real tick box is hidden but still there
   for keyboards and screen readers. */
.jm-vibe-picker {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--jm-space-2);
}

/* .jm-chip (the tappable tags) lives in 20-components/chip.css. */

/* Phones: the Core window fits one screen without scrolling (Nick, 19 Oct): shorter wide slots, tighter gaps. */
@media (max-width: 699px) {
	.jm-slots { gap: var(--jm-space-2); }

	.jm-slot {
		min-height: 60px;
		padding: var(--jm-space-2);
	}
}

/* Phones: 2 x 9, compact enough to fit without scrolling. */
@media (max-width: 699px) {
	.jm-vibe-picker {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	.jm-chip {
		min-height: 32px;
		font-size: var(--jm-text-xs);
	}

	.jm-editor:has(.jm-vibe-picker) .jm-editor__help { margin: 0 0 var(--jm-space-2); }
}


/* ============================================================
 * 4. THE BUILDER STEP (the leaflet as it stands, inside the page)
 * ============================================================ */

.jm-wizard__preview .jm-leaflet {
	margin: 0 auto;
}


/* ============================================================
 * 5. THE COMPETITION CHOICE
 * ============================================================ */

.jm-pick {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jm-pick__item {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--jm-space-2);
	padding: var(--jm-space-3) var(--jm-space-4);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-header);
	color: var(--jm-colour-text);
	text-decoration: none;
}

.jm-pick__item span { color: var(--jm-colour-text-soft); }


/* ============================================================
 * 6. THE BUILDER (Leaflet step): + slots, tap to edit, swap
 * Flavour slots use the flavour role (teal), as in Cat's wizard.
 * ============================================================ */

.jm-block--empty {
	display: flex;
	padding: var(--jm-space-3);
}

.jm-fslot {
	flex: 1;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 80px;
	margin: var(--jm-space-2) 0;
	border: 2px dashed var(--jm-colour-flavour);
	border-radius: var(--jm-radius-m);
	background: transparent;
	color: var(--jm-colour-flavour);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--jm-motion-time);
}

.jm-fslot--front { margin: 0; }

.jm-fslot:hover { background: color-mix(in srgb, var(--jm-colour-flavour) 12%, transparent); }

/* A filled block (on the leaflet or in the Tray): tap to edit (outline on hover), swap icon top-right. */
.jm-leaflet--builder [data-jm-fblock],
.jm-tray [data-jm-fblock] {
	position: relative;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color var(--jm-motion-time);
}

.jm-leaflet--builder [data-jm-fblock]:hover,
.jm-tray [data-jm-fblock]:hover { outline-color: var(--jm-colour-flavour); }

/* ---------- The Tray (Stage 8.2): one waiting block, under a divider ----------
 * Neutral, not the flavour teal: a grey line and the mix's own colours inside (palette roles only).
 * Phones: full width, stacked like the rest. Desktop: a neat centred box (media query at the end). */
.jm-tray {
	width: 100%;
	margin-top: var(--jm-space-5);
	padding-top: var(--jm-space-4);
	border-top: 1px solid var(--jm-colour-line);
	text-align: center;
}

.jm-tray__title {
	margin-bottom: var(--jm-space-3);
	color: var(--jm-colour-text);
}

.jm-tray__item {
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 1px solid var(--jm-colour-light-2);
	border-radius: var(--jm-radius-m);
	background: var(--jm-tone-bg);
	color: var(--jm-tone-ink);
	text-align: left;
	max-height: 18em;               /* a long write-up waiting here shows its start, not the whole story */
	overflow: hidden;
}

.jm-tray__item .jm-tagline--line,
.jm-tray__item .jm-quote--line { text-align: center; }

.jm-fslot--tray {
	margin: 0;
	border-color: var(--jm-colour-light-2);
	color: var(--jm-colour-light-2);
}

.jm-fslot--tray:hover { background: color-mix(in srgb, var(--jm-colour-light-2) 12%, transparent); }

.jm-swap {
	position: absolute;
	top: var(--jm-space-2);
	right: var(--jm-space-2);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jm-colour-chip);
	color: var(--jm-colour-dark-1);
	font-size: 15px;
	cursor: pointer;
	box-shadow: var(--jm-shadow-1);
}

/* Look switches above the leaflet. */
.jm-builder__looks {
	display: flex;
	justify-content: center;
	gap: var(--jm-space-3);
	margin: 0 0 var(--jm-space-3);
	font-size: var(--jm-text-s);
}

.jm-builder__looks label {
	display: inline-flex;
	align-items: center;
	gap: var(--jm-space-1);
	cursor: pointer;
}

.jm-builder__looks input { accent-color: var(--jm-colour-flavour); }

/* The Real Humans tick at the foot of the tracklist editor (8.4a). */
.jm-humans-tick {
	margin-top: var(--jm-space-4);
	padding-top: var(--jm-space-3);
	border-top: 1px solid var(--jm-colour-line);
}

.jm-humans-tick label { display: flex; gap: var(--jm-space-2); align-items: flex-start; }

.jm-editor__extras {             /* small actions under Done: Remove block · Move to Tray */
	display: flex;
	justify-content: center;
	gap: var(--jm-space-4);
	margin: var(--jm-space-3) 0 0;
}

.jm-editor__remove {
	display: block;
	margin: 0;
	background: none;
	border: 0;
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-xs);
	text-decoration: underline;
	cursor: pointer;
}

.jm-editor__remove:disabled { cursor: default; opacity: 0.5; text-decoration: none; }

/* A block's editor (Nick, 30 Oct): a thumbnail of the finished block at the top, drawn by the server with the theme's
   own markup (wizard.js wirePreview). The block is drawn at a real square's size and scaled down, so the words keep
   their proportions. */
.jm-editor__preview {
	width: 180px;
	height: 180px;
	margin: 0 auto var(--jm-space-4);
	overflow: hidden;
	border-radius: var(--jm-radius-block);
	box-shadow: var(--jm-shadow-1);
}

.jm-editor__preview .jm-leaflet--thumb {
	--jm-block: 300px;
	width: 300px;
	height: 300px;
	transform: scale(0.6);
	transform-origin: top left;
}

.jm-editor__preview .jm-leaflet--thumb > .jm-block { width: 300px; height: 300px; aspect-ratio: auto; }

.jm-editor__preview-empty {
	display: grid;
	place-items: center;
	height: 100%;
	margin: 0;
	padding: var(--jm-space-3);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-xs);
	text-align: center;
}

/* The customization bar's texture picker: greyed out and not usable while Use image / texture is off. */
.jm-builder__looks { flex-wrap: wrap; align-items: center; }

.jm-builder__texture {
	min-height: 32px;
	padding: 0 var(--jm-space-2);
	border: 1px solid var(--jm-colour-line);
	border-radius: var(--jm-radius-s);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
	font-size: var(--jm-text-s);
	transition: opacity var(--jm-motion-time);
}

.jm-builder__texture.is-off { opacity: 0.5; }
.jm-builder__looks [data-jm-look-note]:empty { display: none; }

/* The Article in the wizard: with one space filled, the other "+" is a slim strip in its place (Nick, 30 Oct). */
.jm-fslot--slim {
	flex: none;
	min-height: 0;
	height: 2.25rem;
	margin: var(--jm-space-2) 0;
	font-size: 20px;
}

/* The Leaflet step shows the full-width leaflet, so the page widens while it is open. */
.jm-wizard:has([data-jm-step="builder"]:not([hidden])) {
	max-width: none;
}

.jm-wizard [data-jm-step="builder"] .jm-wizard__note {
	text-align: center;
}


/* Desktop: the leaflet in the Leaflet step is only as wide as itself, centred
   (it was stretching to the page, leaving a big block of colour on the right).
   The Tray sits under it as a neat centred box. */
@media (min-width: 1000px) {
	.jm-wizard__preview {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.jm-tray {
		max-width: 480px;
	}

	.jm-wizard__preview .jm-leaflet {
		width: max-content;
	}
}