/* entry.css — passcode page only */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.25rem;
  background:
    linear-gradient(90deg, rgba(237, 226, 209, 0.05) 1px, transparent 1px) 0 0 / 64px 64px,
    #183c35;
  color: #f5eee3;
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gate { width: 100%; max-width: 420px; }

.gate__form {
  padding: 2rem 1.75rem 1.5rem;
  background: #fbf8f2;
  color: #252a29;
  border-top: 5px solid #b66e4d;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.gate__form.is-shaking { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.gate__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3d5c53;
}

.gate__row { display: flex; gap: 0.5rem; }

.gate__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 0.95rem;
  background: #fff;
  border: 1px solid rgba(37, 42, 41, 0.42);
  border-bottom: 2px solid #183c35;
  border-radius: 0;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #252a29;
  -webkit-appearance: none;
  appearance: none;
}
.gate__input:focus {
  outline: none;
  border-color: #b66e4d;
  box-shadow: 0 0 0 3px rgba(182, 110, 77, 0.3);
}
.gate__input[aria-invalid="true"] { border-color: #a23a2a; }

.gate__button {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 1.3rem;
  background: #183c35;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.gate__button:hover { background: #8c4b2f; }
.gate__button:focus-visible { outline: 3px solid #b66e4d; outline-offset: 3px; }

.gate__message {
  min-height: 1.5em;
  margin: 0.75rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #9b3322;
}

@media (max-width: 360px) {
  .gate__row { flex-direction: column; }
  .gate__button { width: 100%; }
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate__form.is-shaking { animation: none; }
}