/* ==========================================================================
 * C.C. Shroff HMS - custom login page
 * app: frappe_themes  |  loaded via web_include_css
 *
 * This stylesheet is served on EVERY website page, so every rule below is
 * scoped to body[data-path="login"]. The layout rules are scoped one level
 * deeper, to .ccs-login-shell, which custom_login.js builds at runtime - if
 * the script ever fails to run, the page falls back to the stock Frappe
 * login instead of rendering half-styled.
 * ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
body[data-path="login"] {
	--ccs-ink: #0f172a;
	--ccs-ink-soft: #475569;
	--ccs-muted: #64748b;
	--ccs-border: #e2e8f0;
	--ccs-field: #f8fafc;
	--ccs-field-focus: #ffffff;
	--ccs-green: #059669;
	--ccs-green-dark: #047857;
	--ccs-deep: #04372b;
	--ccs-mint: #6ee7b7;
	--ccs-button: #0b7c35;
	--ccs-button-hover: #097030;
	--ccs-button-active: #066328;
	--ccs-button-glow: rgba(11, 124, 53, 0.7);
	--ccs-button-ring: rgba(11, 124, 53, 0.28);
	--ccs-ring: rgba(5, 150, 105, 0.18);
	--ccs-radius: 18px;
	--ccs-radius-sm: 10px;

	/* Fluid sizing. Everything below scales with the viewport between roughly
	 * 1280px and 2560px wide, so the panel and the card keep their apparent
	 * size when the browser is zoomed out (zooming out widens the CSS
	 * viewport, which made every fixed px value shrink on screen). */
	--ccs-logo: clamp(88px, 5.5vw, 132px);
	--ccs-h1: clamp(32px, 2.1vw, 46px);
	--ccs-tagline: clamp(16px, 1.05vw, 22px);
	--ccs-contact: clamp(13.5px, 0.92vw, 19px);
	--ccs-card-w: clamp(440px, 28vw, 720px);
	--ccs-card-pad: clamp(34px, 2.2vw, 48px);
	--ccs-card-h4: clamp(25px, 1.6vw, 34px);
	--ccs-card-sub: clamp(14.5px, 0.95vw, 19px);
	--ccs-field-h: clamp(48px, 2.9vw, 64px);
	--ccs-field-text: clamp(14.5px, 0.95vw, 19px);
	--ccs-field-icon: clamp(17px, 1.1vw, 21px);
	--ccs-btn-text: clamp(15px, 1vw, 20px);
}

/* --- strip the website chrome off the login route ----------------------- */
body[data-path="login"] .navbar,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
	display: none !important;
}

body[data-path="login"] {
	background: #ffffff !important;
}

body[data-path="login"] .page-content-wrapper {
	min-height: 0 !important;
	padding: 0 !important;
}

body[data-path="login"] main.container,
body[data-path="login"] main {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body[data-path="login"] .page_content,
body[data-path="login"] .page-footer {
	margin: 0;
	padding: 0;
}

/* Avoid a flash of the stock layout while custom_login.js reparents the DOM.
 * The animation is a safety net: if the script never runs, the untouched
 * login page fades in on its own after 1.2s. */
@keyframes ccs-safety-reveal {
	to {
		opacity: 1;
	}
}

body[data-path="login"] .page_content {
	opacity: 0;
	animation: ccs-safety-reveal 0.01s linear 1.2s forwards;
}

body[data-path="login"].ccs-login-ready .page_content {
	opacity: 1;
	animation: none;
}

/* --- the split shell ---------------------------------------------------- */
body[data-path="login"] .ccs-login-shell {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	min-height: 100svh;
	width: 100%;
	background: #ffffff;
	color: var(--ccs-ink);
	font-feature-settings: "cv11", "ss01";
}

/* --- left: brand panel -------------------------------------------------- */
body[data-path="login"] .ccs-brand {
	position: relative;
	flex: 0 0 47%;
	max-width: min(47%, 1050px);
	display: flex;
	overflow: hidden;
	padding: clamp(48px, 3.6vw, 80px) clamp(44px, 3.8vw, 84px);
	color: #ffffff;
	background-color: #04372b;
	background-image: url("/assets/frappe_themes/images/login-bg.jpg?v=6");
	background-size: cover;
	background-position: 50% 46%;
	background-repeat: no-repeat;
}

/* A light green wash, so the building stays clearly readable, plus a soft
 * scrim directly behind the centred copy to carry the white type. Keeping the
 * two as separate layers means the tint can be lightened without touching
 * legibility. */
body[data-path="login"] .ccs-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		/* full-width scrim: stays out of the way over the roofline and upper
		 * facade, deepens through the band where the copy sits */
		linear-gradient(
			180deg,
			rgba(3, 44, 35, 0.06) 0%,
			rgba(3, 44, 35, 0.13) 16%,
			rgba(3, 44, 35, 0.62) 31%,
			rgba(3, 44, 35, 0.64) 78%,
			rgba(3, 44, 35, 0.3) 100%
		),
		/* the light green wash itself */
		linear-gradient(
			176deg,
			rgba(5, 95, 70, 0.4) 0%,
			rgba(6, 120, 88, 0.32) 38%,
			rgba(6, 104, 76, 0.38) 100%
		);
}

