/* ---- Split-panel sign-in ----------------------------------------------------------
   Lifted out of welcome.jsp on 2026-08-31. It had been ~120 lines of inline <style>,
   which meant it was re-sent on every hit of the login page and sat outside the ?v=
   cache-busting discipline every other stylesheet in these apps follows.

   Everything here is prefixed .sv-login, a class welcome.jsp puts on <body> only for
   the apps on the new layout (ribs*, strada, StradaBeta, vision). An app without that
   class keeps the old centred card, so this file is inert for it.

   The per-app pieces stay inline in welcome.jsp on purpose: they need the context path
   to resolve their own splash image, and each app washes its ground differently. They
   are all qualified with body so they beat the rules here on specificity rather than
   source order.

   The form markup is untouched by all of this: the login JS depends on #sf_auth_submit,
   #sf_submit, #loadError, #login_id, #password and the .sv-panel cards (2FA, 2FA
   registration, password reminder - in-card steps since 2026-09-01, modals before that),
   so this restyles and repositions, it never rewrites.

   .splashBackground is position:fixed and fills the viewport, which is why the flex
   centring below works directly on the body.
   ------------------------------------------------------------------------------- */

.sv-login {
	display: flex; align-items: center; justify-content: center;
	gap: clamp(24px, 6vw, 88px); padding: 40px clamp(20px, 5vw, 72px);
	text-align: left; overflow-y: auto;
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* Wash over the photograph so white text holds up wherever the skyline is bright.
   These are the values ribs runs on - vision and strada override them above.
   Measured against ribsNycBackground.jpg once the layer actually painted (it did
   not until the overlay class came off - see the body tag): the old .95/.88/.62
   flattened that night skyline to a monochrome navy field, so it is now
   .70/.54/.32, which keeps the lit windows and the dusk sky and still carries
   white text and the trust strip comfortably. */
.sv-login::before {
	content: ""; position: fixed; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, rgba(4,13,28,.70) 0%, rgba(7,24,48,.54) 42%, rgba(10,32,62,.32) 100%);
}
/* Lifts the brand and the card above the ::before wash.

   Keep this selector at (0,1,0). Anything below that needs to opt out - .sv-foot - does so
   by matching at the same weight later in the file, so raising the weight here silently
   outranks it. (The Bootstrap-modal exemptions that used to follow left with the modals
   themselves on 2026-09-01 - the 2FA and reminder steps are .sv-panel cards now, and those
   want exactly this rule.) */
.sv-login > * { position: relative; z-index: 1; }

