/* Admin gate — the password prompt in front of the authoring tools. */

.admin-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
}

.admin-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 9, .82);
  backdrop-filter: blur(4px);
  animation: fade-in var(--t-fast) var(--ease-out);
}

.admin-gate-card {
  position: relative;
  width: min(380px, calc(100vw - 40px));
  padding: var(--sp-5);
  background: linear-gradient(180deg, rgba(32,27,45,.98), rgba(15,13,21,.98));
  border: 1px solid var(--brass-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: admin-in var(--t-med) var(--ease-snap);
}
@keyframes admin-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.admin-gate-mark {
  font-size: 26px;
  color: var(--brass-1);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.admin-gate-card h2 { font-size: 18px; margin-bottom: var(--sp-2); }

.admin-gate-card.shake { animation: admin-shake .32s var(--ease-in-out); }
@keyframes admin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

/* While the gate is up on a tool page, hide the tool behind it. */
html.admin-locked body > *:not(.admin-gate) { visibility: hidden; }

/* The locked buttons on the menu. */
.locked-tool { position: relative; }
.locked-tool::after {
  content: '🔒';
  margin-left: 6px;
  font-size: 11px;
  opacity: .8;
}

.admin-note {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(212,166,86,.09);
  border: 1px solid var(--brass-3);
  color: var(--brass-0);
  font-size: 12px;
}