body[data-path="login"] .ccs-brand::after {
	/* soft feathered edge into the form panel */
	content: "";
	position: absolute;
	inset: 0 -1px 0 auto;
	width: 120px;
	background: linear-gradient(90deg, transparent, rgba(4, 55, 43, 0.22));
	pointer-events: none;
}

body[data-path="login"] .ccs-brand-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: clamp(28px, 2vw, 44px);
	width: 100%;
	max-width: clamp(460px, 32vw, 720px);
	margin: auto;
}

body[data-path="login"] .ccs-brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
}

body[data-path="login"] .ccs-brand-mark img,
body[data-path="login"] .ccs-brand-badge {
	width: var(--ccs-logo);
	height: var(--ccs-logo);
	flex: 0 0 auto;
	border-radius: clamp(18px, 1.2vw, 26px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

body[data-path="login"] .ccs-brand-mark img {
	object-fit: contain;
	padding: clamp(11px, 0.72vw, 16px);
	background: #ffffff;
}

body[data-path="login"] .ccs-brand-badge {
	display: block;
	overflow: hidden;
}

body[data-path="login"] .ccs-brand-badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

body[data-path="login"] .ccs-brand-inner,
body[data-path="login"] .ccs-brand-foot {
	text-shadow: 0 1px 2px rgba(2, 30, 23, 0.45), 0 2px 16px rgba(2, 30, 23, 0.35);
}

body[data-path="login"] .ccs-brand-art {
	display: block;
	width: 100%;
}

body[data-path="login"] .ccs-brand-art svg {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
}

body[data-path="login"] .ccs-brand-copy h1 {
	margin: 0 0 10px;
	font-size: var(--ccs-h1);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #ffffff;
}

body[data-path="login"] .ccs-brand-copy p {
	margin: 0;
	font-size: var(--ccs-tagline);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

body[data-path="login"] .ccs-brand-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
	margin: 0 auto;
	padding: 22px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	width: fit-content;
	max-width: 100%;
}

body[data-path="login"] .ccs-brand-contact li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	font-size: var(--ccs-contact);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

/* rows are centred as a unit, but wrapped text lines up under itself rather
 * than centring raggedly */
body[data-path="login"] .ccs-contact-text {
	min-width: 0;
	text-align: left;
	/* rows break between numbers, never through one */
	overflow-wrap: anywhere;
	hyphens: none;
}

body[data-path="login"] .ccs-contact-prefix {
	margin-right: 7px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.72);
}

body[data-path="login"] .ccs-contact-sep {
	margin: 0 6px;
	color: rgba(255, 255, 255, 0.45);
}

body[data-path="login"] .ccs-contact-icon {
	flex: 0 0 auto;
	width: clamp(17px, 1vw, 20px);
	height: clamp(17px, 1vw, 20px);
	margin-top: 2px;
	color: var(--ccs-mint);
}

body[data-path="login"] .ccs-contact-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

body[data-path="login"] .ccs-brand-contact a {
	display: inline-block;
	/* padding + negative margin lifts the tap target to ~25px without moving
	 * anything on screen */
	padding: 4px 3px;
	margin: -4px -3px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.95) !important;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}

body[data-path="login"] .ccs-brand-contact a:hover,
body[data-path="login"] .ccs-brand-contact a:focus-visible {
	border-bottom-color: rgba(255, 255, 255, 0.7);
}

