/* Sign-in screens on a phone (handoff 8a, 8g, 8h, 8i): LoginLayout, Login, Login Password, Forgot/Reset Password, Change Password, Support.
   Phones only: App.razor links this file with media="screen and (max-width: 719.98px) and (hover: none) and
   (pointer: coarse)", so nothing here can reach desktop or print (docs/mobile-phone-layout.md).

   Every rule is scoped under .login-shell (LoginLayout's root): .btn-primary, .eyebrow, .validation and other names these
   screens share with the signed-in modals are left alone everywhere else. Values are the 8a/8g/8h/8i inline styles:
   one column at 16px gutters, cards 16px round with no shadow, every field 48px tall with 16px text (no iOS zoom),
   every tap target at least 44px. Where the mock draws a smaller box (the 36px header
   tabs, the footer and inline text links) an invisible ::after widens the tap area without moving anything. */

/* ---------- Header: logo left, Login / Support tabs right ---------- */

.login-shell .login-header {
	gap: 8px;
	padding: 8px 10px 8px 16px;
}

/* 28px tall; on the narrowest phones (320px) it may give up a little width rather than push the tabs off screen. */
.login-shell .login-header img {
	flex: 0 1 auto;
	min-width: 0;
	height: 28px;
	object-fit: contain;
	object-position: left center;
}

.login-shell .login-header nav { flex: none; gap: 2px; }

.login-shell .login-header nav a {
	position: relative;
	display: flex;
	align-items: center;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-nav);
}

.login-shell .login-header nav a::after { content: ""; position: absolute; inset: -4px 0; }

.login-shell .login-header nav a.active {
	font-weight: 600;
	color: var(--navy);
	background: var(--tint-navy);
}

/* 8g and 8h draw neither tab current on the password screens (Change, Reset, and the emailed set-password page). */
.login-shell:has(.login-card--wide, .login-card--reset) .login-header nav a.active {
	font-weight: 500;
	color: var(--text-nav);
	background: none;
}

/* ---------- Body: one column, the promo / steps below the card ---------- */

.login-shell .login-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	min-height: 0;
	max-width: none;
	padding: 20px 16px 24px;
}

/* Change Password and the set-password page end with the card (8g: 20px to the footer). */
.login-shell .login-body:has(> .login-card--wide) { padding-bottom: 20px; }

/* ---------- The card ---------- */

.login-shell .login-card,
.login-shell .login-card--wide {
	max-width: none;
	border-radius: 16px;
	box-shadow: none;
	padding: 24px 20px 20px;
}

.login-shell .login-card .icon-tile {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	margin-bottom: 18px;
}

.login-shell .login-card .icon-tile svg { width: 22px; height: 22px; }

.login-shell .login-card h1 { margin: 0 0 6px; }

.login-shell .login-card .subtitle {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.5;
}

/* The mock sets these labels with the font shorthand, so their line height is normal, not the body's 1.5. */
.login-shell .login-card label {
	font-size: 13px;
	line-height: normal;
	margin-bottom: 7px;
}

.login-shell .login-card input[type="text"],
.login-shell .login-card input[type="password"] {
	height: 48px;
	padding: 0 14px;
	border-color: #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
	margin-bottom: 16px;
}

.login-shell .login-card input:focus { border-color: var(--navy); }

.login-shell .login-card input[readonly] {
	background: #F7F9FB;
	border-color: var(--border-input);
	color: var(--text-secondary);
}

.login-shell .login-card .validation {
	font-size: 14px;
	line-height: 1.45;
}

/* The read-only user name with its Change button beside it (8a, 8g, 8h). */
.login-shell .login-card .field-with-action {
	gap: 10px;
	margin-bottom: 16px;
}

.login-shell .login-card .field-with-action input {
	min-width: 0;
	margin-bottom: 0;
}

.login-shell .login-card .change-link {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 48px;
	padding: 0 14px;
	margin-bottom: 0;
	border: 1px solid var(--border-input);
	border-radius: 10px;
	background: var(--surface);
	font-size: 14px;
	font-weight: 500;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
}

.login-shell .login-card .change-link svg { width: 14px; height: 14px; }

/* Reset Password has no wrapper around the user name, so its form becomes a two-column grid on a phone and the
   phone-only Change link takes the cell beside the field. */
