/*
 * The wide desktop layout of the organiser pages (261108-vfr). Loaded after squads-org.css on the start page, the flow steps 2 to 4
 * and the organiser's squad page, and nowhere else. Layout, plus the squad page header and timeline dots, in tokens only: no hex
 * literal, no font, no motion (colours come from the --exo-* tokens in squads-org.css, which follow the call-to-action tokens
 * printed by PHP).
 *
 * Why a separate file: the organiser gate (squads.css + squads-org.css, 10,240 B gz in tools/check-budgets.sh) is never raised
 * silently, so the new rules live here under their own gate (the measured gzip -9 size + about 15%, rounded up to 64 B), by the
 * orchestrator's decision. The start and flow rules sit in the 60rem media query so their phone layout is untouched. The squad
 * page's header, column wrappers and timeline dots are new markup and are styled for phones too; its two-column grid is wide only.
 * tools/check-budgets.sh also gates the whole organiser page total.
 */

/* The organiser's squad page: the dark "private page" header (the mockup's privacy bar), the two columns and the timeline dots. */
.exsq-dash .exo-live {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 12px 16px;
	padding: 18px 22px;
	border-radius: 14px;
	background: var(--exo-ink);
	box-shadow: none;
	color: var(--exo-seg);
}

.exo-lock {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--exo-card);
}

.exo-privtxt,
.exo-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.exo-privtxt {
	gap: 4px;
}

/* The shared reset zeroes list-item padding, which left the price ladder text on its border. */
.exsq-org .exo-cell {
	padding: 12px;
}

.exo-kicker {
	font-size: 13px;
	font-weight: 600;
}

.exo-ctrl {
	font-size: 14px;
}

.exsq-org .exo-btn.exo-pagebtn,
.exsq-org .exo-btn.exo-pagebtn:hover {
	grid-column: 1 / -1;
	background: var(--exo-card);
	box-shadow: none;
	color: var(--exo-ink);
}

.exo-cols,
.exo-col {
	gap: 22px;
}

.exo-cols {
	display: flex;
	flex-direction: column;
}

.exo-tl .done .exo-td {
	border-color: var(--exo-ink);
	background: var(--exo-ink);
	color: var(--exo-card);
}

.exo-tl .stopped .exo-td {
	border-color: var(--exo-seg);
	background: var(--exo-seg);
	color: var(--exo-muted);
}

.exo-tl .cur strong {
	color: var(--exo-accent);
}

@media (min-width: 60rem) {
	/* The organiser's squad page: wide, the header as one row, the cards in two columns. */
	.exsq-wrap.exsq-org.exsq-dash {
		max-width: 73.75rem;
	}

	.exsq-dash .exo-live {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.exsq-org .exo-btn.exo-pagebtn,
	.exsq-org .exo-btn.exo-pagebtn:hover {
		grid-column: auto;
		width: auto;
		padding: 0 22px;
	}

	.exo-cols {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
		gap: 32px;
	}

	/* Start: the live preview sticks on the left, the form is on the right. Grid placement only, so the phone order is unchanged. */
	.exsq-wrap.exsq-org.exo-start:not([data-exsq-edit]) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-content: start;
		gap: 22px 32px;
		max-width: 73.75rem;
	}

	.exo-start:not([data-exsq-edit]) > * {
		grid-column: 2;
		min-width: 0;
	}

	.exo-start > .exo-sprite {
		position: absolute;
	}

	.exo-start:not([data-exsq-edit]) > .exo-top {
		grid-column: 1 / -1;
	}

	.exo-start > .exo-hero {
		position: sticky;
		top: 1rem;
		grid-column: 1;
		grid-row: 2 / span 5;
		align-self: start;
	}

	.exo-hero .exo-tee {
		flex-basis: 8.5rem;
	}

	.exo-hero .exo-tee-m {
		flex-basis: 12rem;
	}

	/* The primary button is no longer a bar pinned to the thumb zone. */
	.exo-start .exo-cta {
		position: static;
		margin: 0 0 24px;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	/* The edit variant has no preview: one centred column. */
	.exsq-wrap.exsq-org.exo-start[data-exsq-edit] {
		max-width: 42rem;
	}

	/* Flow steps 2 to 4: the page widens, the content stays a centred column and the design cards spread over 3 or 4 columns. */
	.exsq-wrap.exsq-org.exo-flow {
		max-width: 73.75rem;
	}

	.exo-flow > :not(.exo-top, .exo-sprite) {
		width: 100%;
		max-width: 42rem;
		margin-inline: auto;
	}

	.exo-flow > form:has(> .exo-grid) {
		max-width: none;
	}

	.exo-flow > form > :not(.exo-grid) {
		width: 100%;
		max-width: 42rem;
		margin-inline: auto;
	}

	.exo-flow .exo-grid {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	}

	.exo-flow .exo-cta {
		position: static;
		padding: 0;
		background: none;
		box-shadow: none;
	}
}