body[data-path="login"] .ccs-brand-foot {
	position: absolute;
	left: 60px;
	right: 60px;
	bottom: 28px;
	z-index: 1;
	text-align: center;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

/* --- right: form panel -------------------------------------------------- */
body[data-path="login"] .ccs-panel {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 28px;
	background:
		radial-gradient(700px 520px at 92% 4%, rgba(5, 150, 105, 0.07), transparent 60%),
		radial-gradient(620px 480px at 4% 100%, rgba(4, 120, 87, 0.06), transparent 62%),
		#ffffff;
}

body[data-path="login"] .ccs-panel > div {
	width: 100%;
	max-width: var(--ccs-card-w);
}

/* --- the card ----------------------------------------------------------- */
body[data-path="login"] .ccs-login-shell .login-content.page-card {
	width: 100%;
	max-width: var(--ccs-card-w);
	margin: 0 auto;
	padding: var(--ccs-card-pad) var(--ccs-card-pad) calc(var(--ccs-card-pad) - 2px);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--ccs-border);
	border-radius: var(--ccs-radius);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 12px 32px -12px rgba(15, 23, 42, 0.16),
		0 28px 60px -28px rgba(4, 120, 87, 0.22);
}

body[data-path="login"] .ccs-login-shell .login-content.page-card form {
	max-width: none;
}

/* card header (moved inside the card by custom_login.js) */
body[data-path="login"] .ccs-login-shell .page-card .page-card-head {
	padding: 0 0 22px;
	margin: 0;
	text-align: left;
	font-size: inherit;
	font-weight: inherit;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-head h4 {
	margin: 0;
	font-size: var(--ccs-card-h4);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ccs-ink);
}

body[data-path="login"] .ccs-login-shell .ccs-card-sub {
	margin: 6px 0 0;
	font-size: var(--ccs-card-sub);
	line-height: 1.5;
	color: var(--ccs-muted);
}

