/*
 * Login screens. Two visual languages:
 *   .hallie-login-shell       — adult sign-in: CMS Web Solutions brand, white card, navy.
 *   .hallie-child-login-shell — child picture login: cream, warm, playful, large targets.
 */

/* -------- shared brand tokens (consumed by child.css / dashboard.css too) -------- */
:root {
	--cms-navy: #0a2a5e;
	--cms-navy-hover: #0e3a82;
	--cms-red: #d73127;
}

/* =================================================================
   ADULT LOGIN
   ================================================================= */

.hallie-login-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	background:
		radial-gradient(60rem 28rem at 50% -20rem, rgba(10, 42, 94, 0.06), transparent 60%),
		linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%);
}

.hallie-login-card {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	padding: 44px 44px 32px;
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(12, 20, 44, 0.04),
		0 10px 40px rgba(12, 20, 44, 0.08);
}

.hallie-login-brand {
	text-align: center;
	margin-bottom: 22px;
}
.hallie-login-brand img,
.hallie-login-brand .custom-logo-link img {
	max-width: 240px;
	max-height: 80px;
	height: auto;
	width: auto;
	display: inline-block;
}
.hallie-login-brand .custom-logo-link { display: inline-block; }
.hallie-login-brand-fallback {
	font-size: 22px;
	font-weight: 700;
	color: var(--cms-navy);
	letter-spacing: -0.01em;
}
.hallie-login-wordmark {
	display: inline-block;
	width: 100%;
	max-width: 320px;
	height: auto;
	filter: drop-shadow(0 2px 6px rgba(40, 24, 10, 0.10));
}

.hallie-login-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 4px;
	text-align: center;
	color: #121725;
	letter-spacing: -0.01em;
}
.hallie-login-sub {
	margin: 0 0 24px;
	text-align: center;
	color: #5a627a;
	font-size: 13.5px;
}

.hallie-login-error {
	background: #fdecea;
	color: #8a1c1c;
	border: 1px solid #f5c0bb;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 18px;
}

.hallie-login-form { margin: 0; }

.hallie-login-field { display: block; margin-bottom: 14px; }
.hallie-login-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #2b3040;
	margin-bottom: 6px;
}
.hallie-login-field input {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	border: 1px solid #d5d9e2;
	border-radius: 8px;
	background: #fff;
	color: #121725;
	transition: border-color 120ms, box-shadow 120ms;
}
.hallie-login-field input:focus {
	outline: none;
	border-color: var(--cms-navy);
	box-shadow: 0 0 0 3px rgba(10, 42, 94, 0.12);
}

.hallie-login-submit {
	width: 100%;
	margin-top: 6px;
	padding: 12px 16px;
	background: var(--cms-navy);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 120ms, transform 60ms;
}
.hallie-login-submit:hover { background: var(--cms-navy-hover); }
.hallie-login-submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(10, 42, 94, 0.25); }
.hallie-login-submit:active { transform: translateY(1px); }

.hallie-login-alt {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #eef0f5;
	text-align: center;
	font-size: 14px;
}

.hallie-login-childtile {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 20px 10px 10px;
	background: #faf7ff;
	border: 2px solid #e5d8ff;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 140ms, box-shadow 140ms, background 140ms;
	box-shadow: 0 2px 8px rgba(122, 94, 168, 0.12);
}
.hallie-login-childtile:hover,
.hallie-login-childtile:focus {
	background: #f3ecff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(122, 94, 168, 0.22);
	outline: none;
}
.hallie-login-childtile:active { transform: translateY(0); }

.hallie-login-childtile-img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, #ffd7f0, #b598ff, #5ab9f2);
	flex-shrink: 0;
}

.hallie-login-childtile-text {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.2;
}
.hallie-login-childtile-title {
	font-size: 16px;
	font-weight: 700;
	color: #7a5ea8;
}
.hallie-login-childtile-sub {
	font-size: 12px;
	color: #7b8096;
}

.hallie-login-footnote {
	margin: 22px 0 0;
	font-size: 12px;
	color: #7b8096;
	text-align: center;
}
.hallie-login-footnote a { color: inherit; text-decoration: underline; }

/* =================================================================
   CHILD PICTURE LOGIN
   ================================================================= */

.hallie-child-login-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: #FFF8E7;
}

