/**
 * MyCorner — staff sign-in (/login/).
 *
 * Loaded on that route only, after app.css, whose tokens, reset and buttons it
 * builds on. Lives in its own cascade layer, declared after everything in
 * app.css, so nothing here needs a specificity bump. The card borrows the
 * property price rail's look — accent rule on top, soft shadow — so the
 * page reads as part of the same site.
 */

@layer login {

	body.mc-login {
		background: var(--c-surface-2);
	}

	.signin {
		display: grid;
		place-items: center;
		align-content: center;
		gap: var(--s-5);
		min-block-size: 100vh;
		min-block-size: 100svh;
		padding: var(--s-6) var(--s-4);
	}

	.signin__card {
		display: grid;
		gap: var(--s-5);
		inline-size: min(100%, 26rem);
		padding: var(--s-6);
		border: 1px solid var(--c-line);
		border-block-start: 3px solid var(--c-accent);
		border-radius: var(--r-lg);
		background: var(--c-surface);
		box-shadow: var(--shadow-md);
	}

	.signin__brand {
		--logo-size: 20px;
		justify-self: start;
		margin-block-end: var(--s-2);
	}

	.signin__title {
		font-family: var(--font-display);
		font-size: var(--fs-xl);
	}

	.signin__lede {
		margin-block-start: calc(var(--s-4) * -1);
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

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

	.signin__note {
		padding: var(--s-3) var(--s-4);
		border-radius: var(--r-md);
		font-size: var(--fs-sm);
		line-height: 1.45;
	}

	.signin__note--error {
		background: #fdecea;
		color: #b3261e;
	}

	.signin__note--info {
		background: var(--c-surface-2);
		color: var(--c-ink-2);
	}

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

	.signin__form {
		display: grid;
		gap: var(--s-4);
	}

	.signin__field {
		display: grid;
		gap: 0.4rem;
	}

	.signin__label-row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--s-3);
	}

	.signin__label {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--c-ink);
	}

	.signin__forgot {
		font-size: var(--fs-xs);
		color: var(--c-muted);
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.signin__input {
		inline-size: 100%;
		min-block-size: 52px;
		padding: 0.8rem 1rem;
		border: 1px solid var(--c-line);
		border-radius: var(--r-md);
		background: var(--c-surface);
		color: var(--c-ink);
		/* 16px keeps iOS from zooming the page on focus. */
		font-size: var(--fs-base);
		transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	}

	.signin__input:focus {
		outline: 0;
		border-color: var(--c-ink);
		box-shadow: 0 0 0 3px rgb(20 20 20 / 6%);
	}

	/* Password field with the show/hide toggle inside its right edge. */
	.signin__pw {
		position: relative;
	}

	.signin__pw .signin__input {
		padding-inline-end: 3.25rem;
	}

	.signin__eye {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		display: grid;
		place-items: center;
		inline-size: 3rem;
		color: var(--c-muted);
		border-radius: 0 var(--r-md) var(--r-md) 0;
	}

	.signin__eye:hover {
		color: var(--c-ink);
	}

	.signin__eye-shut,
	.signin__eye[aria-pressed="true"] .signin__eye-open {
		display: none;
	}

	.signin__eye[aria-pressed="true"] .signin__eye-shut {
		display: block;
	}

	.signin__check {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		justify-self: start;
		font-size: var(--fs-sm);
		color: var(--c-body);
		cursor: pointer;
	}

	.signin__check input {
		inline-size: 18px;
		block-size: 18px;
		margin: 0;
		accent-color: var(--c-accent);
		cursor: pointer;
	}

	/* Same shape as the price rail's CTA: full width, label left, disc right. */
	.signin__submit {
		inline-size: 100%;
		min-block-size: 3.25rem;
		margin-block-start: var(--s-2);
		justify-content: space-between;
		padding-inline-start: 1.5rem;
		font-size: var(--fs-base);
	}

	.signin__back {
		display: inline-flex;
		align-items: center;
		gap: var(--s-2);
		font-size: var(--fs-sm);
		color: var(--c-muted);
	}

	@media (max-width: 480px) {
		.signin {
			align-content: start;
			padding-block-start: var(--s-7);
		}

		.signin__card {
			padding: var(--s-5);
		}
	}
}