/* --- fields ------------------------------------------------------------- */
body[data-path="login"] .ccs-login-shell .page-card .page-card-body {
	padding: 0;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body .form-group {
	margin-bottom: 14px;
}

body[data-path="login"] .ccs-login-shell .page-card .email-field,
body[data-path="login"] .ccs-login-shell .page-card .password-field {
	position: relative;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body input.form-control,
body[data-path="login"] .ccs-login-shell .page-card .page-card-body input[type="text"],
body[data-path="login"] .ccs-login-shell .page-card .page-card-body input[type="email"],
body[data-path="login"] .ccs-login-shell .page-card .page-card-body input[type="password"] {
	height: var(--ccs-field-h);
	padding: 0 16px 0 clamp(44px, 2.9vw, 54px);
	margin-bottom: 0;
	font-size: var(--ccs-field-text);
	color: var(--ccs-ink);
	background-color: var(--ccs-field);
	border: 1px solid var(--ccs-border);
	border-radius: var(--ccs-radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* only the password field needs room for the Show/Hide pill */
body[data-path="login"] .ccs-login-shell .page-card .password-field input.form-control {
	padding-right: 82px;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body input.form-control:hover {
	border-color: #cbd5e1;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body input.form-control:focus {
	background-color: var(--ccs-field-focus);
	border-color: var(--ccs-green);
	box-shadow: 0 0 0 4px var(--ccs-ring);
	outline: none;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body.invalid input.form-control {
	border-color: #ef4444;
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body ::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* leading icon - centred regardless of the 16px / 20px source viewBox */
body[data-path="login"] .ccs-login-shell .page-card .page-card-body .field-icon {
	left: clamp(14px, 0.95vw, 19px);
	top: 50%;
	transform: translateY(-50%);
	/* one box for every field icon, so the username and password containers
	 * measure identically in Inspect */
	display: block;
	flex: none;
	box-sizing: content-box;
	width: var(--ccs-field-icon, clamp(17px, 1.1vw, 21px));
	height: var(--ccs-field-icon, clamp(17px, 1.1vw, 21px));
	min-width: var(--ccs-field-icon, clamp(17px, 1.1vw, 21px));
	min-height: var(--ccs-field-icon, clamp(17px, 1.1vw, 21px));
	padding: 0;
	margin: 0;
	overflow: visible;
	color: #94a3b8;
}

/* every field icon is now our own inline shape set, so one light tone applies
 * to all of them */
body[data-path="login"] .ccs-login-shell .page-card .page-card-body .field-icon path,
body[data-path="login"] .ccs-login-shell .page-card .page-card-body .field-icon circle,
body[data-path="login"] .ccs-login-shell .page-card .page-card-body .field-icon rect {
	stroke: currentColor;
	fill: none;
}

/* "Show" / "Hide" password pill. login.js swaps the text only, so this stays
 * safe to restyle. */
body[data-path="login"] .ccs-login-shell .page-card .page-card-body .toggle-password {
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--ccs-green-dark) !important;
	background: rgba(5, 150, 105, 0.09);
	border-radius: 999px;
	user-select: none;
	transition: background-color 0.15s ease;
}

body[data-path="login"] .ccs-login-shell .page-card .page-card-body .toggle-password:hover {
	background: rgba(5, 150, 105, 0.17);
}

/* --- forgot password ---------------------------------------------------- */
body[data-path="login"] .ccs-login-shell .page-card .forgot-password-message {
	margin: 2px 0 0;
	text-align: right;
}

body[data-path="login"] .ccs-login-shell .page-card .forgot-password-message > a {
	display: inline-block;
	/* same trick: ~30px tap target, unchanged visually */
	padding: 7px 4px;
	margin: -7px -4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ccs-green-dark) !important;
	text-decoration: none;
}

body[data-path="login"] .ccs-login-shell .page-card .forgot-password-message > a:hover {
	color: var(--ccs-green) !important;
	text-decoration: underline;
}

/* --- primary button ----------------------------------------------------- */
body[data-path="login"] .ccs-login-shell .page-card .page-card-actions {
	margin-top: 22px;
}

body[data-path="login"] .ccs-login-shell .page-card .btn-primary,
body[data-path="login"] .ccs-login-shell .page-card .btn-login {
	height: var(--ccs-field-h);
	padding: 0 18px;
	font-size: var(--ccs-btn-text);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #ffffff;
	background: var(--ccs-button);
	border: none;
	border-radius: var(--ccs-radius-sm);
	box-shadow: 0 8px 20px -8px var(--ccs-button-glow);
	transition: background-color 0.16s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

body[data-path="login"] .ccs-login-shell .page-card .btn-primary:hover,
body[data-path="login"] .ccs-login-shell .page-card .btn-login:hover {
	background: var(--ccs-button-hover);
	box-shadow: 0 12px 26px -8px rgba(11, 124, 53, 0.8);
}

/* Pressed state. !important is required here, not for specificity: frappe's own
 * stylesheet declares `.btn.btn-primary:active { background-color:
 * var(--invert-neutral) !important }`, which forces the button near-black on
 * click and beats any non-important rule however specific. Declared as
 * background-color (not the shorthand) to override it directly. */
body[data-path="login"] .ccs-login-shell .page-card .btn-primary:active,
body[data-path="login"] .ccs-login-shell .page-card .btn-primary:active:hover,
body[data-path="login"] .ccs-login-shell .page-card .btn-primary:active:focus,
body[data-path="login"] .ccs-login-shell .page-card .btn-login:active,
body[data-path="login"] .ccs-login-shell .page-card .btn-login:active:hover,
body[data-path="login"] .ccs-login-shell .page-card .btn-login:active:focus {
	background-color: var(--ccs-button-active) !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px -6px rgba(11, 124, 53, 0.7);
	transform: translateY(1px);
}

body[data-path="login"] .ccs-login-shell .page-card .btn-primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--ccs-button-ring);
}

/* second button in a stack (e.g. LDAP) */
body[data-path="login"] .ccs-login-shell .page-card .page-card-actions .btn + .btn {
	margin-top: 10px;
}

/* --- divider + alternate logins ---------------------------------------- */
body[data-path="login"] .ccs-login-shell .page-card .social-logins {
	margin-top: 22px;
}

body[data-path="login"] .ccs-login-shell .page-card .login-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	font-size: 12.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #94a3b8;
}

body[data-path="login"] .ccs-login-shell .page-card .login-divider::before,
body[data-path="login"] .ccs-login-shell .page-card .login-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ccs-border);
}

body[data-path="login"] .ccs-login-shell .page-card .social-login-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 0;
}

body[data-path="login"] .ccs-login-shell .page-card .social-login-buttons .login-button-wrapper {
	flex: 1 1 100%;
	min-width: 0;
	padding: 0;
	margin-bottom: 0;
}

body[data-path="login"] .ccs-login-shell .page-card .btn-login-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: calc(var(--ccs-field-h) - 2px);
	padding: 0 16px;
	font-size: var(--ccs-field-text);
	font-weight: 500;
	color: var(--ccs-ink-soft);
	background: #ffffff;
	border: 1px solid var(--ccs-border);
	border-radius: var(--ccs-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-path="login"] .ccs-login-shell .page-card .btn-login-option:hover {
	color: var(--ccs-ink);
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.22);
}

