/* gates.css
   Login, the access gate and the no-school screen.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 22px; position: relative; z-index: 1;
}
.login-card {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-xl); padding: 44px 38px; width: 100%; max-width: 380px;
  text-align: center; box-shadow: var(--shadow-lg);
  animation: scaleIn 0.24s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* The app icon itself, at badge size. The PNG is opaque and full-bleed, so it
   fills the rounded square and the gradient beneath only shows while it loads. */
.brand-badge {
  width: 66px; height: 66px; border-radius: 18px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #ff8a80 0%, var(--accent) 52%, var(--accent-deep) 100%);
  box-shadow: 0 8px 26px rgba(255,87,87,0.42), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative; overflow: hidden;
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255,255,255,0.20), transparent 46%); }

.login-title { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.login-sub { font-size: 14px; color: var(--label-2); line-height: 1.55; margin: 8px 0 26px; }
.login-foot { font-size: 12px; color: var(--label-3); margin-top: 16px; }
.login-card .btn { border-radius: var(--r-full); font-weight: 600; }

/* ── Access gate ────────────────────────────────────────────────────── */
.gate-card { max-width: 424px; padding: 42px 34px; }
.gate-icon {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #ff8a80 0%, var(--accent) 54%, var(--accent-deep) 100%);
  color: #fff; position: relative;
  box-shadow: 0 8px 26px rgba(255,87,87,0.34), inset 0 1px 0 rgba(255,255,255,0.28);
}
.gate-icon svg { width: 28px; height: 28px; position: relative; z-index: 2; }
/* Glass highlight across the top of the badge, matching .brand-badge. */
.gate-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(175deg, rgba(255,255,255,0.26), transparent 48%);
}
/* Slow outward pulse — draws the eye once without nagging. */
.gate-icon::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  animation: gatePulse 2.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes gatePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,87,87,0.30); }
  70%  { box-shadow: 0 0 0 19px rgba(255,87,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,87,87,0); }
}

.gate-panel {
  margin: 24px 0; padding: 13px 15px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-md); display: flex; flex-direction: column; gap: 9px;
}
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; min-width: 0; }
.gate-row-k { color: var(--label-3); flex-shrink: 0; }
.gate-row-v { color: var(--label-2); font-weight: 550; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-pill {
  font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: var(--r-full);
  background: var(--red-light); color: var(--red); flex-shrink: 0;
}
.gate-actions { display: flex; flex-direction: column; gap: 9px; }