/* The first screen, which asks for an email, and the save line under the collection (js/account.js). */
.gate {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow-y: auto;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 70% at 50% 38%, rgba(81, 32, 42, .97), rgba(15, 5, 6, .985) 80%);
  animation: gate-in .35s var(--ease) both;
}
.gate-card {
  width: min(100%, 460px); display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: clamp(22px, 6vw, 38px); border-radius: 16px; background: rgba(10, 4, 5, .55);
  box-shadow: inset 0 0 0 1px rgba(245, 223, 157, .45), 0 24px 60px rgba(0, 0, 0, .55);
}
.gate-brand { font-size: 1.5rem; font-weight: 700; color: var(--gilt-hi); }
.gate-card h1 { font-size: clamp(2rem, 8vw, 2.7rem); margin: 0; }
.gate-card .lede { font-size: 1.02rem; }
.gate-label { margin-top: 6px; font-weight: 700; color: var(--gilt-hi); }
.gate-input {
  font: inherit; font-size: 1.15rem; color: var(--ink); background: var(--cream); width: 100%;
  padding: .7em .8em; border: 0; border-radius: 10px; margin-top: -8px;
  box-shadow: inset 0 2px 5px rgba(27, 21, 18, .28), 0 0 0 1px rgba(245, 223, 157, .5);
}
.gate-input::placeholder { color: #94836f; }
.gate-input:focus-visible { outline: 3px solid var(--gilt-hi); outline-offset: 2px; }
.gate-error { margin-top: -6px; color: #ffb3a6; font-size: .98rem; }
.gate-error:empty { display: none; }
.gate-card .btn:disabled { cursor: progress; }
.gate-card .note { font-size: .95rem; }
#account-line { margin-top: 12px; }
@keyframes gate-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gate { animation: none; } }