body[data-path="login"] .ccs-login-shell .page-card .btn-login-with-email-link::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Crect x='2.6' y='4.4' width='14.8' height='11.2' rx='2' stroke='%23047857' stroke-width='1.6'/%3E%3Cpath d='M3.4 6.2 10 10.8l6.6-4.6' stroke='%23047857' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- misc --------------------------------------------------------------- */
body[data-path="login"] .ccs-login-shell .sign-up-message {
	margin-top: 18px;
	font-size: 14px;
	color: var(--ccs-muted);
}

body[data-path="login"] .ccs-login-shell .sign-up-message a {
	font-weight: 600;
	color: var(--ccs-green-dark) !important;
	text-decoration: none;
}

body[data-path="login"] .ccs-login-shell .sign-up-message a:hover {
	text-decoration: underline;
}

body[data-path="login"] .ccs-login-shell .ccs-panel-foot {
	display: none;
	margin: 22px 0 0;
	font-size: 12.5px;
	text-align: center;
	color: #94a3b8;
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
	body[data-path="login"] .ccs-login-shell {
		flex-direction: column;
	}

	body[data-path="login"] .ccs-brand {
		flex: 0 0 auto;
		max-width: none;
		padding: 22px 24px 16px;
	}

	/* the compact band crops to the brightest part of the facade, so it needs a
	 * heavier scrim than the full-height panel */
	body[data-path="login"] .ccs-brand::before {
		background-image:
			linear-gradient(
				170deg,
				rgba(3, 50, 39, 0.82) 0%,
				rgba(4, 74, 55, 0.74) 50%,
				rgba(3, 50, 39, 0.84) 100%
			);
	}

	body[data-path="login"] .ccs-brand::after,
	body[data-path="login"] .ccs-brand-art,
	body[data-path="login"] .ccs-brand-foot {
		display: none;
	}

	body[data-path="login"] .ccs-brand-inner {
		max-width: 560px;
		gap: 15px;
	}

	body[data-path="login"] .ccs-brand-mark img,
	body[data-path="login"] .ccs-brand-badge {
		width: 68px;
		height: 68px;
		border-radius: 15px;
	}

	body[data-path="login"] .ccs-brand-mark img {
		padding: 8px;
	}

	body[data-path="login"] .ccs-brand-contact {
		padding-top: 14px;
		gap: 10px;
	}

	body[data-path="login"] .ccs-brand-copy h1 {
		font-size: 20px;
		margin-bottom: 4px;
	}

	/* "Healthcare Management System" and the address rows share one type
	 * treatment here: smaller, regular weight, a little letter-spacing and a
	 * slightly softer white, so they read as supporting text under the name. */
	body[data-path="login"] .ccs-brand-copy p,
	body[data-path="login"] .ccs-brand-contact li {
		font-size: 12.5px;
		font-weight: 400;
		letter-spacing: 0.015em;
		color: rgba(255, 255, 255, 0.88);
	}

	body[data-path="login"] .ccs-login-shell .page-card .page-card-head h4 {
		font-size: 22px;
	}

	body[data-path="login"] .ccs-login-shell .ccs-card-sub {
		font-size: 13.5px;
	}

	body[data-path="login"] .ccs-login-shell .page-card .btn-primary,
	body[data-path="login"] .ccs-login-shell .page-card .btn-login,
	body[data-path="login"] .ccs-login-shell .page-card .btn-login-option {
		font-size: 14.5px;
	}

	body[data-path="login"] .ccs-login-shell .page-card .forgot-password-message > a {
		font-size: 12.5px;
	}

	/* Inputs stay at 16px on touch: iOS Safari auto-zooms the page whenever a
	 * focused field is under 16px, which jumps the layout on tap. */
	body[data-path="login"] .ccs-login-shell .page-card .page-card-body input.form-control {
		font-size: 16px;
	}

	/* Centring the card vertically here stretched the space between the address
	 * block and the card to 80px on a phone and 170px on a tablet, whatever the
	 * padding said. Top-align so the gap is exactly the padding. */
	body[data-path="login"] .ccs-panel {
		align-items: flex-start;
		padding: 18px 20px 22px;
		/* flat white here: the panel no longer runs to the bottom of the screen,
		 * and its faint tint would otherwise show a seam where it ends */
		background: #ffffff;
	}

	/* Let the stacked layout end with its content instead of being stretched to
	 * the full viewport height - that stretch was what left a tall empty band
	 * under the card. Anything below is just page background. */
	body[data-path="login"] .ccs-login-shell {
		min-height: 0;
	}

	body[data-path="login"] .ccs-login-shell .ccs-panel-foot {
		margin-top: 16px;
	}

	body[data-path="login"] .ccs-login-shell .ccs-panel-foot {
		display: block;
	}
}

