/*
 * Shared stylesheet of the public squad pages (join, dashboard, proof, launch, hub).
 *
 * Budget: 10,240 B gzipped for the whole file (tools/check-budgets.sh).
 * Rules (pure Flatsome): no font-family of its own, so text inherits the Customizer body / heading fonts; colours come
 * from --exsq-primary / --exsq-secondary, printed inline from the Flatsome theme mods, never hard-coded. The primary
 * comes as three tokens printed together: --exsq-primary (borders, text), --exsq-primary-fill (backgrounds) and
 * --exsq-on-primary (the readable ink on that fill, computed by the server). Without the ink a button is an outline.
 * The primary buttons (.exsq-btn) fill through a second pair printed by the server, --exsq-cta and --exsq-on-cta (261108-vfr);
 * the dark button (.exsq-btn-dark) and the step numbers keep the primary pair; the ghost (.exsq-btn-alt) is the page ink on
 * transparent. Everything is
 * scoped under .exsq-wrap so nothing leaks into the theme. The only font declaration is the member-field @font-face the
 * join page prints for its preview zones.
 */
.exsq-wrap {
	--exsq-line: color-mix(in srgb, currentColor 22%, transparent);
	--exsq-soft: color-mix(in srgb, currentColor 6%, transparent);
	box-sizing: border-box;
	max-width: 30rem;
	margin: 0 auto;
	padding: 1rem 1rem 2.5rem;
}

.exsq-wrap *,
.exsq-wrap *::before,
.exsq-wrap *::after {
	box-sizing: inherit;
}

.exsq-wrap [hidden] {
	display: none !important;
}

.exsq-head {
	margin-bottom: 0.75rem;
	text-align: center;
}

.exsq-title {
	margin: 0 0 0.25rem;
}

.exsq-deadline {
	margin: 0;
	font-weight: 700;
	color: var(--exsq-primary, inherit);
}

.exsq-teaser {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	background: var(--exsq-soft);
	border-radius: 0.5rem;
}

.exsq-card {
	margin: 0 0 1rem;
	padding: 1rem;
	border: 1px solid var(--exsq-line);
	border-radius: 0.75rem;
}

.exsq-state {
	text-align: center;
}

/* Static preview: the garment photo with the squad's art and the live name / role over it. The box has the photo's shape (inline
   aspect-ratio) and the stage inside it is the photo zoomed around the print area, so the design is legible (261108-pyu). */
.exsq-preview {
	position: relative;
	margin: 0 0 1rem;
	line-height: 0;
	background: var(--exsq-soft);
	border-radius: 0.75rem;
	overflow: hidden;
}

.exsq-stage {
	position: absolute;
}

.exsq-garment {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* The squad's own design while the preview art is still being rendered. */
.exsq-design {
	margin: 0 0 1rem;
	padding: 0.75rem;
	text-align: center;
	background: var(--exsq-soft);
	border-radius: 0.75rem;
}

.exsq-design img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 0.5rem;
}

.exsq-design figcaption {
	margin-top: 0.5rem;
	font-size: 0.875em;
}

.exsq-price {
	margin: 0 0 0.75rem;
	font-weight: 700;
}

.exsq-art {
	position: absolute;
	object-fit: contain;
	margin: 0;
	pointer-events: none;
}

.exsq-zone {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* Form. 16px controls stop iOS from zooming the page on focus; 44px targets for thumbs. */
.exsq-form .exsq-field {
	margin: 0 0 0.9rem;
}

.exsq-form label,
.exsq-form legend {
	display: block;
	margin: 0 0 0.25rem;
	font-weight: 700;
}

.exsq-form .exsq-delivery {
	padding: 0;
	border: 0;
}

.exsq-form .exsq-delivery label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	font-weight: 400;
}

.exsq-form input[type="text"],
.exsq-form input[type="email"],
.exsq-form input[type="tel"],
.exsq-form select {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	font-size: 16px;
}

.exsq-static {
	font-weight: 700;
}

.exsq-own {
	margin: 0 0 0.5rem;
	padding: 0.75rem;
	border: 1px dashed var(--exsq-line);
	border-radius: 0.5rem;
}

.exsq-btn {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.7rem 1rem;
	text-align: center;
	background: var(--exsq-cta, transparent);
	border: 1px solid var(--exsq-cta, currentColor);
	border-radius: 0.5rem;
	cursor: pointer;
}

/* The ink, in every link state and above the theme's a:hover (0,1,1), so it never turns grey on the fill. */
.exsq-wrap .exsq-btn,
.exsq-wrap .exsq-btn:hover,
.exsq-wrap .exsq-btn:focus,
.exsq-wrap .exsq-btn:visited {
	color: var(--exsq-on-cta, inherit);
	text-decoration: none;
}

.exsq-btn:hover {
	opacity: 0.9;
}

/* The dark button ("Email me my link") keeps the primary pair. */
.exsq-btn.exsq-btn-dark {
	background: var(--exsq-primary-fill, transparent);
	border-color: var(--exsq-primary, currentColor);
}

.exsq-wrap .exsq-btn.exsq-btn-dark,
.exsq-wrap .exsq-btn.exsq-btn-dark:hover,
.exsq-wrap .exsq-btn.exsq-btn-dark:focus,
.exsq-wrap .exsq-btn.exsq-btn-dark:visited {
	color: var(--exsq-on-primary, inherit);
}

