/* ---------------------------------------------------------------------------
   CONAHST authentication pages — login, forgot password, reset password,
   activate account.

   One stylesheet for all four. They previously carried 1,321 lines of near
   identical CSS inside <style> blocks in the templates, which broke the rule
   against mixing HTML and CSS and meant a change to the shared look had to be
   made four times.

   Matched to the public site: the same navy field, the same editorial serif
   for headings, the same terracotta accent, and rules instead of shadows. An
   applicant moving from the prospectus to the login screen should not feel
   they have arrived somewhere else.

   pages/apply.html deliberately keeps its own styles; it is the PIN entry
   step and was left untouched.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--auth-navy:        #0e1c40;
	--auth-navy-2:      #16264f;
	--auth-paper:       #ffffff;
	--auth-paper-2:     #f7f8fa;
	--auth-ink:         #15192b;
	--auth-ink-2:       #454c62;
	--auth-muted:       #6b7385;
	--auth-rule:        #dcdfe7;
	--auth-accent:      #c8402f;
	--auth-accent-ink:  #a83324;
	--auth-onnavy:      #e8ecf6;
	--auth-onnavy-mute: #a9b5d0;

	--auth-ok:          #1f7a3d;
	--auth-ok-bg:       #eaf5ee;
	--auth-warn:        #8a5a00;
	--auth-warn-bg:     #fdf5e4;

	--auth-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--auth-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.auth-body,
.auth-body *,
.auth-body *::before,
.auth-body *::after { box-sizing: border-box; }

.auth-body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	background: var(--auth-paper-2);
	color: var(--auth-ink);
	font-family: var(--auth-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

:where(.auth-body) :where(h1, h2) {
	font-family: var(--auth-serif);
	font-weight: 400;
	letter-spacing: -0.005em;
	margin: 0;
	text-wrap: balance;
}
:where(.auth-body) :where(p) { margin: 0; }
:where(.auth-body) :where(a) { color: inherit; }

.auth-skip { position: absolute; left: -9999px; }
.auth-skip:focus {
	left: 16px; top: 16px; z-index: 50;
	background: #fff; color: var(--auth-navy);
	padding: 12px 18px; border: 2px solid var(--auth-accent);
}

/* ----------------------------------------------------------------- card ---- */

.auth-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 1040px;
	background: var(--auth-paper);
	border: 1px solid var(--auth-rule);
	overflow: hidden;
}
.auth-card--single { grid-template-columns: 1fr; max-width: 520px; }

.auth-left { padding: 48px 52px; display: flex; flex-direction: column; }

.auth-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	margin-bottom: 34px;
	align-self: center;
	text-align: center;
}
.auth-logo__img {
	width: 56px; height: 56px;
	object-fit: contain;
	border: 1px solid var(--auth-rule);
	border-radius: 50%;
	padding: 3px;
	background: #fff;
}
.auth-logo__name {
	font-family: var(--auth-serif);
	font-size: 1.2rem;
	letter-spacing: 0.01em;
	color: var(--auth-ink);
}

.auth-heading { font-size: 1.85rem; line-height: 1.15; margin-bottom: 8px; }
.auth-subheading { color: var(--auth-muted); font-size: 0.95rem; margin-bottom: 26px; }

/* --------------------------------------------------------------- alerts ---- */

