/*
 * FORMS.CSS
 * The narrow form pages: log in / sign up (.jm-auth), account (.jm-account), join (.jm-join).
 * Log in / sign up also appears as a pop-up (.jm-auth--popup); the welcome offer is a pop-up (.jm-welcome).
 */

.jm-auth,
.jm-account {
	max-width: 520px;
}

.jm-auth h1 {
	text-align: center;
}

/* ---------- The floating card: one neat block in the middle of the page (Nick, 23 Oct) ----------
   Used by the join page (every screen) and the wizard's "First, you" step. .jm-floatpage centres it;
   .jm-floatcard is the block. --fill: on phones it fills the screen, with its last row (the button) at the bottom. */

.jm-floatpage {
	display: grid;
	place-items: center;
	max-width: 680px;
	min-height: calc(100dvh - var(--jm-header-height));
	margin: 0 auto;
}

/* Form fields inside a card read left to right, as everywhere else. */
.jm-floatcard .jm-field {
	text-align: left;
}

.jm-floatcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--jm-space-5) var(--jm-space-4);
	border-radius: var(--jm-radius-block);
	background: var(--jm-colour-header);   /* the same dark block as the Members page and Account (Nick, 24 Oct) */
	box-shadow: var(--jm-shadow-2);
	text-align: center;
}

.jm-floatcard h1 {
	margin-top: 0;
}

@media (max-width: 599px) {
	.jm-page:has(.jm-floatcard--fill),
	.jm-floatpage:has(.jm-floatcard--fill) {
		padding: 0;
	}

	.jm-floatcard--fill {
		min-height: calc(100dvh - var(--jm-header-height));
		border-radius: 0;
		box-shadow: none;
	}

	.jm-floatcard--fill > :last-child {
		margin-top: auto;   /* the button sits at the bottom of the screen */
	}
}

/* ---------- Join page (templates/join.php, join.js): each choice in its own box (button, with its countdown and
   dates under it): stacked on phones, up to two side by side (even widths) on bigger screens. ---------- */

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

.jm-join__option {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 100%;
}

.jm-join__option .jm-btn {
	width: 100%;
}

@media (min-width: 600px) {
	.jm-join__option {
		flex: 0 1 calc(50% - var(--jm-space-3) / 2);   /* up to two, even widths */
	}
}

/* Which group a competition is in (Account, when several groups show). */
.jm-join__group {
	margin: 0 0 var(--jm-space-1);
	font-size: var(--jm-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jm-colour-text-soft);
}

.jm-join__when,
.jm-join__small {
	margin: var(--jm-space-2) 0 0;
	font-size: var(--jm-text-s);
	color: var(--jm-colour-text-soft);
}

.jm-join__when strong {
	color: var(--jm-colour-action);
	font-variant-numeric: tabular-nums;   /* the ticking numbers don't jiggle */
}

.jm-section {
	margin: 0 0 var(--jm-space-5);
	padding: var(--jm-space-4);
	background: var(--jm-colour-header);
	border-radius: var(--jm-radius-block);
}

.jm-section__title {
	font-size: var(--jm-text-m);
}

/* Round, never squashed (fixed square, picture cropped to fill), centred. */
.jm-account__photo {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--jm-shadow-2);
}
.jm-account__photo[hidden] { display: none; }

/* The photo is a button: tap it to change it (site.js 8). With no photo yet, a dotted circle with "Add a photo". */
.jm-account__photo-button {
	display: block;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--jm-colour-text);
	font: inherit;
	cursor: pointer;
	text-align: center;
}

.jm-account__photo-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border: 2px dashed var(--jm-colour-required);
	border-radius: 50%;
	font-size: var(--jm-text-s);
}
.jm-account__photo-empty[hidden] { display: none; }

.jm-account__help {
	margin: var(--jm-space-2) 0 0;
	text-align: center;
	font-size: var(--jm-text-helper);
	color: var(--jm-colour-helper);
}


/* ---------- Log in / Sign up forms (page and pop-up) ---------- */

/* A label that wraps its input: words on top, box below. */
.jm-field__label:has(input:not([type="checkbox"])) {
	display: flex;
	flex-direction: column;
	gap: var(--jm-space-1);
}

.jm-auth__panel .jm-btn--primary { width: 100%; }

.jm-auth__small {
	text-align: center;
	font-size: var(--jm-text-s);
}

/* Spam guard: off-screen, never seen by people. */
.jm-auth__trap {
	position: absolute;
	left: -9999px;
}

/* ---------- Welcome offer (pop-up) ---------- */

.jm-welcome {
	text-align: center;
}

.jm-welcome__title {
	margin-top: 0;
}

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


/* ============================================================
 * MY MIXES (account page): one line per mix, cover thumbnail, where it is, Edit / Continue
 * ============================================================ */

.jm-mymixes {
	list-style: none;
	margin: 0 0 var(--jm-space-4);
	padding: 0;
}

.jm-mymixes__item {
	display: flex;
	align-items: center;
	gap: var(--jm-space-3);
	padding: var(--jm-space-2) 0;
	border-bottom: 1px solid var(--jm-colour-line);
}

.jm-mymixes__cover {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.jm-mymixes__cover--blank { background: var(--jm-colour-chip); }

.jm-mymixes__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	font-size: var(--jm-text-s);
}

.jm-mymixes__text span {
	color: var(--jm-colour-text-soft);
	font-size: var(--jm-text-xs);
}

.jm-mymixes__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--jm-space-2);
}

/* Phones: the buttons drop under the title so nothing gets squeezed. */
@media (max-width: 480px) {
	.jm-mymixes__item { flex-wrap: wrap; }
	.jm-mymixes__actions { width: 100%; justify-content: flex-end; }
}