.hallie-child-login-card {
	width: 100%;
	max-width: 640px;
	background: #fff;
	padding: 40px 32px 28px;
	border-radius: 22px;
	box-shadow: 0 8px 28px rgba(40, 24, 10, 0.08);
	text-align: center;
}
.hallie-child-login-card h1 { font-size: 30px; margin: 10px 0 20px; color: #57504c; }

.hallie-child-prompt {
	margin: 6px 0 0;
	font-size: 22px;
	font-weight: 600;
	color: #57504c;
}

.hallie-wordmark {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 22px auto 4px;
	filter: drop-shadow(0 4px 8px rgba(40, 24, 10, 0.15));
}

/* "Playing as Hallie" banner on the pick screen */
.hallie-chosen-banner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 6px;
	background: #faf7ff;
	border: 1px solid #e5d8ff;
	border-radius: 999px;
	margin-bottom: 10px;
}
.hallie-chosen-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, #ffd7f0, #b598ff, #5ab9f2);
}
.hallie-chosen-name {
	font-size: 14px;
	font-weight: 700;
	color: #7a5ea8;
}

.hallie-child-login-hero {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 14px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #7a5ea8;
	background: #f1e9fa;
	border-radius: 999px;
}

.hallie-child-login-back {
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px dashed #eadcff;
	font-size: 13px;
	color: #9a9eab;
}
.hallie-child-login-back a {
	color: #7a5ea8;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 999px;
}
.hallie-child-login-back a:hover,
.hallie-child-login-back a:focus {
	background: #f1e9fa;
	text-decoration: underline;
	outline: none;
}

/* The avatar grid / picture picker styles kept from v1 */

.hallie-avatar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 18px;
}
.hallie-avatar {
	background: #fff;
	border: 2px solid #cdbfa8;
	border-radius: 22px;
	padding: 24px 12px;
	text-align: center;
	cursor: pointer;
	font: inherit;
	box-shadow: 0 4px 14px rgba(40, 24, 10, 0.12);
	transition: transform 180ms, box-shadow 180ms, border-color 180ms;
}
.hallie-avatar:hover,
.hallie-avatar:focus {
	transform: translateY(-3px);
	border-color: #b598ff;
	box-shadow: 0 12px 28px rgba(40, 24, 10, 0.18);
	outline: none;
}
.hallie-avatar-face { display: block; font-size: 64px; line-height: 1; }
.hallie-avatar-img {
	display: block;
	width: 112px;
	height: 112px;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, #ffd7f0, #b598ff, #5ab9f2);
	box-shadow: 0 4px 12px rgba(40, 24, 10, 0.12);
	transition: transform 180ms;
}
.hallie-avatar:hover .hallie-avatar-img,
.hallie-avatar:focus .hallie-avatar-img { transform: scale(1.04); }
.hallie-avatar-name { display: block; margin-top: 10px; font-size: 18px; }

/* Single-child layout: Hallie is the hero. Big avatar, big name, primary CTA. */
.hallie-avatar-grid--single {
	display: block;
	max-width: 360px;
	margin: 0 auto;
}
.hallie-avatar-grid--single .hallie-avatar {
	padding: 36px 24px;
	border-radius: 32px;
	background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
	border-color: #e5d8ff;
	box-shadow: 0 16px 40px rgba(122, 94, 168, 0.18);
}
.hallie-avatar-grid--single .hallie-avatar-img {
	width: 220px;
	height: 220px;
	box-shadow: 0 10px 24px rgba(40, 24, 10, 0.16);
}
.hallie-avatar-grid--single .hallie-avatar-name {
	margin-top: 18px;
	font-size: 30px;
	font-weight: 700;
	color: #5a2ea0;
	letter-spacing: -0.01em;
}
.hallie-avatar-grid--single .hallie-avatar:hover,
.hallie-avatar-grid--single .hallie-avatar:focus {
	border-color: #b598ff;
	box-shadow: 0 22px 50px rgba(122, 94, 168, 0.28);
}

.hallie-pick-label { font-size: 20px; margin-top: 20px; }
.hallie-pick-trail { display: flex; gap: 14px; justify-content: center; margin: 16px 0 24px; }
.hallie-trail-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px; height: 80px;
	border-radius: 22px;
	background: #fff;
	border: 2px dashed #cdbfa8;
	font-size: 42px;
}
.hallie-trail-slot.is-filled { border-style: solid; background: #FFF8E7; }

.hallie-pick-palette {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	max-width: 600px;
	margin: 0 auto;
}
.hallie-pick-btn {
	font: inherit;
	font-size: 42px;
	height: 84px;
	background: #fff;
	border: 2px solid #cdbfa8;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(40, 24, 10, 0.12);
}
.hallie-pick-actions { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.hallie-pick-submit { background: #4a9a5c; }
.hallie-pick-reset { background: #aaa; }

.hallie-btn {
	font: inherit;
	font-size: 18px;
	padding: 12px 22px;
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
}

@media (max-width: 560px) {
	.hallie-pick-palette { grid-template-columns: repeat(4, 1fr); }
	.hallie-login-card { padding: 32px 22px 28px; }
	/* iOS: font-size ≥ 16px on inputs prevents auto-zoom on focus */
	.hallie-login-field input { font-size: 16px; }
	.hallie-login-shell { padding: 40px 16px; }
}