.auth-alert {
	border-left: 3px solid var(--auth-rule);
	background: var(--auth-paper-2);
	padding: 13px 16px;
	font-size: 0.9rem;
	margin-bottom: 18px;
}
.auth-alert--success { border-left-color: var(--auth-ok); background: var(--auth-ok-bg); color: #14532d; }
.auth-alert--notice  { border-left-color: var(--auth-warn); background: var(--auth-warn-bg); color: #6b4400; }
.auth-alert--error   { border-left-color: var(--auth-accent); background: #fdeeec; color: #8a2b1e; }

/* ----------------------------------------------------------------- form ---- */

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-label { font-size: 0.86rem; font-weight: 600; }

.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-icon {
	position: absolute;
	left: 14px;
	display: inline-flex;
	color: var(--auth-muted);
	pointer-events: none;
}
.auth-input {
	font-family: var(--auth-sans);
	font-size: 0.95rem;
	width: 100%;
	padding: 13px 14px 13px 42px;
	border: 1px solid var(--auth-rule);
	background: var(--auth-paper);
	color: var(--auth-ink);
	border-radius: 0;
}
.auth-input::placeholder { color: var(--auth-muted); }
.auth-input:focus-visible {
	outline: 2px solid var(--auth-accent);
	outline-offset: 1px;
	border-color: var(--auth-accent);
}
/* Where a field has no leading icon. */
.auth-input--plain { padding-left: 14px; }

.auth-pw-toggle {
	position: absolute;
	right: 8px;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: var(--auth-muted);
	display: inline-flex;
}
.auth-pw-toggle:hover { color: var(--auth-ink); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 1px; }
.auth-pw-toggle svg { width: 18px; height: 18px; }
.auth-pw-toggle .icon-hide { display: none; }
.auth-pw-toggle.is-showing .icon-show { display: none; }
.auth-pw-toggle.is-showing .icon-hide { display: inline; }

.auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 0.88rem;
}
.auth-remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-forgot { color: var(--auth-accent); font-weight: 600; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }

.auth-help {
	font-size: 0.84rem;
	color: var(--auth-muted);
	border-left: 2px solid var(--auth-rule);
	padding-left: 12px;
}

.auth-submit {
	font-family: var(--auth-sans);
	font-weight: 600;
	font-size: 0.98rem;
	padding: 14px 24px;
	border: 2px solid var(--auth-accent);
	background: var(--auth-accent);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}
.auth-submit:hover { background: var(--auth-accent-ink); border-color: var(--auth-accent-ink); }
.auth-submit:focus-visible { outline: 3px solid var(--auth-navy); outline-offset: 2px; }
.auth-submit[disabled], .auth-submit.is-busy { opacity: 0.72; cursor: progress; }

.auth-footer {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--auth-rule);
	font-size: 0.9rem;
	color: var(--auth-muted);
}
.auth-footer a { color: var(--auth-accent); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* -------------------------------------------------------- the navy panel --- */

.auth-right {
	background: var(--auth-navy);
	color: #fff;
	padding: 52px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	position: relative;
	overflow: hidden;
}
/* The same single diagonal accent the public site uses. */
.auth-right::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -50px;
	width: 340px;
	height: 220px;
	border-top: 2px solid var(--auth-accent);
	transform: rotate(-24deg);
	opacity: 0.85;
	pointer-events: none;
}
.auth-right > * { position: relative; z-index: 1; }

.auth-illus__crest {
	display: flex;
	justify-content: center;
}
.auth-illus__crest img {
	width: clamp(112px, 16vw, 152px);
	height: clamp(112px, 16vw, 152px);
	object-fit: contain;
	border: 1px solid var(--auth-rule);
	border-radius: 50%;
	background: #fff;
	padding: 6px;
}
.auth-tagline {
	font-family: var(--auth-serif);
	font-size: 1.65rem;
	line-height: 1.25;
	max-width: 16ch;
}
.auth-blurb { color: var(--auth-onnavy-mute); font-size: 0.94rem; max-width: 34ch; }

.auth-features { display: flex; flex-direction: column; gap: 12px; }
.auth-feature-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.92rem;
	color: var(--auth-onnavy);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 12px;
}
.auth-feature-pill:first-child { border-top: 0; padding-top: 0; }
.auth-feature-pill__icon {
	display: inline-flex;
	flex: none;
	color: var(--auth-accent);
}
.auth-feature-pill__icon svg { width: 20px; height: 20px; }

/* ------------------------------------------------- outcome & navigation ---- */

/* Shown in place of the form once a reset email has gone out, or when a token
   is invalid. The icon is a quiet mark rather than a large illustration: the
   sentence beneath it is what the reader needs. */
.auth-outcome { display: flex; flex-direction: column; gap: 12px; }
.auth-outcome__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--auth-rule);
	color: var(--auth-accent);
	margin-bottom: 6px;
}
.auth-outcome__icon svg { width: 22px; height: 22px; }
.auth-outcome--ok .auth-outcome__icon { color: var(--auth-ok); border-color: var(--auth-ok); }

.auth-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--auth-rule);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--auth-accent);
	text-decoration: none;
}
.auth-back:hover { text-decoration: underline; }
.auth-back svg { width: 15px; height: 15px; }

/* --------------------------------------------- application PIN feedback ---- */

/* The PIN field reports back as it is typed: the server is asked whether the
   PIN exists and whose application it belongs to. Seeing your own name is what
   tells an applicant they have typed it correctly. */
.auth-input--valid {
	border-color: var(--auth-ok);
}
.auth-input--valid:focus-visible {
	outline-color: var(--auth-ok);
	border-color: var(--auth-ok);
}

/* An author `display` beats the user-agent rule for [hidden], so the element
   would sit there as an empty green bar until the first check ran. Both
   feedback elements start hidden and must stay that way until the script
   unhides them. */
.auth-pin-success[hidden],
.auth-pin-error[hidden] { display: none; }

.auth-pin-success {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: #14532d;
	background: var(--auth-ok-bg);
	border-left: 3px solid var(--auth-ok);
	padding: 10px 14px;
}
.auth-pin-error {
	margin-bottom: 0;
	font-size: 0.85rem;
}

/* The logo on this page carries the full college name under the mark, since
   an applicant may arrive here from a printed PIN slip rather than the site. */
.auth-logo__tagline {
	display: block;
	font-size: 0.68rem;
	color: var(--auth-muted);
	max-width: 30ch;
	line-height: 1.35;
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
	.auth-card { grid-template-columns: 1fr; max-width: 560px; }
	/* The panel is decorative reassurance; on a phone the form comes first and
	   the panel is dropped rather than stacked below the fold. */
	.auth-right { display: none; }
	.auth-left { padding: 38px 28px; }
	.auth-heading { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
	.auth-body * { transition: none !important; animation: none !important; }
}