.login-shell .login-card--reset form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: start;
}

.login-shell .login-card--reset form > * { grid-column: 1 / -1; }
.login-shell .login-card--reset form > #username { grid-column: 1; }
.login-shell .login-card--reset form > .change-link { grid-column: 2; }

.login-shell .login-card--reset form > #email { margin-bottom: 14px; }

/* The last field's 16px plus 4px: the mock's 20px above the button. */
.login-shell .login-card .btn-primary {
	height: 50px;
	margin-top: 4px;
	border-radius: 10px;
	font-size: 16px;
}

.login-shell .login-card .btn-primary:disabled {
	background: #F6B393;
	border-color: #F6B393;
	opacity: 1;
}

.login-shell .login-links { margin-top: 6px; }

.login-shell .login-links a {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	font-size: 14px;
	font-weight: 500;
}

.login-shell .login-card hr { margin: 6px 0 14px; }

/* The user-name step has no link row between the button and the divider. */
.login-shell .login-card form + hr { margin-top: 20px; }

.login-shell .login-card .support-line {
	font-size: 14px;
	line-height: 1.5;
}

/* Inline text links: a 44px-tall tap area around the words. */
.login-shell .support-line a,
.login-shell .steps-note a {
	position: relative;
}

.login-shell .support-line a::after,
.login-shell .steps-note a::after {
	content: "";
	position: absolute;
	inset: -14px -4px;
}

/* ---------- Reset Password (8h): the spam warning in the card, right above the button ---------- */

.login-shell .login-card .note-warning {
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 18px;
	background: #FFF6EF;
	border-color: #F8D3BD;
	border-radius: 12px;
	color: #B2481A;
}

.login-shell .login-card .note-warning + .btn-primary,
.login-shell .login-card .note-warning + .login-links { margin-top: 0; }

.login-shell .login-card .note-warning p {
	font-size: 13px;
	line-height: 1.5;
	color: #7A3B1C;
}

/* "What happens next" sits on the page below the card, 4px further in than the card. */
.login-shell .login-aside {
	max-width: none;
	gap: 0;
	margin-top: -2px;
	padding: 0 4px;
}

.login-shell .steps-card {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.login-shell .steps-card .eyebrow {
	margin: 0 0 6px;
	line-height: normal;
	font-size: 10.5px;
	letter-spacing: 0.9px;
}

.login-shell .steps-list { gap: 0; }

.login-shell .steps-list li {
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
	line-height: 1.5;
}

.login-shell .steps-card hr { display: none; }

.login-shell .steps-note {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Change Password (8g): the rule checklist under New Password ---------- */

.login-shell .login-card #newpassword { margin-bottom: 12px; }

.login-shell .m-rules {
	padding: 12px 14px;
	margin-bottom: 16px;
	background: var(--surface-hover);
	border: 1px solid var(--border-card);
	border-radius: 12px;
}

.login-shell .m-rules-title {
	margin: 0 0 4px;
	line-height: normal;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}

.login-shell .m-rules ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.login-shell .m-rules li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ink-body);
}

.login-shell .m-rules li.met { color: #1F6B3F; }

.login-shell .m-rule-icon {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--zero);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-shell .m-rules li.met .m-rule-icon {
	border: 0;
	background: #E3F3EA;
	color: #1F8A4C;
}

.login-shell .m-rules-caption {
	margin: 10px 0 4px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-quiet);
	text-align: center;
}

/* The caption's 4px collapses with the link row's (8g: 4px between them). */
.login-shell .login-card form:has(> .m-rules-caption) + .login-links { margin-top: 0; }

/* ---------- Promo below the form (8a): the Vimeo intro, or the marketing image in its place ---------- */

.login-shell .login-promo { max-width: none; }

.login-shell .login-promo .eyebrow {
	margin: 0 0 8px;
	line-height: normal;
	font-size: 10.5px;
	letter-spacing: 0.9px;
}

.login-shell .login-promo h2 {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: normal;
}

.login-shell .login-promo .video-frame,
.login-shell .login-promo .promo-image {
	border-color: #DBE2E7;
	border-radius: 12px;
}

.login-shell .login-promo-image a { border-radius: 12px; }

/* ---------- Support (8i) ---------- */

.login-shell .support-body { padding: 20px 16px; }

.login-shell .support-heading {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.6px;
	color: var(--ink);
}