@media (max-width: 575.98px) {
	body[data-path="login"] .ccs-brand {
		padding: 20px 18px 14px;
	}

	body[data-path="login"] .ccs-brand-mark img,
	body[data-path="login"] .ccs-brand-badge {
		width: 56px;
		height: 56px;
		border-radius: 14px;
	}

	body[data-path="login"] .ccs-brand-copy h1 {
		font-size: 18.5px;
	}

	body[data-path="login"] .ccs-brand-copy p,
	body[data-path="login"] .ccs-brand-contact li {
		font-size: 11.5px;
		letter-spacing: 0.02em;
	}

	body[data-path="login"] .ccs-login-shell .ccs-card-sub {
		font-size: 13px;
	}

	body[data-path="login"] .ccs-login-shell .page-card .btn-primary,
	body[data-path="login"] .ccs-login-shell .page-card .btn-login,
	body[data-path="login"] .ccs-login-shell .page-card .btn-login-option {
		font-size: 14px;
	}

	body[data-path="login"] .ccs-brand-contact {
		padding-top: 12px;
		gap: 9px;
	}

	body[data-path="login"] .ccs-brand-inner {
		gap: 14px;
	}

	body[data-path="login"] .ccs-panel {
		padding: 16px 14px 20px;
	}

	body[data-path="login"] .ccs-login-shell .login-content.page-card {
		padding: 24px 20px 22px;
		border-radius: 14px;
		box-shadow: 0 8px 24px -14px rgba(15, 23, 42, 0.2);
	}

	body[data-path="login"] .ccs-login-shell .page-card .page-card-head h4 {
		font-size: 20px;
	}
}

/* Short desktop viewports: tighten the panel so the brand block never
 * collides with the top and bottom edges. */
@media (min-width: 992px) and (max-height: 700px) {
	body[data-path="login"] .ccs-brand {
		padding: 32px 44px;
	}

	body[data-path="login"] .ccs-brand-inner {
		gap: 20px;
	}

	body[data-path="login"] .ccs-brand-mark img,
	body[data-path="login"] .ccs-brand-badge {
		width: 72px;
		height: 72px;
	}

	body[data-path="login"] .ccs-brand-copy h1 {
		font-size: 26px;
	}

	body[data-path="login"] .ccs-brand-foot {
		bottom: 16px;
	}

	body[data-path="login"] .ccs-panel {
		padding: 28px 24px;
	}
}

/* Landscape phones and anything else very short: the stacked brand band was
 * eating up to 85% of the screen and pushing the form out of sight entirely.
 * Collapse it to a slim header and keep only the landline row. */
@media (max-width: 991.98px) and (max-height: 560px) {
	body[data-path="login"] .ccs-brand {
		padding: 13px 18px;
	}

	body[data-path="login"] .ccs-brand-inner {
		gap: 9px;
		max-width: 620px;
	}

	body[data-path="login"] .ccs-brand-mark img,
	body[data-path="login"] .ccs-brand-badge {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}

	body[data-path="login"] .ccs-brand-mark img {
		padding: 6px;
	}

	body[data-path="login"] .ccs-brand-copy h1 {
		margin-bottom: 1px;
		font-size: 18px;
	}

	body[data-path="login"] .ccs-brand-copy p {
		font-size: 12.5px;
	}

	body[data-path="login"] .ccs-brand-contact {
		padding-top: 0;
		gap: 0;
		border-top: none;
	}

	body[data-path="login"] .ccs-brand-contact li:not(.ccs-contact-phone) {
		display: none;
	}

	body[data-path="login"] .ccs-brand-contact li {
		font-size: 12.5px;
	}

	body[data-path="login"] .ccs-panel {
		padding: 18px 16px 26px;
	}

	body[data-path="login"] .ccs-login-shell .login-content.page-card {
		padding: 22px 20px 20px;
	}

	body[data-path="login"] .ccs-login-shell .page-card .page-card-head {
		padding-bottom: 15px;
	}

	body[data-path="login"] .ccs-login-shell .page-card .page-card-head h4 {
		font-size: 20px;
	}

	body[data-path="login"] .ccs-login-shell .ccs-panel-foot {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] .ccs-login-shell *,
	body[data-path="login"] .ccs-login-shell *::before,
	body[data-path="login"] .ccs-login-shell *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}