/* Logged-out pages rendered by the server (register, code, forgot, reset):
   the landing page's look, with a form instead of the invite card. */
.gate { max-width: 560px; }
.gate .card { text-align: left; padding: 30px 30px 26px; }
.gate .card::before { animation: none; opacity: .45; }
.gate h1.small {
  margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 30px);
  letter-spacing: .08em; color: var(--white);
}
.gate .sub { margin: 0 0 22px; color: var(--muted); font-size: 16px; }
.gate .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gate .field label { font-family: var(--font-display); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.gate .field input {
  padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .55); color: #fff; font-family: var(--font-body); font-size: 18px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.gate .field input:focus { border-color: rgba(207, 227, 255, .8); box-shadow: 0 0 0 4px rgba(207, 227, 255, .10); }
.gate .field input[aria-invalid="true"] { border-color: var(--danger); }
.gate .field .hint { font-size: 13px; color: var(--muted); }
.gate .field .err { font-size: 14px; color: var(--danger); }
.gate .code-input { font-family: var(--font-display); letter-spacing: .4em; text-align: center; font-size: 24px; }
.gate .actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.gate .actions .link { color: var(--muted); font-size: 14px; }
.gate .flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); text-align: left; }
.gate .flash.ok { color: var(--ok); border-color: rgba(143, 227, 180, .4); }
.gate .flash.err { color: var(--danger); border-color: rgba(255, 107, 107, .4); }
.gate .honey { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.gate .banned { text-align: left; }
.gate .banned .big { font-family: var(--font-display); font-size: 22px; letter-spacing: .08em; color: var(--white); margin-bottom: 8px; }
.gate .status { text-align: left; }