*, *::before, *::after { box-sizing: border-box; }

body.gate {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--bj-space-4) var(--bj-space-3);
  background:
    radial-gradient(ellipse min(36rem, 92vw) min(10rem, 22vh) at 50% calc(50% + 11rem), var(--bj-color-accent) 0 99.6%, #0000 100%) no-repeat,
    var(--bj-color-night);
  color: var(--bj-color-ink);
  font-family: var(--bj-font-body);
  font-size: var(--bj-text-md);
  line-height: 1.5;
}

.gate__box {
  position: relative;
  isolation: isolate;
  width: min(100%, 22rem);
  padding: var(--bj-space-5) var(--bj-space-4) var(--bj-space-4);
}
.gate__box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bj-color-surface);
  clip-path: polygon(1.2% 1.4%, 98.8% 0, 100% 98.2%, 0 100%);
}

.gate__title {
  margin: 0 0 var(--bj-space-4);
  font-family: var(--bj-font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.gate__form { display: grid; gap: var(--bj-space-2); }
.gate__label { font-weight: 700; }

.gate__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--bj-color-field-line);
  border-radius: var(--bj-radius-sm);
  background: var(--bj-color-surface);
  color: var(--bj-color-ink);
  font: inherit;
}
.gate__input:hover { border-color: var(--bj-color-ink); }
.gate__input:focus-visible { outline: 3px solid var(--bj-focus-ring); outline-offset: 1px; border-color: var(--bj-color-ink); }
.gate__input[aria-invalid='true'] { border-color: var(--bj-color-error); }

.gate__error { margin: 0; font-weight: 700; color: var(--bj-color-error); }

.gate__submit {
  position: relative;
  isolation: isolate;
  min-height: 3.25rem;
  margin-top: var(--bj-space-3);
  padding: 0.625rem 1.5rem;
  border: 0;
  background: none;
  color: var(--bj-color-on-primary);
  font-family: var(--bj-font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.gate__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bj-color-primary);
  clip-path: polygon(0.9% 6%, 99.3% 0, 100% 94%, 0 100%);
  transition: background-color var(--bj-duration-fast) linear;
}
.gate__submit:hover::before { background: var(--bj-color-primary-strong); }
.gate__submit:active::before { background: var(--bj-color-primary-strong); }
.gate__submit:focus-visible { outline: 3px solid var(--bj-focus-ring); outline-offset: 3px; }
.gate__submit:disabled { color: var(--bj-color-disabled-ink); cursor: not-allowed; }
.gate__submit:disabled::before { background: var(--bj-color-disabled-bg); }

@media (forced-colors: active) {
  .gate__submit { border: 2px solid ButtonText; }
}