/* Sign-in screens (/login, /update-password, /logout) in the Harbor design of the Trusstech UI.
   Standalone: the page loads no Frappe bundle, every class starts with ttl-. Tokens mirror frontend/src/themes.js
   and styles/main.css (navy #1E3A5F, Material 3 Expressive shapes, Google Sans Flex with ROND baked in). */

@font-face { font-family: 'Google Sans Flex Variable'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('fonts/google-sans-flex-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Google Sans Flex Variable'; font-style: normal; font-display: swap; font-weight: 400 700; src: url('fonts/google-sans-flex-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Roboto'); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

.ttl {
	--ttl-primary: #1E3A5F;
	--ttl-primary-hover: #172E4C;
	--ttl-primary-container: #D6E2EF;
	--ttl-bg: #F5F7F9;
	--ttl-surface: #FFFFFF;
	--ttl-hairline: #E8ECF1;
	--ttl-border: #DDE3EA;
	--ttl-outline: #7F8B98;
	--ttl-ink: #14202E;
	--ttl-ink-2: #4A5868;
	--ttl-placeholder: #5F6B78;
	--ttl-error: #B42318;
	--ttl-error-tint: #F8E9E8;
	--ttl-success: #1D7350;
	--ttl-success-tint: #E8F1EE;
	--ttl-disabled: #E2E8EE;
	--ttl-r-md: 12px;
	--ttl-r-xl: 28px;
	--ttl-r-xlp: 32px;
	--ttl-r-full: 9999px;
	--ttl-ease: cubic-bezier(.2, 0, 0, 1);
	--ttl-ease-dec: cubic-bezier(.05, .7, .1, 1);
	--ttl-shadow: 0 1px 2px rgba(20, 32, 46, .04), 0 2px 8px rgba(20, 32, 46, .04);
	--ttl-shadow-card: 0 4px 8px rgba(20, 32, 46, .05), 0 18px 36px -12px rgba(20, 32, 46, .14);
	--ttl-font: 'Google Sans Flex Variable', 'Google Sans Flex Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.ttl, .ttl *, .ttl *::before, .ttl *::after { box-sizing: border-box; }
.ttl [hidden] { display: none !important; }
html:has(.ttl) { background: #F5F7F9; }
.ttl {
	margin: 0; min-height: 100vh; min-height: 100dvh;
	background: var(--ttl-bg); color: var(--ttl-ink);
	font-family: var(--ttl-font); font-size: 16px; line-height: 24px;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.ttl h1, .ttl p { margin: 0; }
.ttl a { color: var(--ttl-primary); font-weight: 600; text-decoration: none; border-radius: 6px; }
.ttl a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ttl :focus-visible { outline: 3px solid var(--ttl-primary); outline-offset: 2px; }
.ttl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout: brand panel + form ---------- */
.ttl-shell {
	display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 16px;
	min-height: 100vh; min-height: 100dvh; padding: 16px;
}
.ttl-brand {
	position: relative; overflow: hidden; isolation: isolate; border-radius: var(--ttl-r-xlp); color: #FFFFFF;
	padding: 40px;
	background:
		radial-gradient(640px 420px at 88% -10%, rgba(255, 255, 255, .10), transparent 60%),
		radial-gradient(420px 320px at 0% 115%, rgba(52, 89, 127, .55), transparent 70%),
		linear-gradient(135deg, #172E4C 0%, #1E3A5F 45%, #34597F 100%);
	box-shadow: 0 28px 56px -20px rgba(30, 58, 95, .50), 0 2px 6px rgba(30, 58, 95, .20);
}
.ttl-brand::after {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ttl-logo { position: relative; z-index: 2; display: block; height: 24px; width: auto; }
.ttl-cookie { position: absolute; z-index: 1; pointer-events: none; fill: rgba(255, 255, 255, .06); }
.ttl-cookie--a { width: 560px; height: 560px; right: -170px; bottom: -190px; fill: rgba(255, 255, 255, .07); }
.ttl-cookie--b { width: 220px; height: 220px; top: -64px; right: -56px; fill: rgba(255, 255, 255, .06); }
.ttl-cookie--c { width: 120px; height: 120px; left: 40px; bottom: 56px; fill: rgba(255, 255, 255, .10); }

.ttl-main { display: flex; align-items: center; justify-content: center; padding: 24px 16px; min-width: 0; }
.ttl-card {
	width: 100%; max-width: 448px; padding: 40px;
	background: var(--ttl-surface); border: 1px solid var(--ttl-hairline); border-radius: var(--ttl-r-xl);
	box-shadow: var(--ttl-shadow-card);
}

/* ---------- Views ---------- */
.ttl-view { display: flex; flex-direction: column; gap: 24px; }
.ttl-view.ttl-enter { animation: ttl-enter 320ms var(--ttl-ease-dec) both; }
@keyframes ttl-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ttl-head { display: flex; flex-direction: column; gap: 6px; }
.ttl-head h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.005em; color: var(--ttl-ink); }
.ttl-head h1:focus { outline: none; }
.ttl-head p { font-size: 16px; line-height: 24px; color: var(--ttl-ink-2); }
.ttl-head p:empty { display: none; }
.ttl-form { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Fields ---------- */
.ttl-field { display: flex; flex-direction: column; gap: 6px; }
.ttl-field-group { display: flex; flex-direction: column; gap: 10px; }
.ttl-field label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ttl-ink); }
.ttl-input { position: relative; }
.ttl-input input {
	display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px;
	font: inherit; font-size: 16px; color: var(--ttl-ink); background: var(--ttl-surface);
	border: 1px solid var(--ttl-outline); border-radius: var(--ttl-r-md);
	transition: border-color 150ms var(--ttl-ease), box-shadow 150ms var(--ttl-ease);
	-webkit-appearance: none; appearance: none;
}
.ttl-input--action input { padding-inline-end: 56px; }
.ttl-input input::placeholder { color: var(--ttl-placeholder); opacity: 1; }
.ttl-input input:hover { border-color: var(--ttl-ink-2); }
.ttl-input input:focus { outline: none; border-color: var(--ttl-primary); box-shadow: 0 0 0 1px var(--ttl-primary); }
.ttl-input input:focus-visible { outline: none; }
.ttl-field[data-invalid] .ttl-input input { border-color: var(--ttl-error); box-shadow: 0 0 0 1px var(--ttl-error); }
.ttl-error { font-size: 14px; line-height: 20px; color: var(--ttl-error); }
.ttl-hint, .ttl-strength { font-size: 14px; line-height: 20px; color: var(--ttl-ink-2); }
.ttl-strength strong { font-weight: 600; }
.ttl-strength[data-score='0'] strong, .ttl-strength[data-score='1'] strong { color: var(--ttl-error); }
.ttl-strength[data-score='2'] strong { color: #94570A; }
.ttl-strength[data-score='3'] strong { color: #245E9E; }
.ttl-strength[data-score='4'] strong { color: var(--ttl-success); }
.ttl-aside { font-size: 14px; line-height: 20px; color: var(--ttl-ink-2); text-align: end; }
.ttl-aside a { font-size: 14px; }
.ttl-iconbtn {
	position: absolute; top: 8px; inset-inline-end: 8px; width: 40px; height: 40px; padding: 0; margin: 0;
	display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ttl-r-full);
	background: transparent; color: var(--ttl-ink-2); cursor: pointer; transition: background-color 150ms var(--ttl-ease);
}
.ttl-iconbtn:hover { background: var(--ttl-primary-container); color: var(--ttl-primary); }
.ttl-iconbtn span { display: inline-flex; }
.ttl-icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* ---------- Buttons ---------- */
.ttl-actions { display: flex; flex-direction: column; gap: 12px; }
.ttl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 24px; margin: 0;
	font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .01em; text-align: center; text-decoration: none;
	border: 1px solid transparent; border-radius: var(--ttl-r-full); cursor: pointer;
	transition: background-color 200ms var(--ttl-ease), border-color 200ms var(--ttl-ease), transform 200ms var(--ttl-ease), box-shadow 200ms var(--ttl-ease);
}
.ttl a.ttl-btn:hover { text-decoration: none; }
.ttl-btn:active { transform: scale(.985); }
.ttl .ttl-btn--filled { background: var(--ttl-primary); color: #FFFFFF; box-shadow: 0 1px 2px rgba(30, 58, 95, .30); }
.ttl .ttl-btn--filled:hover { background: var(--ttl-primary-hover); box-shadow: 0 2px 6px rgba(30, 58, 95, .30); }
.ttl .ttl-btn--tonal { background: var(--ttl-primary-container); color: var(--ttl-primary); }
.ttl .ttl-btn--tonal:hover { background: #C8D8EA; }
.ttl .ttl-btn--outlined { background: var(--ttl-surface); color: var(--ttl-primary); border-color: var(--ttl-outline); }
.ttl .ttl-btn--outlined:hover { background: var(--ttl-bg); border-color: var(--ttl-primary); }
.ttl-btn[disabled] { cursor: default; pointer-events: none; }
.ttl .ttl-btn--filled[disabled]:not([aria-busy='true']) { background: var(--ttl-disabled); color: var(--ttl-ink-2); box-shadow: none; }
.ttl-btn[aria-busy='true'] { cursor: progress; }
.ttl-provider-icon { display: inline-flex; width: 20px; height: 20px; }
.ttl-provider-icon img, .ttl-provider-icon svg { width: 20px; height: 20px; object-fit: contain; }

.ttl-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; font-size: 14px; line-height: 20px; color: var(--ttl-ink-2); }
.ttl-divider::before, .ttl-divider::after { content: ''; flex: 1; height: 1px; background: var(--ttl-border); }
.ttl-social { margin-top: -4px; }
.ttl-foot { font-size: 14px; line-height: 20px; color: var(--ttl-ink-2); text-align: center; }
.ttl-foot a { font-size: 14px; }

/* ---------- Messages ---------- */
.ttl-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--ttl-r-md); font-size: 14px; line-height: 20px; font-weight: 500; }
.ttl-banner:empty { display: none; }
.ttl-banner[data-kind='error'] { background: var(--ttl-error-tint); color: var(--ttl-error); }
.ttl-banner[data-kind='success'] { background: var(--ttl-success-tint); color: var(--ttl-success); }
.ttl-banner .ttl-icon { margin-top: 1px; }
.ttl-banner span { min-width: 0; overflow-wrap: anywhere; }
.ttl-card.ttl-shake { animation: ttl-shake 420ms var(--ttl-ease) both; }
@keyframes ttl-shake { 15% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 65% { transform: translateX(-3px); } 85% { transform: translateX(1px); } }

/* ---------- Waiting ---------- */
.ttl-wait { display: flex; justify-content: center; padding: 8px 0; }
.ttl-spinner, .ttl-btn[aria-busy='true']::before {
	width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent;
	animation: ttl-spin 800ms linear infinite;
}
.ttl-wait .ttl-spinner { width: 32px; height: 32px; border-width: 3px; color: var(--ttl-primary); }
.ttl-btn[aria-busy='true']::before { content: ''; }
@keyframes ttl-spin { to { transform: rotate(360deg); } }

/* ---------- Small screens: one column, the brand panel becomes a band ---------- */
@media (max-width: 880px) {
	.ttl-shell { display: flex; flex-direction: column; gap: 0; padding: 0; }
	.ttl-brand { flex: none; height: 136px; padding: 28px 24px; border-radius: 0 0 var(--ttl-r-xlp) var(--ttl-r-xlp); }
	.ttl-cookie--a { width: 260px; height: 260px; right: -70px; bottom: -150px; }
	.ttl-cookie--b { width: 150px; height: 150px; top: -70px; right: 70px; }
	.ttl-cookie--c { display: none; }
	.ttl-main { flex: 1; align-items: flex-start; padding: 24px 16px 40px; }
	.ttl-card { max-width: 480px; padding: 24px; box-shadow: none; }
	.ttl-head h1 { font-size: 26px; line-height: 32px; }
}
@media (max-width: 360px) {
	.ttl-main { padding-inline: 8px; }
	.ttl-card { padding: 20px 16px; }
}
@media (max-height: 560px) and (min-width: 881px) {
	.ttl-main { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.ttl *, .ttl *::before, .ttl *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
	.ttl-spinner, .ttl-btn[aria-busy='true']::before { animation: none; border-inline-end-color: currentColor; opacity: .6; }
}
@media (forced-colors: active) {
	.ttl-input input, .ttl-btn { border: 1px solid ButtonText; }
	.ttl-btn--filled { border-color: Highlight; }
}