@charset "utf-8";

/* DA-LE sign-in page — treatment [2A], IMPACT brand guide (navy gradient).
   Self-hosted per design handoff (IMPACT/_claude/design/Dual Web App UI Mockups - DALETOOLS Login.zip):
   no Google Fonts CDN link, CSP-friendly local @font-face. */

@font-face {
	font-family: "Epilogue";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url("../fonts/epilogue/epilogue-latin-200-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Epilogue";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/epilogue/epilogue-latin-300-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Epilogue";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/epilogue/epilogue-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Epilogue";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/epilogue/epilogue-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Epilogue";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/epilogue/epilogue-latin-900-normal.woff2") format("woff2");
}

/* Everything below is scaled up from the handoff's literal spec values, per John's 2026-09-22
   "too small on screen, bump ~125%" ask. Every sizing declaration keeps its original design-token
   value as the calc() multiplicand (traceable against the handoff's Design Tokens table) times
   this one factor, so a future re-tune is a one-line change instead of re-deriving every number.
   Hairline 1px borders (card edge, input edge, footer divider) are deliberately left unscaled -
   a 1.25px stroke just anti-aliases to a blurry line, it doesn't read as "bigger." */
:root {
	--dale-scale: 1.25;
}

/* overflow-x:hidden alone isn't enough here: CF's own debug-output table (long unwrapped SQL/
   header dumps, appended after </html> whenever CF debugging is on) is a sibling of our markup
   inside <body>. If <body> itself were the centering flex/grid container (as an earlier version
   of this file had it), that sibling's huge intrinsic width would still balloon body's own grid
   track/box, so a "centered" card would center against that phantom width and land clipped
   off-screen even with no visible scrollbar. Housing our card in its own `position: fixed`
   frame sizes and centers it strictly against the viewport, completely independent of whatever
   else lands in <body> around it (debug output's size, in dev, is never allowed to matter). */
