/* The sign-in page's two ways in. Loaded after keystone-signin.css, which is never edited in this app. */

.entry__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-70); }

.entry__or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--navy-50); font-size: 13px; }
.entry__or::before, .entry__or::after { content: ""; flex: 1; height: 1px; background: var(--navy-10); }
.entry__or span { text-transform: lowercase; letter-spacing: 0.04em; }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy-20); }
.btn--outline:hover { background: var(--grey-soft); border-color: var(--navy-50); }
.btn--gap { margin-top: 12px; }

.notice { font-size: 15px; color: var(--navy-70); background: var(--grey-soft); border-left: 2px solid var(--gold); padding: 9px 13px; margin: 0 0 14px; }
.card--signin .sub { margin: 0 0 4px; }
.card--signin input[type="text"] { width: 100%; font: inherit; font-size: 22px; letter-spacing: 0.3em; text-align: center; padding: 10px 13px; color: var(--navy); background: var(--white); border: 1px solid var(--navy-20); border-radius: 8px; font-variant-numeric: tabular-nums; }
.card--signin input[type="text"]:focus { outline: none; border-color: var(--gold-deep); }

.entry__again { margin: 8px 0 0; text-align: center; }
.linkbtn { background: none; border: 0; padding: 4px; font: inherit; font-size: 14px; color: var(--navy-70); text-decoration: underline; cursor: pointer; }
.linkbtn:hover { color: var(--navy); }
.linkbtn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.more__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--grey-soft); border: 1px solid var(--grey-warm); color: var(--gold-deep); margin-bottom: 10px; }