/* ElevenCode sign up, sign in, account, Settings and delete-account screens: one narrow card for
   the forms, and a stack of quiet cards for the signed-in area. Mobile-first, logical properties
   so the Arabic RTL layout mirrors without a second rule, and no shadow or gradient anywhere. */

/* A POST form that must sit on one line beside the header links (Sign out). */
.inline-form {
	display: inline-flex;
	margin: 0;
}

/* Forms: sign up, sign in, delete account */

.auth {
	inline-size: 100%;
	max-inline-size: 440px;
	margin-inline: auto;
	padding: var(--space-8) var(--space-4) var(--space-12);
}

.auth__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
}

.auth__title {
	margin-block: 0;
}

.auth__lead {
	margin-block: 0;
	color: var(--text-secondary);
}

.auth__alert {
	margin-block: 0;
}

.auth__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.auth__switch {
	margin-block: var(--space-2) 0;
	color: var(--text-secondary);
	font-size: var(--text-md);
	text-align: center;
}

.auth__switch a {
	color: var(--text);
	text-underline-offset: 3px;
}

.auth__cancel {
	align-self: center;
}

/* The signed-in area: details, Settings, More options */

.account {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-inline-size: 720px;
	margin-inline: auto;
	padding: var(--space-8) var(--space-4) var(--space-12);
}

.account__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.account__title {
	margin-block: 0;
}

.account__intro {
	margin-block: 0;
	color: var(--text-secondary);
}

.account__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.account__heading {
	margin-block: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.account__lead {
	margin-block: 0;
	color: var(--text-secondary);
	font-size: var(--text-md);
}

.account__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

.account__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	justify-content: space-between;
	padding-block: var(--space-3);
	border-block-start: 1px solid var(--border);
}

.account__row:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.account__row dt {
	color: var(--text-secondary);
	font-size: var(--text-md);
}

.account__row dd {
	margin: 0;
	font-weight: var(--weight-medium);
	overflow-wrap: anywhere;
}

.account__settings {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.account__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.account__legend {
	margin-block-end: var(--space-1);
	padding: 0;
	font-weight: var(--weight-medium);
}

.account__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
}

.account__choice {
	gap: var(--space-2);
}

.account__save {
	align-self: flex-start;
}

.account__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--border);
}

.account__action:first-of-type {
	padding-block-start: 0;
	border-block-start: 0;
}

.account__action-text {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-md);
}

@media (min-width: 640px) {
	.auth {
		padding: var(--space-12) var(--space-4);
	}

	.auth__card,
	.account__card {
		padding: var(--space-8);
	}

	.account {
		padding: var(--space-12) var(--space-4);
	}
}