/* ==========================================================================
   gate.css — token-entry overlay shown before the page content.
   Client-side only: this hides content from casual viewers of a shared
   preview link, it is not a real access control (the markup still ships
   in the HTML). See js/gate.js for the mechanism.
   ========================================================================== */

/* Content is hidden until unlocked. No-JS visitors never see the
   "unlocked" class, so they stay on the gate — the inverse of base.css's
   .js/.no-js pattern, because here JS is required, not optional. */
body > main {
  display: none;
}

html.gate-unlocked body > main {
  display: block;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-color: var(--color-bg);
  background-image: linear-gradient(160deg, var(--hero-1), var(--color-magenta) 140%);
}

html.gate-unlocked .gate {
  display: none;
}

.gate__panel {
  width: 100%;
  max-width: calc(340 * var(--u));
  text-align: center;
}

.gate__mark {
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

.gate__title {
  font-size: calc(var(--fs-sub) * var(--u));
  line-height: var(--lh-sub);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}

.gate__body {
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  color: rgb(255 255 255 / 0.8);
  margin-bottom: var(--space-7);
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gate__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.08);
  color: var(--color-text);
  font-size: calc(var(--fs-body) * var(--u));
  text-align: center;
  letter-spacing: 0.02em;
}

.gate__input::placeholder {
  color: rgb(255 255 255 / 0.5);
}

.gate__submit {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-body) * var(--u));
  transition: opacity var(--dur-fast) var(--ease-out);
}

.gate__submit:hover {
  opacity: 0.85;
}

.gate__error {
  font-size: calc(var(--fs-sub) * var(--u));
  color: var(--color-accent);
}

.gate__error[hidden] {
  display: none;
}

@media (min-width: 700px) {
  .gate__panel {
    max-width: 420px;
  }
}