/* Left: brand */
.sv-brand { flex: 0 1 560px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.sv-brand img { width: min(400px, 42vw); height: auto; display: block; }
.sv-brand img.sv-logo-vision { width: min(480px, 46vw); }
.sv-trust {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
	margin-top: clamp(28px, 6vh, 72px);
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: #c3d4e6; font-weight: 600;
}
.sv-trust span { display: inline-flex; align-items: center; gap: 7px; }
.sv-trust svg { width: 17px; height: 17px; stroke: #5da8ec; fill: none;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sv-trust i { width: 1px; height: 15px; background: rgba(255,255,255,.22); display: inline-block; }

/* strada wordmark set as live text. The shipped logo.png is 155x57 with an opaque
   off-white background baked in, so it renders as a pixelated white box on this
   ground - unusable here. This is a stand-in until a reversed, higher-resolution
   asset exists; swap it for an <img> the moment one does. */
.sv-wordmark { display: flex; align-items: center; gap: 14px; }
.sv-wordmark .dots { display: grid; grid-template-columns: repeat(3, 10px); gap: 5px; }
.sv-wordmark .dots b { width: 10px; height: 10px; border-radius: 50%; background: #8ab6e8; display: block; }
.sv-wordmark .dots b:nth-child(2), .sv-wordmark .dots b:nth-child(6) { background: #ffffff; }
.sv-wordmark .name { font-size: clamp(48px, 7.4vw, 82px); font-weight: 300; color: #fff; letter-spacing: -.015em; line-height: 1; }
.sv-wordmark .bar { width: 1px; align-self: stretch; background: rgba(255,255,255,.3); }
.sv-wordmark .sfx { font-size: clamp(26px, 3.8vw, 40px); font-weight: 600; color: #f0a028; letter-spacing: .06em; }
.sv-tagline { margin-top: 22px; font-size: clamp(16px, 1.4vw, 19px); color: #cfdcea;
	max-width: 26ch; line-height: 1.55; font-weight: 400; }

/* Right: the card. .form-signin is the existing wrapper. */
/* The flex item is the <form> that wraps the card, not .form-signin itself, so the width has
   to sit here or the form shrinks to its content and drags the card down with it - 323px
   instead of 430 at a 1280px viewport, which is where the card started looking cramped.
   The .sv-panel cards (2FA, registration, reminder) are the form's siblings - the login JS
   swaps them in place of it - so they need the same sizing. */
.sv-login > form, .sv-login > .sv-panel { flex: 0 0 auto; width: min(430px, 100%); }

.sv-login .form-signin {
	width: 100%; margin: 0;
	background: rgba(10,24,44,.72); backdrop-filter: blur(14px);
	border: 1px solid rgba(120,165,215,.24); border-radius: 16px;
	padding: 44px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.45); color: #e8eef6;
}
.sv-login .form-signin > img { display: none; }   /* logo lives in the brand panel */
.sv-login .sv-h { font-size: 34px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.sv-login .sv-sub { font-size: 15px; color: #a9bed4; margin: 0 0 22px; }
.sv-login .sv-rule { height: 2px; width: 100%; background: linear-gradient(90deg,#2f7fd0,rgba(47,127,208,0)); margin-bottom: 26px; }

/* Fields. Bootstrap floating labels kept - restyled, not replaced. */
.sv-login .form-floating > .form-control {
	background: rgba(7,18,34,.85); border: 1px solid rgba(125,170,220,.28);
	color: #fff; border-radius: 9px; height: 58px; padding-left: 46px;
}
.sv-login .form-floating > .form-control:focus {
	border-color: #3d8fdd; box-shadow: 0 0 0 3px rgba(61,143,221,.22); background: rgba(7,18,34,.95);
}
.sv-login .form-floating > label { color: #8fa8c2; padding-left: 46px; }
.sv-login .form-floating > .form-control:focus ~ label,
.sv-login .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #7d96b0; }
.sv-login .form-floating { position: relative; }
.sv-login .form-floating::before {
	content: ""; position: absolute; left: 16px; top: 20px; width: 19px; height: 19px;
	z-index: 4; pointer-events: none; opacity: .62;
	background-repeat: no-repeat; background-size: contain;
}
.sv-login .sv-f-user::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c4e2' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.sv-login .sv-f-pass::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c4e2' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
/* Panel fields: 2FA code (shield, echoing the trust strip) and reminder email (envelope).
   Every .form-control in a .form-floating gets the 46px icon gutter above, so any field
   without one of these classes shows an empty indent - add an icon class with the field. */
.sv-login .sv-f-code::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c4e2' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8.2-8 9-4.6-.8-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.sv-login .sv-f-mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c4e2' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.sv-login .form-floating .btn-link { color: #93aec9 !important; }

/* Buttons. #sf_auth_submit is revealed by the login JS - only its look changes. .sv-btn is
   the same treatment for the panel buttons (verify, verify-registration, send reminder);
   vision's inline accent block in welcome.jsp overrides all three the same way. */
.sv-login #sf_auth_submit, .sv-login #sf_submit, .sv-login .sv-btn {
	width: 100%; height: 54px; font-size: 15px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; border: 0; border-radius: 9px;
	background: linear-gradient(180deg,#2f7fd0,#1d5ea6); box-shadow: 0 8px 22px rgba(29,94,166,.4);
}
.sv-login #sf_auth_submit:hover, .sv-login #sf_submit:hover, .sv-login .sv-btn:hover { background: linear-gradient(180deg,#3a8ade,#2468b3); }
.sv-login #sf_auth_submit:disabled, .sv-login #sf_submit:disabled, .sv-login .sv-btn:disabled { opacity: .55; }
.sv-login .form-signin > .mt-3 { text-align: right; margin-top: 14px !important; }
.sv-login .form-signin > .mt-3 .btn-link { color: #6fb0ec; text-decoration: none; font-size: 14px; }
.sv-login .form-signin > .mt-3 .btn-link:hover { text-decoration: underline; }

/* Panel chrome. .sv-h-sm steps the panel headings below the 34px welcome heading so the
   longer titles hold one line; .sv-back is the route home, matching the forgot-password
   link. The QR tile stays white on purpose - the scanned code needs its quiet zone and
   contrast, so it sits on a small light card rather than the dark glass. */
.sv-login .sv-h-sm { font-size: 26px; }
/* display:block + width:max-content pins the link to the card's left edge (the legacy body
   class text-center would otherwise centre it) without stretching the click target. */
.sv-login .sv-back { color: #6fb0ec; text-decoration: none; font-size: 14px; margin-bottom: 18px; display: block; width: max-content; }
.sv-login .sv-back:hover { color: #9cc9f2; text-decoration: underline; }
.sv-login .sv-qr img { background: #fff; padding: 10px; border-radius: 10px; box-sizing: content-box; }

/* The registration panel is tall enough to overflow a short viewport, and with plain
   align-items:center a flex child that overflows loses its top edge above the scroll
   origin - unreachable. "safe center" falls back to start alignment only when the item
   overflows; guarded so older browsers just keep today's behaviour. */
@supports (align-items: safe center) {
	.sv-login { align-items: safe center; }
}

/* Makes the overflow-y:auto up top actually scroll. body is position:fixed (that is
   .splashBackground), and while <html> keeps overflow:visible the CSS overflow-propagation
   rule hands body's overflow to the viewport and leaves body's used overflow visible - a
   fixed box contributes nothing to viewport scroll, so a short viewport simply cut the card
   off with no way to reach the rest (the old modals never hit this: Bootstrap gives .modal
   its own fixed scroll layer). Hiding overflow on <html> stops the propagation and body
   scrolls its own content. :has keeps this file's .sv-login scoping discipline; a browser
   without :has just keeps the old no-scroll behaviour. */
html:has(body.sv-login) { overflow: hidden; }

.sv-foot {
	position: fixed; left: 0; right: 0; bottom: 0; text-align: center;
	padding: 16px; font-size: 12.5px; color: #8ea5bd;
	border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,12,25,.55);
}

/* Phone: stack, brand above the card, drop the trust strip and the fixed footer. */
@media (max-width: 860px) {
	.sv-login { flex-direction: column; gap: 26px; justify-content: flex-start; padding-top: 34px; }
	.sv-brand { flex: 0 0 auto; text-align: center; }
	.sv-brand img { width: min(300px, 74vw); margin: 0 auto; }
	/* the desktop .sv-logo-vision rule outranks the line above on specificity,
	   so vision needs restating here or its mark stays at 46vw on a phone */
	.sv-brand img.sv-logo-vision { width: min(320px, 78vw); }
	.sv-trust, .sv-foot { display: none; }
	.sv-login .form-signin { padding: 32px 24px; }
}