/*
 * Shared styling for the server-rendered pages every audience meets: the
 * password reset form and its result, the signup confirmation, and the privacy
 * policy. From portal M4 maintainers see these too, which is why they were
 * unified (portal M3).
 *
 * Self-hosted on purpose. These pages previously pulled Bootstrap, jQuery and
 * two dropdown plugins from two CDNs — four of the seven resources unused, and
 * jQuery fetched with no integrity hash onto the page where a new password is
 * typed. Nothing here loads from anywhere else, which is what lets the routers
 * send a strict Content-Security-Policy.
 *
 * No web fonts for the same reason: a Google Fonts link would reintroduce the
 * exact third-party request this milestone removed. The system stack costs one
 * less round trip and renders instantly inside a mail client's embedded
 * browser, which is where most of these pages are opened.
 *
 * Palette sampled from public/Background.png, the existing brand artwork:
 * navy #203065 / #00356D, red #BF1E2E, cyan #40C8F4, blue-grey #9DA4BB.
 * Red is reserved for genuine errors and is never decorative.
 */

:root {
	--navy:        #203065;
	--navy-deep:   #00356D;
	--navy-ink:    #16224A;
	--cyan:        #40C8F4;
	--red:         #BF1E2E;
	--red-deep:    #8E1620;

	--ground:      #F4F6FA;
	--surface:     #FFFFFF;
	--ink:         #1B2338;
	--muted:       #5A6480;
	--line:        #D9DEEA;
	--field:       #FFFFFF;
	--field-line:  #B6BECF;

	--focus:       #00356D;
	--radius:      6px;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
	        Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--navy:       #8FA6E8;
		--navy-deep:  #9EC5F0;
		--navy-ink:   #DCE3F5;
		--red:        #F08B84;
		--red-deep:   #F4A9A3;

		--ground:     #10141F;
		--surface:    #1A2032;
		--ink:        #E5E9F3;
		--muted:      #9AA4BE;
		--line:       #2C344A;
		--field:      #141A29;
		--field-line: #3C455F;
		--focus:      #9EC5F0;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
}

/* The brand artwork, behind everything and out of the way. Fixed and
   non-interactive so it never intercepts a tap on the password field. */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('/Background.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: contain;
	background-position: center;
	opacity: 0.14;
	pointer-events: none;
	z-index: -1;
}

@media (prefers-color-scheme: dark) {
	body::after { opacity: 0.07; }
}

.page {
	max-width: 46rem;
	margin: 0 auto;
	padding-inline: 20px;
	padding-block: 40px 32px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sheet {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

h1, h2, h3 { margin: 0; color: var(--navy-ink); text-wrap: balance; line-height: 1.25; }
h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1.02rem; font-weight: 600; }

p  { margin: 0; }
ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
li::marker { color: var(--muted); }

a { color: var(--navy-deep); text-underline-offset: 2px; }
a:hover { color: var(--navy); }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* Forms ------------------------------------------------------------------ */

form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }

label { font-weight: 600; font-size: 0.94rem; color: var(--navy-ink); }

input[type="password"],
input[type="text"] {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--field);
	border: 1px solid var(--field-line);
	border-radius: var(--radius);
	padding: 11px 12px;
}

input[type="password"]:focus-visible,
input[type="text"]:focus-visible,
button:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* Ships hidden and is revealed by reset.js. With scripting disabled a visible
   "Show password" control that does nothing is worse than none at all, and
   these pages must keep working without script. */
.toggle[hidden] { display: none; }

.toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--muted);
}
.toggle input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--navy-deep); }
.toggle label { font-weight: 400; font-size: 0.9rem; color: var(--muted); }

.hint { font-size: 0.86rem; color: var(--muted); }

button {
	font: inherit;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--navy-deep);
	border: 1px solid var(--navy-deep);
	border-radius: var(--radius);
	padding: 11px 20px;
	cursor: pointer;
	align-self: flex-start;
}
button:hover { background: var(--navy); border-color: var(--navy); }

@media (prefers-color-scheme: dark) {
	button { color: #0F1420; }
}

/* Messages --------------------------------------------------------------- */

/* Red is reserved for this. A page that colours its furniture red has nothing
   left to say when something actually goes wrong. */
.error {
	border-left: 3px solid var(--red);
	background: color-mix(in srgb, var(--red) 7%, var(--surface));
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.error strong { color: var(--red-deep); }

.done {
	border-left: 3px solid var(--cyan);
	background: color-mix(in srgb, var(--cyan) 9%, var(--surface));
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Document pages (privacy) ----------------------------------------------- */

.doc { display: flex; flex-direction: column; gap: 22px; }
.doc section { display: flex; flex-direction: column; gap: 9px; }
.doc h2 { padding-top: 4px; border-top: 1px solid var(--line); }
.doc section:first-of-type h2 { border-top: 0; padding-top: 0; }

/* Footer ----------------------------------------------------------------- */

.page-footer {
	margin-top: auto;
	padding-top: 8px;
	text-align: center;
	font-size: 0.84rem;
	color: var(--muted);
}
.page-footer a { color: var(--muted); }

@media (max-width: 480px) {
	.page { padding-block: 24px 20px; }
	.sheet { padding: 22px 18px; }
	h1 { font-size: 1.4rem; }
}