/* Login page: the halo hero layout with a sign-in form in place of the product copy. */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  isolation: isolate; overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column;
  flex: 1;
}

.stage { position: absolute; inset: 0; z-index: -1; touch-action: pan-y; opacity: 0; animation: fade 1.6s .2s ease forwards; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { mix-blend-mode: screen; }

.copy {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter) 32px;
  max-width: 560px;
  pointer-events: none;
}
.copy > * { pointer-events: auto; }

.wordmark {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(72px, 8.6vw, 124px); line-height: .9; letter-spacing: -.035em;
  font-variation-settings: "opsz" 72;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}

.lede {
  font-size: clamp(28px, 3.05vw, 44px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

/* Sign-in form */
.auth {
  max-width: 440px; display: flex; flex-direction: column; gap: 14px;
  /* Soft panel so the form stays readable when the rainbow passes behind it. */
  padding: 18px; margin-left: -18px;
  background: rgba(21, 21, 23, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px;
}
#form-view { display: flex; flex-direction: column; gap: 14px; }

.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: #fff; cursor: pointer; }
.consent label { cursor: pointer; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hint { font-size: 13px; color: var(--muted); margin-top: -6px; }
.hint[hidden] { display: none; }

.btn-wide { width: 100%; }

.divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; }
.divider::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .28)); }
.divider::after { background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08) 70%, transparent); }

.field-label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.field-row { display: flex; gap: 8px; }
.field-row input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--chip);
  font-size: 15px;
}
.field-row input::placeholder { color: var(--muted); opacity: .7; }
.field-row input:hover { border-color: rgba(255, 255, 255, .22); }
.field-row .btn { flex: none; }

.form-error { min-height: 1.4em; font-size: 14px; color: #ff9b9b; }
.form-error.ok { color: var(--muted); }

.sent { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; position: relative; }
.sent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08) 70%, transparent); }
.sent[hidden] { display: none; }
.sent-title { font-size: 20px; }
.sent-body { font-size: 15px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.sent-body strong { color: var(--ink); font-weight: 500; }
.sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.link-btn { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--ink); }

@media (max-width: 820px) {
  .hero { min-height: max(100svh, 720px); }
  /* The bottom padding leaves room for the prism under the form. */
  .copy { justify-content: flex-start; padding-top: clamp(28px, 7svh, 64px); padding-bottom: clamp(300px, 92vw, 460px); max-width: 100%; }
}

@media (max-width: 820px) {
  .auth { margin-left: 0; }
}

@media (max-width: 420px) {
  .field-row { flex-direction: column; }
  .field-row .btn { width: 100%; }
}