html {
	overflow-x: hidden;
}
body.dale-login-page {
	margin: 0;
	background: #e9e6ea;
	font-family: Epilogue, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.dale-login-frame {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: calc(40px * var(--dale-scale)) calc(20px * var(--dale-scale));
	overflow: auto;
}

.dale-login-wrap {
	width: 100%;
	max-width: calc(820px * var(--dale-scale));
}

.dale-login-card {
	background: #1c1e22;
	border: 1px solid rgba(46, 48, 52, .14);
	border-radius: calc(6px * var(--dale-scale));
	box-shadow: 0 calc(2px * var(--dale-scale)) calc(12px * var(--dale-scale)) rgba(46, 48, 52, .1);
	overflow: hidden;
}

.dale-login-grid {
	display: grid;
	grid-template-columns: calc(340px * var(--dale-scale)) 1fr;
	min-height: calc(470px * var(--dale-scale));
}

/* Single column (tablet and phone): the brand panel collapses to just the logo row - the
   headline/body copy/CJIS footer line exist to fill a tall side column next to the form, and
   are redundant (and expensive in scroll real estate) once that column is stacked above the
   form instead. Top-align rather than vertically center: on a short viewport a centered card
   can still start below the fold, forcing a scroll to reach the password field/submit button -
   exactly what John asked to avoid. */
@media (max-width: 900px) {
	.dale-login-grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.dale-login-brand {
		padding: calc(16px * var(--dale-scale)) calc(20px * var(--dale-scale));
	}
	.dale-login-brand-copy,
	.dale-login-footer-line {
		display: none;
	}
	.dale-login-frame {
		align-items: start;
		padding-top: calc(24px * var(--dale-scale));
	}
}

/* Phone widths: fill the viewport edge-to-edge and trim the frame/card chrome back down so the
   whole form - through the submit button - fits without scrolling. The 125% comfort scale above
   has room to spare on a laptop or tablet; a phone doesn't, so this tier intentionally uses its
   own smaller literal values here rather than var(--dale-scale). */
@media (max-width: 560px) {
	/* min-height, not height: the old height:100% chain plus the card's overflow:hidden clipped the
	   bottom of the form off whenever it was taller than the screen (zoomed text, landscape phone -
	   WCAG 1.4.10 Reflow). Now the card fills the screen at minimum but can grow, and the fixed
	   frame (overflow:auto) scrolls. Block frame rather than grid so nothing stretches it back. */
	.dale-login-frame {
		padding: 0;
		display: block;
	}
	.dale-login-wrap {
		max-width: none;
	}
	.dale-login-card {
		border-radius: 0;
		min-height: 100vh;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}
	.dale-login-grid {
		flex: 1 0 auto; /* grow to fill, never shrink below content (the 900px tier's min-height:0 would let it) */
		grid-template-rows: auto 1fr;
	}
	.dale-login-brand {
		padding: 12px 16px;
	}
	.dale-login-form-panel {
		padding: 20px 20px 16px;
		gap: 16px;
	}
	.dale-login-fields {
		gap: 10px;
	}
}

/* Left column — brand panel */
.dale-login-brand {
	background: linear-gradient(160deg, #1E3A6E, #2E3034 72%);
	padding: calc(34px * var(--dale-scale)) calc(30px * var(--dale-scale));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dale-login-logo-row {
	display: flex;
	align-items: center;
	gap: calc(11px * var(--dale-scale));
}
.dale-login-logo-tile {
	width: calc(34px * var(--dale-scale));
	height: calc(34px * var(--dale-scale));
	flex-shrink: 0;
}
/* 2026-10-01: the "D" letter tile replaced with the IMPACT icon - the SVG carries its own
   orange rounded square, so the tile no longer paints a background of its own */
.dale-login-logo-tile img {
	display: block;
	width: 100%;
	height: 100%;
}
.dale-login-wordmark {
	font-family: Epilogue, sans-serif;
	font-weight: 900;
	font-size: calc(17px * var(--dale-scale));
	line-height: 1;
	color: #ffffff;
	letter-spacing: calc(-.3px * var(--dale-scale));
}
.dale-login-wordmark .dot {
	color: #f79421;
}
.dale-login-headline {
	font-family: Epilogue, sans-serif;
	font-weight: 200;
	font-size: calc(25px * var(--dale-scale));
	line-height: 1.25;
	color: #ffffff;
	margin-bottom: calc(12px * var(--dale-scale));
}
.dale-login-headline strong {
	font-weight: 700;
}
.dale-login-body-copy {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(12px * var(--dale-scale));
	line-height: 1.65;
	color: rgba(255, 255, 255, .66);
}
.dale-login-footer-line {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(10.5px * var(--dale-scale));
	line-height: 1.5;
	color: rgba(255, 255, 255, .6); /* was .45 (~3.8:1) - now 5.5:1+, WCAG 1.4.3 */
}

/* Right column — form panel */
.dale-login-form-panel {
	padding: calc(46px * var(--dale-scale)) calc(40px * var(--dale-scale)) calc(38px * var(--dale-scale));
	display: flex;
	flex-direction: column;
	gap: calc(24px * var(--dale-scale));
}

.dale-alert {
	display: flex;
	align-items: center;
	gap: calc(8px * var(--dale-scale));
	padding: calc(10px * var(--dale-scale)) calc(13px * var(--dale-scale));
	border-radius: calc(5px * var(--dale-scale));
}
.dale-alert p {
	margin: 0;
}
.dale-alert-text {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(11.5px * var(--dale-scale));
	line-height: 1.45;
}
.dale-alert-warn {
	background: rgba(247, 148, 33, .13);
	border-left: calc(3px * var(--dale-scale)) solid #f79421;
}
.dale-alert-warn .dale-alert-text { color: #f4c88c; }
.dale-alert-error {
	background: rgba(209, 73, 91, .13);
	border-left: calc(3px * var(--dale-scale)) solid #d1495b;
}
.dale-alert-error .dale-alert-text { color: #f0a8b1; }
.dale-alert-info {
	background: rgba(58, 107, 206, .13);
	border-left: calc(3px * var(--dale-scale)) solid #3A6BCE;
}
.dale-alert-info .dale-alert-text { color: #a9c4f5; }

.dale-login-heading {
	margin: 0; /* now a real <h1> - cancel Bootstrap reboot's heading margin */
	font-family: Epilogue, sans-serif;
	font-weight: 700;
	font-size: calc(20px * var(--dale-scale));
	line-height: 1.2;
	color: #ffffff;
}
.dale-login-dept-line {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(11.5px * var(--dale-scale));
	line-height: 1.4;
	color: #8a8f99;
	margin-top: calc(4px * var(--dale-scale));
}

.dale-login-form {
	display: contents;
}

.dale-login-fields {
	display: flex;
	flex-direction: column;
	gap: calc(13px * var(--dale-scale));
}
.dale-field {
	display: flex;
	flex-direction: column;
	gap: calc(5px * var(--dale-scale));
}
.dale-field-label {
	font-family: Epilogue, sans-serif;
	font-weight: 500;
	font-size: calc(10.5px * var(--dale-scale));
	line-height: 1;
	color: #a7acb6;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.dale-field-input {
	padding: calc(11px * var(--dale-scale)) calc(13px * var(--dale-scale));
	border-radius: calc(5px * var(--dale-scale));
	background: #26292e;
	border: 1px solid #717884; /* was #3a3e45 (1.55:1) - field boundary now 3.75:1, WCAG 1.4.11 */
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(13px * var(--dale-scale));
	color: #ffffff;
	width: 100%;
}
.dale-field-input::placeholder {
	color: #8b919c;
}
.dale-field-input[aria-invalid="true"] {
	border-color: #e07a88; /* error state, set server-side on a failed login (5.6:1 vs the panel) */
}
.dale-field-input:focus-visible {
	outline: none;
	border-color: #7fa4e8; /* 6.66:1 vs the panel - was #3A6BCE at 3.3:1, too close to the floor */
	box-shadow: 0 0 0 calc(3px * var(--dale-scale)) rgba(127, 164, 232, .35);
}

/* password show/hide eye button + Caps Lock hint (2026-10-01) */
.dale-pwd-wrap {
	position: relative;
}
.dale-pwd-input {
	padding-right: calc(44px * var(--dale-scale));
}
.dale-pwd-input::-ms-reveal,
.dale-pwd-input::-ms-clear {
	display: none; /* Edge's own reveal icon would duplicate ours */
}
.dale-pwd-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(40px * var(--dale-scale));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0 calc(5px * var(--dale-scale)) calc(5px * var(--dale-scale)) 0;
	background: transparent;
	color: #a7acb6; /* 6.4:1 vs the field background */
	font-size: calc(13px * var(--dale-scale));
	cursor: pointer;
}
.dale-pwd-toggle:hover {
	color: #ffffff;
}
.dale-pwd-toggle:focus-visible {
	outline: calc(2px * var(--dale-scale)) solid #7fa4e8;
	outline-offset: calc(-3px * var(--dale-scale));
}
.dale-field-hint {
	font-family: Epilogue, sans-serif;
	font-weight: 500;
	font-size: calc(10.5px * var(--dale-scale));
	line-height: 1.2;
	color: #f7b267; /* orange family, 9.1:1 vs the card */
}
.dale-field-hint:empty {
	margin-top: calc(-5px * var(--dale-scale)); /* cancel the .dale-field gap; stays rendered so the live region still announces */
}

.dale-login-trust-row {
	display: flex;
	gap: calc(9px * var(--dale-scale));
	align-items: center;
}
.dale-login-trust-row label {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(11.5px * var(--dale-scale));
	line-height: 1;
	color: #a7acb6;
}

.dale-login-submit-row {
	display: flex;
	gap: calc(10px * var(--dale-scale));
	align-items: center;
}
.dale-login-submit-btn {
	flex: 1;
	padding: calc(12px * var(--dale-scale));
	border-radius: calc(5px * var(--dale-scale));
	background: #3A6BCE;
	border: none;
	font-family: Epilogue, sans-serif;
	font-weight: 700;
	font-size: calc(13px * var(--dale-scale));
	color: #ffffff;
	text-align: center;
	cursor: pointer;
}
.dale-login-submit-btn:hover { background: #2f5cb3; }
.dale-login-submit-btn:active { background: #28509c; }
.dale-login-submit-btn:focus-visible {
	outline: calc(2px * var(--dale-scale)) solid #7fa4e8;
	outline-offset: calc(2px * var(--dale-scale));
}
.dale-login-submit-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.dale-login-sso-btn {
	padding: calc(12px * var(--dale-scale)) calc(16px * var(--dale-scale));
	border-radius: calc(5px * var(--dale-scale));
	background: transparent;
	border: 1px solid #717884;
	font-family: Epilogue, sans-serif;
	font-weight: 400;
	font-size: calc(12.5px * var(--dale-scale));
	color: #a7acb6;
	cursor: pointer;
}

.dale-login-legal {
	font-family: Epilogue, sans-serif;
	font-weight: 300;
	font-size: calc(10.5px * var(--dale-scale));
	line-height: 1.6;
	color: #8b919c; /* was #6f7681 (3.64:1) - now 5.27:1, WCAG 1.4.3 */
	border-top: 1px solid #2f3238;
	padding-top: calc(13px * var(--dale-scale));
	margin-top: auto;
}
/* the terms trigger opens a modal, so it's a real <button> (WCAG 4.1.2) styled as an inline link */
.dale-login-legal-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #7fa4e8;
	text-decoration: underline;
	cursor: pointer;
}
.dale-login-legal-link:hover {
	color: #a8c2f0;
}
.dale-login-legal-link:focus-visible {
	outline: 2px solid #7fa4e8;
	outline-offset: 2px;
	border-radius: 2px;
}