/* ==========================================================================
   CROWN Scout Girls — Login / Password reset (W-25 Step 8)
   Scoped under .csg-scope.csg-login so it never leaks into legacy Zox News
   templates. Ported from design_handoff_w25_recruiting_platform/screens/login.jsx
   and CROWN Login.html.

   Three frame variants — all share the dark member-access aesthetic used by
   the paywall gate:
     .csg-login--signin      email + password + forgot link
     .csg-login--reset-req   email → send reset link
     .csg-login--reset-sent  "check your inbox" confirmation

   Uses design tokens from crown-tokens.css:
     --csg-red, --csg-red-dark, --radius-md
   ========================================================================== */

.csg-login{
	--disp: 'Oswald', 'Arial Narrow', sans-serif;
	--bodyf: 'PT Serif', Georgia, serif;
	--uif: 'Roboto', system-ui, sans-serif;
	--disp-ls: 0.01em;
	background: #111;
	color: #fff;
	font-family: var(--uif);
}
.csg-login *,
.csg-login *::before,
.csg-login *::after{ box-sizing: border-box; }

/* Shell -------------------------------------------------------------------- */

.csg-login .lg-shell{
	min-height: 70vh;
	display: flex;
	align-items: stretch;
	background: #111;
}
.csg-login .lg-body{
	flex: 1;
	display: grid;
	place-items: center;
	padding: 48px 24px 64px;
	width: 100%;
}
.csg-login .lg-card{
	width: 100%;
	max-width: 430px;
	display: flex;
	flex-direction: column;
	color: #fff;
}

/* Eyebrow + headings ------------------------------------------------------- */

.csg-login .lg-k{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--uif); font-weight: 700; font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--csg-red, #ED0000);
}
.csg-login .lg-k svg{ width: 15px; height: 15px; }

.csg-login .lg-card h1{
	font-family: var(--disp); font-weight: 700;
	font-size: 46px; line-height: .98; letter-spacing: var(--disp-ls);
	text-transform: uppercase; color: #fff;
	margin: 14px 0 0;
}

.csg-login .lg-lede{
	font-family: var(--bodyf);
	font-size: 16px; line-height: 1.55;
	color: #B4B4B4;
	margin: 14px 0 0;
}
.csg-login .lg-lede b{ color: #fff; }

/* Sent-state mail icon ----------------------------------------------------- */

.csg-login .lg-sent-ic{
	width: 56px; height: 56px; border-radius: 50%;
	background: #1B1B1B; border: 1px solid #2E2E2E;
	display: grid; place-items: center;
	color: var(--csg-red, #ED0000);
	margin-bottom: 18px;
}
.csg-login .lg-sent-ic svg{ width: 26px; height: 26px; }

/* Banners ------------------------------------------------------------------ */

.csg-login .lg-banner{
	display: flex; gap: 11px; align-items: flex-start;
	background: #241110; border: 1px solid #5A211C;
	border-radius: var(--radius-md, 4px);
	padding: 13px 15px; margin-top: 24px;
	font-family: var(--uif); font-size: 13.5px; line-height: 1.45;
	color: #F0B7B0;
}
.csg-login .lg-ban-ic{ flex: none; color: var(--csg-red, #ED0000); margin-top: 1px; }
.csg-login .lg-ban-ic svg{ width: 18px; height: 18px; }

.csg-login .lg-flash{
	margin-top: 22px; padding: 11px 15px;
	background: #10241B; border: 1px solid #1B4735;
	border-radius: var(--radius-md, 4px);
	font-family: var(--uif); font-size: 13.5px; color: #A9E1C6;
}

/* Form --------------------------------------------------------------------- */

.csg-login .lg-form{
	display: flex; flex-direction: column; gap: 18px;
	margin-top: 28px;
}

.csg-login .lg-fld{ display: flex; flex-direction: column; gap: 8px; }
.csg-login .lg-fld-l{
	display: flex; align-items: center;
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .12em; text-transform: uppercase; color: #7A7A7A;
}
.csg-login .lg-fld-aux{
	margin-left: auto;
	font-family: var(--uif); font-weight: 600; font-size: 11px;
	letter-spacing: .02em; text-transform: none;
	color: #C9C9C9; text-decoration: none;
}
.csg-login .lg-fld-aux:hover{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.csg-login .lg-fld input[type="email"],
.csg-login .lg-fld input[type="password"],
.csg-login .lg-fld input[type="text"]{
	font-family: var(--disp); font-weight: 500;
	font-size: 18px; letter-spacing: .02em;
	padding: 14px 16px;
	border: 1px solid #333; border-radius: var(--radius-md, 4px);
	color: #fff; background: #1B1B1B;
	outline: none; width: 100%;
}
.csg-login .lg-fld input::placeholder{
	color: #555;
	font-family: var(--uif); font-weight: 400; letter-spacing: 0;
}
.csg-login .lg-fld input:focus{
	border-color: var(--csg-red, #ED0000);
	box-shadow: 0 0 0 3px rgba(237,0,0,.16);
}
.csg-login .lg-fld input.is-err{
	border-color: var(--csg-red, #ED0000);
	background: #241110;
}

.csg-login .lg-remember{
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--uif); font-size: 12.5px; color: #B4B4B4;
	cursor: pointer;
	margin: -4px 0 0;
}
.csg-login .lg-remember input{
	width: 15px; height: 15px;
	accent-color: var(--csg-red, #ED0000);
	cursor: pointer;
}

/* Buttons ------------------------------------------------------------------ */

.csg-login .lg-btn{
	font-family: var(--disp); font-weight: 600;
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	padding: 9px 16px;
	border-radius: var(--radius-md, 4px);
	cursor: pointer; border: 1px solid transparent;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	text-decoration: none; white-space: nowrap; line-height: 1;
}
.csg-login .lg-btn svg{ width: 15px; height: 15px; }
.csg-login .lg-btn-red{ background: var(--csg-red, #ED0000); color: #fff; }
.csg-login .lg-btn-red:hover{ background: var(--csg-red-dark, #B50000); color: #fff; }
.csg-login .lg-btn-lg{ padding: 15px 28px; font-size: 15px; }
.csg-login .lg-btn-lg svg{ width: 18px; height: 18px; }
.csg-login .lg-btn.is-full{ width: 100%; }

/* Footer strip under the card --------------------------------------------- */

.csg-login .lg-foot{
	display: flex; flex-direction: column; gap: 14px;
	margin-top: 26px; padding-top: 22px;
	border-top: 1px solid #232323;
}
.csg-login .lg-secure{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--uif); font-size: 12.5px; color: #7A7A7A;
}
.csg-login .lg-secure svg{ width: 15px; height: 15px; color: #37A853; }
.csg-login .lg-alt{
	font-family: var(--uif); font-size: 13px; color: #9A9A9A;
}
.csg-login .lg-alt a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.csg-login .lg-alt a:hover{ color: var(--csg-red, #ED0000); }
.csg-login .lg-back{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--disp); font-weight: 600;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: #C9C9C9; text-decoration: none;
}
.csg-login .lg-back svg{ width: 16px; height: 16px; }
.csg-login .lg-back:hover{ color: #fff; }

/* Narrow viewports --------------------------------------------------------- */

@media (max-width: 480px){
	.csg-login .lg-body{ padding: 36px 18px 48px; }
	.csg-login .lg-card h1{ font-size: 38px; }
	.csg-login .lg-btn-lg{ padding: 13px 22px; font-size: 14px; }
}