.akwaaba-accounts-form {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

.akwaaba-accounts-form p {
	margin: 0;
}

.akwaaba-accounts-form__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.akwaaba-accounts-form__field {
	align-items: center;
	display: grid;
	gap: .5rem 1rem;
	grid-column: span 12;
}

.akwaaba-accounts-form__field--full {
	grid-column: 1 / -1;
}

.akwaaba-accounts-form__checkbox {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
}

.akwaaba-accounts-form__checkbox input[type="checkbox"] {
	margin-top: .2rem;
	flex-shrink: 0;
}

.akwaaba-accounts-form__field label {
	font-weight: 600;
}

.akwaaba-accounts-form__field :is(input[type="text"], input[type="email"], input[type="password"]) {
	width: 100%;
}

.akwaaba-accounts-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

.akwaaba-accounts-form__submit {
	min-width: 16rem;
}

.akwaaba-accounts-form__message {
	min-height: 1.5em;
	margin: 0;
}

.akwaaba-accounts-form__note {
	color: inherit;
	display: block;
	font-size: inherit;
	line-height: inherit;
}

@media (min-width: 720px) {
	.akwaaba-accounts-form__field {
		grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
	}

	.akwaaba-accounts-form__field label {
		justify-self: start;
	}

	.akwaaba-accounts-form__field--half {
		grid-column: span 6;
	}
}

.akwaaba-accounts-login {
	box-sizing: border-box;
	width: 100%;
	max-width: 32rem;
	margin-inline: auto;
}

.akwaaba-accounts-login h2 {
	margin: 0;
}

.akwaaba-accounts-login__intro {
	color: #555;
	line-height: 1.6;
}

.akwaaba-accounts-login form {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.akwaaba-accounts-login form p {
	margin: 0;
}

.akwaaba-accounts-login label {
	display: block;
	font-weight: 600;
	margin-bottom: .5rem;
}

.akwaaba-accounts-login :is(input[type="text"], input[type="email"], input[type="password"]) {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: .75rem;
	border: 1px solid #777;
	border-radius: 6px;
	background: #fff;
	color: #222;
	font: inherit;
	font-size: max(1em, 16px);
}

.akwaaba-accounts-login .wp-element-button {
	width: 100%;
	min-height: 48px;
	white-space: normal;
}

.akwaaba-accounts-login :is(input, button, summary, a):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.akwaaba-accounts-login__password {
	margin-top: 1.5rem;
	border-top: 1px solid #dedede;
	padding-top: 1.25rem;
}

.akwaaba-accounts-login__tabs {
	display: flex;
	gap: .25rem;
	margin-top: 1.5rem;
	border-bottom: 1px solid #dedede;
}

.akwaaba-accounts-login__tab {
	border: 0;
	border-bottom: 3px solid transparent;
	padding: .75rem 1rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}

.akwaaba-accounts-login__tab.is-active {
	border-bottom-color: currentColor;
}

.akwaaba-accounts-login__password-field[hidden] {
	display: none;
}

.akwaaba-accounts-login__password summary {
	cursor: pointer;
	font-weight: 600;
	padding-block: .25rem;
}

.akwaaba-accounts-login__message {
	padding: 1rem;
	border-left: 3px solid currentColor;
	background: #f4f4f4;
}

.akwaaba-accounts-login__message.is-error {
	color: #b32d2e;
	background: #fbeaea;
}

/* Account navigation is only useful after signing in. Preserve the saved template. */
.wp-block-group.is-layout-flex:has(> .wp-block-group > .wp-block-post-content > .akwaaba-accounts-login) {
	display: block;
}

.wp-block-group.is-layout-flex:has(> .wp-block-group > .wp-block-post-content > .akwaaba-accounts-login) > :not(:has(> .wp-block-post-content)) {
	display: none;
}