/* Login gate -- shown instead of the whole app until a real admin or line
   session exists. Reuses base.css's card/btn/input/flash primitives so this
   file only needs the gate-specific layout. */
#auth-gate{
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; background: var(--void);
}
#auth-gate[hidden]{ display: none; }
.gate-shell{ width: 100%; max-width: 720px; }
.gate-brand{ text-align: center; margin-bottom: 28px; }
.gate-brand h1{ margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.gate-brand h1 span{ color: var(--accent-text); }
.gate-brand .sub{ margin-top: 6px; font-size: 12px; }
.gate-panels{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px){ .gate-panels{ grid-template-columns: 1fr; } }
.gate-panel h2{ display: flex; align-items: center; gap: 8px; }
.gate-panel-icon{ font-size: 14px; }
.gate-fail{
  max-width: 720px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 10px;
  background: #FDECEC; border: 1px solid #F3C6C6; color: #B91C1C;
  font-family: var(--font-display); font-size: 13px; display: none;
}
.gate-fail.show{ display: block; }