.exsq-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.exsq-msg {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--exsq-soft);
	border-left: 3px solid var(--exsq-secondary, currentColor);
	border-radius: 0.25rem;
}

.exsq-result input[type="text"] {
	width: 100%;
	min-height: 2.75rem;
	font-size: 16px;
}

/* Organiser dashboard. */
.exsq-dash {
	max-width: 42rem;
}

.exsq-share input[type="text"] {
	width: 100%;
	min-height: 2.75rem;
	font-size: 16px;
}

.exsq-hint {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	font-weight: 700;
	text-align: center;
	background: var(--exsq-soft);
	border-radius: 0.5rem;
}

.exsq-list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.exsq-chase-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--exsq-line);
}

.exsq-role,
.exsq-meta,
.exsq-note {
	font-size: 0.875em;
	opacity: 0.75;
}

.exsq-flag {
	padding: 0 0.4rem;
	font-size: 0.875em;
	font-weight: 700;
	color: var(--exsq-primary, inherit);
	border: 1px solid currentColor;
	border-radius: 0.25rem;
}

.exsq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	width: 100%;
}

.exsq-link {
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	font: inherit;
	color: var(--exsq-primary, inherit);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.exsq-table {
	width: 100%;
	margin: 0 0 0.5rem;
}

.exsq-count-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.exsq-count-row select,
.exsq-count-row input {
	min-width: 0;
	min-height: 2.75rem;
	font-size: 16px;
}

.exsq-paste textarea {
	width: 100%;
	font-size: 16px;
}

.exsq-errors {
	margin: 0 0 0.75rem 1.25rem;
	color: var(--exsq-primary, inherit);
}

/* Proof page (23-16): the mockups fit the column and a wide table scrolls instead of squeezing. */
.exsq-proof img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.exsq-scroll {
	overflow-x: auto;
}

.exsq-proof .exsq-table th,
.exsq-proof .exsq-table td {
	padding: 0.25rem 0.5rem 0.25rem 0;
	text-align: left;
	white-space: nowrap;
}

/* Dashboard design section (23-27): the preview thumbnails wrap and never overflow the card. */
.exsq-design-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.exsq-design-preview {
	margin: 0;
	max-width: 100%;
}

.exsq-design-preview img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Launch page (23-29): the buttons row; the page layout is in squads-public.css. */
.exsq-cta {
	display: grid;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* The ghost: the page ink on transparent, outlined. */
.exsq-wrap .exsq-btn.exsq-btn-alt,
.exsq-wrap .exsq-btn.exsq-btn-alt:hover,
.exsq-wrap .exsq-btn.exsq-btn-alt:focus,
.exsq-wrap .exsq-btn.exsq-btn-alt:visited {
	color: inherit;
	background: transparent;
	border-color: currentColor;
}

.exsq-section {
	margin: 0 0 1.5rem;
}

.exsq-steps {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	counter-reset: exsq-step;
}

.exsq-step {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0.75rem 0.75rem 0.75rem 3rem;
	position: relative;
	background: var(--exsq-soft);
	border-radius: 0.5rem;
}

.exsq-step::before {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: 1.75rem;
	height: 1.75rem;
	font-weight: 700;
	line-height: 1.75rem;
	text-align: center;
	color: var(--exsq-on-primary, inherit);
	content: counter(exsq-step);
	counter-increment: exsq-step;
	background: var(--exsq-primary-fill, transparent);
	border: 1px solid var(--exsq-primary, currentColor);
	border-radius: 50%;
}

.exsq-lead {
	margin: 0;
	text-align: center;
}

.exsq-delivery legend {
	padding: 0;
}

.exsq-faq {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--exsq-line);
}

.exsq-faq summary {
	min-height: 2.75rem;
	font-weight: 700;
	cursor: pointer;
}

.exsq-faq p {
	margin: 0.25rem 0 0.5rem;
}

/* Launch page template gallery (23-29). */
.exsq-gallery {
	margin: 0;
	padding: 0;
	list-style: none;
}

.exsq-product {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.exsq-product img {
	flex: none;
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: 0.5rem;
}

.exsq-product h3 {
	margin: 0 0 0.25rem;
}

.exsq-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.exsq-gallery li {
	margin: 0;
}

.exsq-tpl {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5rem;
	font: inherit;
	color: inherit;
	text-align: center;
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--exsq-line);
	border-radius: 0.5rem;
	cursor: pointer;
}

.exsq-tpl:hover,
.exsq-tpl:focus-visible {
	border-color: var(--exsq-primary, currentColor);
	box-shadow: 0 0 0 2px var(--exsq-primary, currentColor);
}

.exsq-tpl img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 0.35rem;
	border-radius: 0.35rem;
}

/* Launch page: price and minimum chips, and the "Start with" list (24-17). */
.exsq-chips,
.exsq-sources ul {
	margin: 0.75rem 0;
	padding: 0;
	list-style: none;
}

.exsq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.exsq-chip {
	margin: 0;
	padding: 0.35rem 0.75rem;
	font-weight: 700;
	background: var(--exsq-soft);
	border-radius: 2rem;
}

.exsq-source {
	margin: 0;
	padding: 0.2rem 0;
}

@media (min-width: 40rem) {
	.exsq-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.exsq-cta {
		grid-template-columns: 1fr 1fr;
	}
}