/* A single responsive presentation serves mobile and desktop without changing authentication logic. */
:root {
	color-scheme: light;
	font-family: system-ui, sans-serif;
	color: #182d40;
	background: #edf2f6;
}
/* Center the bounded sign-in panel while preserving usable margins on small screens. */
body {
	margin: 0;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	box-sizing: border-box;
}
/* Keep text/buttons readable without imposing a fixed mobile width. */
.sign-in {
	width: min(100%, 26rem);
	padding: 2rem;
	background: white;
	border: 1px solid #dbe4eb;
	border-radius: 1rem;
	box-sizing: border-box;
	text-align: center;
}
/* Brand typography is independent of localized explanatory content. */
h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
/* The modest brand cue avoids an external image/asset dependency on the login boundary. */
.brand-mark {
	margin: auto;
	width: 3rem;
	height: 3rem;
	border-radius: 0.5rem;
	display: grid;
	place-items: center;
	background: #167b44;
	color: white;
	font-size: 1.7rem;
	font-weight: 700;
}
/* Primary/secondary actions maintain adequate target sizes across devices. */
a,
button {
	display: block;
	padding: 0.9rem;
	margin: 1rem 0;
	border-radius: 0.4rem;
	text-decoration: none;
}
/* Microsoft is the sole ordinary authentication action. */
.primary,
button {
	background: #167b44;
	color: white;
	border: none;
}
/* Secondary/session content stays visually subordinate without reducing contrast. */
.secondary,
.subtitle,
.audience {
	color: #456074;
}
/* Keyboard focus must remain visible on both login and emergency controls. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid #b56a00;
	outline-offset: 3px;
}
/* Emergency inputs stay within the same bounded layout instead of a separate login page. */
label,
input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	padding: 0.5rem;
}