/***** AccountLogin: two-column layout with logo + welcome copy *****/
body {
	font-family: "Poppins", sans-serif;
}

.login-card {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 700px;
}

.login-card-intro img {
	max-width: 200px;
	height: auto;
	margin-bottom: 1.5rem;
}

/* SPMP-46: subtitle under the logo (e.g. "Extranet User Login") identifying which login form
   the viewer is on - only loginFormExtranet.cfm uses this today, but kept generic in case
   another variant needs the same treatment later. */
.login-card-subtitle {
	font-size: 0.85rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	margin-top: -1rem;
	margin-bottom: 1.5rem;
}

/* SPMP-46: "Extranet Users" link on loginForm.cfm - deliberately smaller/muted and placed at
   the bottom of the form column (right side on desktop, per the grid below) rather than
   grouped with .login-card-forgot-links, since it isn't an account-recovery action. */
.login-card-extranet-link {
	text-align: right;
	margin-top: 1rem;
}

.login-card-extranet-link a {
	font-size: 0.8rem;
	color: #666;
}

/* On mobile everything stacks in document order (intro, then form, then
   forgot links) except the forgot links, which move below the Log In
   button. */
.login-card-forgot-links {
	order: 3;
}

/* Switch to a two-column grid once there's enough room: intro/forgot-links
   on the left, the form on the right, with the forgot links aligned to the
   bottom of the left column next to the Log In button. */
@media screen and (min-width: 601px) {
	.login-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;
		column-gap: 2rem;
		row-gap: 0;
	}

	.login-card-intro {
		grid-column: 1;
		grid-row: 1;
	}

	.login-card-forgot-links {
		grid-column: 1;
		grid-row: 2;
		order: initial;
	}

	.login-card-form {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media screen and (max-width: 600px) {
	.login-card-intro img {
		max-width: 160px;
	}
}

/***** MFA setup/challenge *****/
.mfa-qr-code {
	width: 200px;
	height: 200px;
	border: 1px solid grey;
	padding: 0.5rem;
}

.mfa-manual-key {
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	padding: 0.5rem 1rem;
	background: #f0f0f0;
	border-radius: 3px;
}

/* Wider than the default .recovery-content (450px) so the instructions and
   QR/code-entry columns below have room to sit side by side instead of
   stacking - the combined selector (not just .mfa-setup-content alone)
   keeps this override winning on specificity regardless of stylesheet load
   order between this file and the shared one .recovery-content lives in. */
.recovery-content.mfa-setup-content {
	max-width: 700px;
}

/* Stacked by default (mobile): instructions, then QR/key/code entry below
   them - focusing the code input only has to scroll past this view's own
   content, same as before. */
.mfa-setup-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Side by side once there's room: instructions on the left, the QR code /
   manual key / code entry / submit button grouped on the right - keeps the
   action column visible without scrolling past all three instruction
   paragraphs first. */
@media screen and (min-width: 601px) {
	.mfa-setup-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
		align-items: start;
	}
}

/* The QR code / manual key / code entry / submit button used to be direct
   children of <form>, spaced apart by the global "form > *:not(:last-child)"
   rule below - nesting them one level deeper under .mfa-setup-action for the
   grid above took them out of that rule, leaving them cramped together. */
.mfa-setup-action {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* style_sheets/modern.css's universal reset sets font-weight: inherit on every
   element (strong included) - restore bold here rather than touching that
   shared reset. */
.mfa-setup-instructions strong,
.error-overlay-content strong {
	font-weight: bold;
}