/* login.css 
* styles for the login and signup pages
*/

/* === body === */

/* styles for the body
* displays the login and signup pages
*/
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 3.429rem 1.714rem;
}

/* centers the content in the body */
.stage {
	width: 100%;
	max-width: min(31.429rem, 100%);
}

/* content container */
.stage .inner {
	width: 100%;
	background: var(--surface);
	padding: 2.286rem 2.857rem;
	border-radius: 0;
	border: 0.071rem solid var(--line);
	box-shadow: none;
}

/* === brand === */

/* styles for the brand
* displays the logo and name
*/
.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.714rem;
	margin-bottom: 3.429rem;
	padding-bottom: 0.857rem;
	border-bottom: 0.071rem solid var(--line);
}

/* === name === */

/* styles for the name
* style for logo
*/
.brand .name {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* === title === */

/* styles for the title
* displays the title
*/

/* heading 1 */
h1.title {
	margin: 0 0 0.857rem;
	font-size: 2.286rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-align: center;
}

/* paragraph */
p.sub {
	margin: 0 0 2.286rem;
	color: var(--muted);
	font-size: 1rem;
	text-align: center;
}

/* styles for the second row
* displays the forgot password and help links
*/
.row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.714rem;
}

.btn.block {
	width: 100%;
	justify-content: center;
	padding: 0.786rem;
	font-size: 1rem;
}

.password-wrapper {
	position: relative;
}

.password-input {
	padding-right: 2.857rem;
}

.password-toggle {
	position: absolute;
	right: 0.571rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0.286rem;
	cursor: pointer;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-1);
	transition: color 0.12s;
	line-height: 0;
}

.password-toggle:hover {
	color: var(--ink);
}

.password-toggle:focus-visible {
	outline: 0.143rem solid var(--ink);
	outline-offset: 0.143rem;
}

.password-toggle-icon {
	display: block;
}

.password-toggle-icon-hide {
	display: none;
}

.password-toggle[aria-pressed='true'] .password-toggle-icon-show {
	display: none;
}

.password-toggle[aria-pressed='true'] .password-toggle-icon-hide {
	display: block;
}

/* === auth-switch === */

/* styles for the auth-switch
* displays the auth-switch
*/

/* switch between login and signup */
.auth-switch {
	margin: 1.286rem 0 0;
	font-size: 0.929rem;
	color: var(--muted);
	text-align: center;
}

.auth-switch a {
	color: var(--accent-ink);
	font-weight: 500;
}

.auth-switch a:hover {
	text-decoration: underline;
}

.row2 .field {
	margin-bottom: 0; /* Let the row handle the bottom margin */
}

.row2 label {
	font-size: 0.786rem;
	margin-bottom: 0.286rem;
}

/* Authentication Error Banner */
#auth-error {
	color: var(--danger);
	background: var(--danger-bg);
	padding: 0.75rem;
	border-radius: 0.429rem;
	margin-bottom: 1.14rem;
	font-size: 0.857rem;
	text-align: center;
	border: 0.071rem solid oklch(55% 0.18 25deg / 25%);
}

/* Ensure it completely disappears when the hidden attribute is present */
#auth-error[hidden] {
	display: none;
}