/* ===========================================================================
   login.css — the sign-in card, and the owner's admin room.

   Its own file so the entry page's stylesheet stays the entry page's. Colours
   are read from the shell's tokens where they exist and restated where they
   do not, because this page loads before any room chrome does.
   =========================================================================== */

.signin {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(11, 14, 20, 0.72), rgba(11, 14, 20, 0.94));
  backdrop-filter: blur(3px) saturate(0.9);
  animation: signin-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes signin-in { from { opacity: 0; } to { opacity: 1; } }

.signin-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 34px 30px 28px;
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.92);
  border: 1px solid #2a3345;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  color: #e8e6e1;
  font-family: "Work Sans", system-ui, sans-serif;
  animation: signin-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes signin-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.signin-mark { width: 34px; height: auto; margin: 0 0 16px; opacity: 0.9; }

.signin-eyebrow {
  margin: 0 0 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6c7488;
}
.signin-title {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.signin-sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #a8b0c0;
  min-height: 40px;
}

.signin-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.signin-field[hidden] { display: none; }
.signin-field > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6c7488;
}
.signin-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #2a3345;
  background: #0b0e14;
  color: #e8e6e1;
  font: inherit;
  font-size: 16px;              /* 16px or iOS zooms the whole page on focus */
  letter-spacing: 0.02em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.signin-field input::placeholder { color: #3d4557; }
.signin-field input:focus {
  outline: none;
  border-color: #f2a93b;
  box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.16);
}

.signin-err {
  margin: -6px 0 14px;
  font-size: 13px;
  color: #e8896f;
}
.signin-err[hidden] { display: none; }

.signin-go {
  padding: 13px 16px;
  border-radius: 10px;
  border: 0;
  background: #f2a93b;
  color: #0b0e14;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform 90ms ease, background 160ms ease, opacity 160ms ease;
}
.signin-go:hover:not(:disabled) { background: #ffbc55; }
.signin-go:active:not(:disabled) { transform: scale(0.98); }
.signin-go:disabled { opacity: 0.55; cursor: default; }

.signin-back {
  margin-top: 12px;
  padding: 6px;
  border: 0;
  background: none;
  color: #6c7488;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 160ms ease;
}
.signin-back:hover { color: #a8b0c0; }
.signin-back[hidden] { display: none; }

.signin-card.shake { animation: signin-shake 380ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes signin-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  38% { transform: translateX(6px); }
  58% { transform: translateX(-4px); }
  78% { transform: translateX(2px); }
}

.signin-done { opacity: 0; transition: opacity 240ms ease; }

@media (prefers-reduced-motion: reduce) {
  .signin, .signin-card { animation: none; }
  .signin-card.shake { animation: none; }
}