/* Joining Artemisia (includes/join.php, assets/js/join.js): one calm column, one question at a time. */

.artemisia-join {
	max-width: 34rem;
	margin: var(--a-space-7) auto var(--a-space-8);
	padding: 0 var(--a-space-4);
	color: var(--a-ink);
}

.artemisia-join__progress {
	height: 3px;
	margin: 0 0 var(--a-space-6);
	overflow: hidden;
	border-radius: var(--a-radius-pill);
	background: var(--a-stone-deep);
}

.artemisia-join__progress > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--a-ink);
	transition: width 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.artemisia-join__progress > span {
		transition: none;
	}
}

.artemisia-join__title {
	margin: 0 0 var(--a-space-5);
	font-family: var(--a-font-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 400;
	line-height: var(--a-leading-tight);
}

.artemisia-join__title:focus {
	outline: none;
}

.artemisia-join__lede {
	margin: calc(-1 * var(--a-space-3)) 0 var(--a-space-5);
	color: var(--a-muted);
	line-height: var(--a-leading);
}

.artemisia-join__step .artemisia-field {
	display: block;
	margin: 0 0 var(--a-space-4);
}

.artemisia-join__step .artemisia-field__label {
	display: block;
	margin-bottom: var(--a-space-2);
}

.artemisia-join__step .artemisia-input,
.artemisia-join__step .artemisia-select,
.artemisia-join__step .artemisia-textarea {
	width: 100%;
}

.artemisia-join__step .artemisia-field__help {
	display: block;
	margin-top: var(--a-space-2);
	color: var(--a-muted);
	font-size: var(--a-text-sm);
}

.artemisia-join__optional {
	color: var(--a-muted);
	font-size: var(--a-text-sm);
}

.artemisia-join__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--a-space-4);
}

/* The choices: whole cards to tap. */
.artemisia-join__choices {
	margin: var(--a-space-5) 0 0;
	padding: 0;
	border: 0;
}

.artemisia-join__question {
	margin: 0 0 var(--a-space-3);
	padding: 0;
	font-family: var(--a-font-display);
	font-size: 1.25rem;
}

.artemisia-join__choice {
	position: relative;
	display: block;
	margin: 0 0 var(--a-space-3);
	padding: var(--a-space-4) var(--a-space-5);
	border: 1px solid var(--a-line-strong);
	border-radius: var(--a-radius);
	background: var(--a-paper);
	cursor: pointer;
	transition: border-color var(--a-transition), background var(--a-transition);
}

.artemisia-join__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.artemisia-join__choice:hover {
	border-color: var(--a-ink);
}

.artemisia-join__choice:has(input:checked) {
	border-color: var(--a-ink);
	background: var(--a-stone);
	box-shadow: inset 0 0 0 1px var(--a-ink);
}

.artemisia-join__choice:has(input:focus-visible) {
	outline: 2px solid var(--a-focus);
	outline-offset: 2px;
}

.artemisia-join__choice-title {
	display: block;
	font-size: var(--a-text-lg);
}

.artemisia-join__choice-text {
	display: block;
	margin-top: var(--a-space-1);
	color: var(--a-muted);
	font-size: var(--a-text-sm);
	line-height: var(--a-leading);
}

.artemisia-join__choices--list .artemisia-join__choice {
	padding: var(--a-space-4);
}

.artemisia-join__choices--list .artemisia-join__choice-title {
	font-size: var(--a-text-md);
}

/* Password with Show / Hide inside the box. */
.artemisia-join__password {
	position: relative;
	display: block;
}

.artemisia-join__password .artemisia-input {
	padding-right: 4.5rem;
}

.artemisia-join__show {
	position: absolute;
	top: 50%;
	right: var(--a-space-2);
	padding: var(--a-space-2) var(--a-space-3);
	border: 0;
	background: none;
	color: var(--a-ink);
	font: inherit;
	font-size: var(--a-text-sm);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
	transform: translateY(-50%);
}

.artemisia-join__trap {
	position: absolute;
	left: -9999px;
}

.artemisia-join .artemisia-join__small {
	margin: var(--a-space-5) 0 0;
	color: var(--a-muted);
	font-size: var(--a-text-sm);
	line-height: var(--a-leading);
}

.artemisia-join__small a,
.artemisia-join__switch a {
	color: var(--a-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.artemisia-join__error {
	margin: var(--a-space-4) 0 0;
	color: var(--a-error);
}

.artemisia-join__nav {
	margin-top: var(--a-space-6);
}

.artemisia-join__nav-row {
	display: flex;
	justify-content: space-between;
	margin-top: var(--a-space-3);
}

.artemisia-join__nav-row [hidden] + .artemisia-join__link {
	margin-left: auto;
}

.artemisia-join__link {
	padding: var(--a-space-2) 0;
	border: 0;
	background: none;
	color: var(--a-muted);
	font: inherit;
	cursor: pointer;
}

.artemisia-join__link:hover {
	color: var(--a-ink);
}

.artemisia-join__link[hidden] {
	display: none;
}

.artemisia-join__done {
	display: grid;
	gap: var(--a-space-3);
	margin-top: var(--a-space-5);
}

.artemisia-join__switch {
	margin: var(--a-space-6) 0 0;
	color: var(--a-muted);
	font-size: var(--a-text-sm);
	text-align: center;
}

.artemisia-join [hidden] {
	display: none !important;
}

@media (max-width: 480px) {
	.artemisia-join {
		margin-top: var(--a-space-5);
	}
	.artemisia-join__pair {
		grid-template-columns: 1fr;
	}
	.artemisia-join__choice {
		padding: var(--a-space-4);
	}
}