.login-shell .support-intro {
	max-width: none;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.login-shell .support-intro a,
.login-shell .support-form-card .subtitle a {
	position: relative;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}
.login-shell .support-intro a::after,
.login-shell .support-form-card .subtitle a::after { content: ""; position: absolute; inset: -14px -2px; }

/* Call / Email shortcuts. */
.login-shell .support-quick {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.login-shell .support-quick a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 1px solid var(--active-nav-ring);
	border-radius: 10px;
	background: var(--tint-navy);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
}

.login-shell .support-columns {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 16px;
}

.login-shell .support-form-card {
	border-radius: 16px;
	box-shadow: none;
	padding: 20px 18px 18px;
}

/* "Contact us" reads as the card's title (8i "Contact Us"). */
.login-shell .support-form-card .eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: capitalize;
	color: var(--ink);
}

.login-shell .support-form-card label {
	font-size: 13px;
	line-height: normal;
	margin-bottom: 7px;
}

.login-shell .support-form-card input {
	height: 48px;
	padding: 0 14px;
	margin-bottom: 14px;
	border-color: #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
}

.login-shell .support-form-card textarea {
	height: 120px;
	padding: 12px 14px;
	margin-bottom: 18px;
	border-color: #D5DDE6;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.4;
}

.login-shell .support-form-card input:focus,
.login-shell .support-form-card textarea:focus { border-color: var(--navy); }

.login-shell .support-form-card .validation {
	font-size: 14px;
	line-height: 1.45;
}

/* First / Last stay side by side; Email and Phone stack. */
.login-shell .support-form-card .field-pair { gap: 10px; }
.login-shell .support-form-card .field-pair > div { min-width: 0; }
.login-shell .support-form-card .field-pair + .field-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }

.login-shell .support-submit {
	width: 100%;
	height: 50px;
	padding: 0;
	margin-top: 0;
	border-radius: 10px;
	font-size: 16px;
}

.login-shell .support-form-card .subtitle {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-secondary);
}

/* Contact information: the navy panel; each row is one tap target. */
.login-shell .support-contact-card {
	background: var(--navy);
	border: 0;
	border-radius: 16px;
	box-shadow: none;
	padding: 18px 18px 8px;
}

.login-shell .support-contact-card :focus-visible { outline-color: #FFFFFF; }

.login-shell .support-contact-card .eyebrow {
	margin: 0 0 4px;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: normal;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: capitalize;
	color: #FFFFFF;
}

.login-shell .support-contact-card hr { display: none; }

.login-shell .contact-row {
	position: relative;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.login-shell .contact-row:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.login-shell .contact-icon {
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
}

.login-shell .contact-icon svg { width: 17px; height: 17px; }

.login-shell .contact-phone,
.login-shell .contact-email,
.login-shell .contact-address,
.login-shell .contact-address strong {
	font-family: var(--font-ui);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
	color: #FFFFFF;
}

.login-shell .contact-phone::after,
.login-shell .contact-email::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- Footer (8a): logo, links, then the rule with the copyright left and the social tiles right ---------- */

.login-shell .login-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	padding: 22px 20px 18px;
}

.login-shell .login-footer .footer-row { display: contents; }

.login-shell .login-footer img {
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: start;
	height: 22px;
	width: auto;
}

.login-shell .login-footer .footer-links {
	grid-row: 2;
	grid-column: 1 / -1;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 16px;
}

.login-shell .login-footer .footer-links a {
	position: relative;
	font-size: 13.5px;
	line-height: normal;
}

.login-shell .login-footer .footer-links a::after {
	content: "";
	position: absolute;
	inset: -14px -6px;
}

.login-shell .login-footer .footer-rule {
	grid-row: 3;
	grid-column: 1 / -1;
	width: 100%;
	margin: 16px 0 0;
	border-top-color: rgba(255, 255, 255, .12);
}

.login-shell .login-footer .footer-copyright {
	grid-row: 4;
	grid-column: 1;
	padding-top: 12px;
	text-align: left;
	font-size: 12px;
	line-height: normal;
	color: #8FA6BA;
}

.login-shell .login-footer .footer-social {
	grid-row: 4;
	grid-column: 2;
	padding-top: 12px;
}

.login-shell .login-footer .footer-social span { border-radius: 3px; }