/*
 * Build layer for the auth screens. Loaded after the Design file (auth.css), never edits it.
 * Everything here is either page chrome the Design file assumes, or a stop-gap raised with Design.
 */

html, body { margin: 0; padding: 0; }
body { background: #F0EDE6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body:has(.av-app[data-theme="dark"]) { background: #1E1C1A; }

/* Stop-gap, raised with Design: `.av-field:first-of-type` never matches because the eyebrow
   is also a div, so the first field got 24px instead of the specified 40px (26px on phone). */
.av-auth__col .av-field:not(.av-field + .av-field) { margin-top: 40px; }
@media (max-width: 720px) {
	.av-auth__col .av-field:not(.av-field + .av-field) { margin-top: 26px; }
}

/* README: when rate limited, "link switches to ink". Not in auth.css. */
.av-link.is-ink { color: var(--ink); }

/* Alerts and confirmations take focus when they appear; the focus ring is not needed on a message. */
.av-alert:focus, .av-confirm:focus { outline: none; }

/* The holding screen's sign-out link sits under the standfirst, not under a button. */
.av-auth__standfirst + .av-link { margin-top: 28px; }

/* Inputs: stop iOS zoom and the autofill tint from breaking the underline look. */
.av-field__input { -webkit-appearance: none; appearance: none; }
.av-field__input:-webkit-autofill,
.av-field__input:-webkit-autofill:hover,
.av-field__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink);
	-webkit-box-shadow: 0 0 0 1000px var(--p) inset;
	transition: background-color 9999s ease-out 0s;
}

/* Panel photo (Jules, 28 Sep): the photo always fills the whole panel and stays centred.
   On a narrow panel it fits the height and its sides are trimmed evenly; on a panel wider
   than the photo it fits the width and its top and bottom are trimmed evenly. No panel
   colour ever shows beside it. The scrim layer covers the whole panel. */
.av-auth__panel[data-image] {
	background-size: 100% 100%, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
}